/* Sotto — shared design system. Elegant, simple, functional. One stylesheet, full light/dark theming via CSS custom properties. Theme is selected by `data-theme="light|dark"` on (set by theme.js); when absent we honour the OS via prefers-color-scheme. Colour tokens are SEMANTIC, not literal, so the same component markup styles correctly in both themes. The advice-type accents (now/ambient/answer/note/ action/summary/translation) mirror web/panel.html so the wire contract and the visual language stay in lockstep. */ /* ----------------------------------------------------------------- tokens */ :root { /* Geometry & type — shared across themes. */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px -12px rgba(0, 0, 0, .25); --ring: 0 0 0 3px var(--accent-ring); --t-fast: .14s ease; --t-med: .22s ease; } /* Dark theme (default look — matches the existing panel). */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1116; --bg-grad: radial-gradient(1200px 600px at 80% -10%, #141b26 0%, #0e1116 60%); --surface: #151a21; --surface-2: #12161c; --surface-3: #1b212a; --input-bg: #0b0e12; --border: #232a33; --border-strong: #2f3a47; --text: #e6e9ee; --text-dim: #aab3c0; --text-faint: #6b7686; --accent: #2563eb; --accent-hi: #3b82f6; --accent-contrast: #ffffff; --accent-ring: rgba(59, 130, 246, .35); --good: #4ade80; --bad: #f87171; --c-now: #f87171; --c-now-bg: rgba(248, 113, 113, .10); --c-ambient: #3b82f6; --c-ambient-bg: transparent; --c-answer: #a78bfa; --c-answer-bg: rgba(167, 139, 250, .08); --c-note: #64748b; --c-note-bg: rgba(100, 116, 139, .08); --c-action: #fbbf24; --c-action-bg: rgba(251, 191, 36, .08); --c-summary: #34d399; --c-summary-bg: rgba(52, 211, 153, .10); --c-translation: #22d3ee;--c-translation-bg: rgba(34, 211, 238, .08); --c-you: #4ade80; --c-you-bg: rgba(74, 222, 128, .08); } /* Light theme. */ :root[data-theme="light"] { color-scheme: light; --bg: #f4f6f9; --bg-grad: radial-gradient(1200px 600px at 80% -10%, #eaf0fb 0%, #f4f6f9 60%); --surface: #ffffff; --surface-2: #f7f9fc; --surface-3: #eef1f6; --input-bg: #ffffff; --border: #e2e7ef; --border-strong: #d2d9e4; --text: #1a2230; --text-dim: #4a5567; --text-faint: #8a94a6; --accent: #2563eb; --accent-hi: #1d4ed8; --accent-contrast: #ffffff; --accent-ring: rgba(37, 99, 235, .22); --good: #16a34a; --bad: #dc2626; --c-now: #dc2626; --c-now-bg: rgba(220, 38, 38, .07); --c-ambient: #2563eb; --c-ambient-bg: transparent; --c-answer: #7c3aed; --c-answer-bg: rgba(124, 58, 237, .06); --c-note: #64748b; --c-note-bg: rgba(100, 116, 139, .06); --c-action: #d97706; --c-action-bg: rgba(217, 119, 6, .07); --c-summary: #059669; --c-summary-bg: rgba(5, 150, 105, .08); --c-translation: #0891b2;--c-translation-bg: rgba(8, 145, 178, .07); --c-you: #16a34a; --c-you-bg: rgba(22, 163, 74, .06); } /* When no explicit theme is set, follow the OS. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #f4f6f9; --bg-grad: radial-gradient(1200px 600px at 80% -10%, #eaf0fb 0%, #f4f6f9 60%); --surface: #ffffff; --surface-2: #f7f9fc; --surface-3: #eef1f6; --input-bg: #ffffff; --border: #e2e7ef; --border-strong: #d2d9e4; --text: #1a2230; --text-dim: #4a5567; --text-faint: #8a94a6; --accent: #2563eb; --accent-hi: #1d4ed8; --accent-ring: rgba(37, 99, 235, .22); --good: #16a34a; --bad: #dc2626; --c-now: #dc2626; --c-now-bg: rgba(220, 38, 38, .07); --c-ambient: #2563eb; --c-ambient-bg: transparent; --c-answer: #7c3aed; --c-answer-bg: rgba(124, 58, 237, .06); --c-note: #64748b; --c-note-bg: rgba(100, 116, 139, .06); --c-action: #d97706; --c-action-bg: rgba(217, 119, 6, .07); --c-summary: #059669; --c-summary-bg: rgba(5, 150, 105, .08); --c-translation: #0891b2;--c-translation-bg: rgba(8, 145, 178, .07); --c-you: #16a34a; --c-you-bg: rgba(22, 163, 74, .06); } } /* ----------------------------------------------------------------- base */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font: 15px/1.5 var(--font); background: var(--bg); background-image: var(--bg-grad); background-attachment: fixed; color: var(--text); -webkit-font-smoothing: antialiased; transition: background-color var(--t-med), color var(--t-med); } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--accent-ring); } /* Scrollbars — quiet in both themes. */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); } *::-webkit-scrollbar-track { background: transparent; } /* ----------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 9px 14px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface-3); color: var(--text); cursor: pointer; font-size: 14px; font-weight: 500; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), opacity var(--t-fast); } .btn:hover { border-color: var(--accent); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: var(--ring); } .btn:disabled { opacity: .45; cursor: default; } .btn:disabled:hover { border-color: var(--border-strong); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 600; } .btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); } .btn-ghost { background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--surface-3); border-color: var(--border); } .btn-icon { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: var(--r-sm); } /* Pill toggle (mic/cam) — active vs muted. */ .btn-toggle.off { background: var(--c-now-bg); border-color: var(--c-now); color: var(--c-now); } /* ----------------------------------------------------------------- inputs */ .input, select.input { width: 100%; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .input:focus, select.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .input::placeholder { color: var(--text-faint); } /* ----------------------------------------------------------------- tags */ .tag { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; padding: 2px 7px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-faint); white-space: nowrap; } .tag.now { background: var(--c-now-bg); color: var(--c-now); } /* The playbook a deal runs under. Not uppercased and not truncated: it is a name a human chose, and "MANDAT EXCLUSIV · V3" reads as a status code rather than as their document. Allowed to wrap on a narrow card. */ .tag.pb { text-transform: none; letter-spacing: 0; font-weight: 500; background: var(--c-ambient-bg); color: var(--c-ambient); border: 1px solid var(--c-ambient); white-space: normal; word-break: break-word; } .tag.private { background: var(--c-answer-bg); color: var(--c-answer); } .tag.refs { background: var(--c-ambient-bg); color: var(--c-ambient); border: 1px solid var(--c-ambient); } .tag.action { background: var(--c-action-bg); color: var(--c-action); } .tag.summary { background: var(--c-summary-bg); color: var(--c-summary); } .tag.translation { background: var(--c-translation-bg); color: var(--c-translation); } .tag.you { background: var(--c-you-bg); color: var(--c-you); } /* ----------------------------------------------------------------- presence dot */ .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); flex: none; transition: background var(--t-fast); } .dot.live { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); } .dot.warn { background: var(--c-action); } .dot.error { background: var(--bad); } /* ----------------------------------------------------------------- a11y */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ============================ Showcase (marketing replay) ============================ */ /* sim-showcase Phase 4: a static split-screen replay for the website. Scoped .sc-* classes; reuses the design tokens above so it tracks light/dark via theme.js. */ .sc-disclosure { font-size: 12px; font-weight: 600; color: var(--c-action); border: 1px solid var(--c-action); border-radius: var(--r-pill); padding: 3px 10px; letter-spacing: .02em; } .sc-noscript { background: var(--c-now-bg); color: var(--text); border: 1px solid var(--c-now); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4); border-radius: var(--r-md); } .sc-main { max-width: 1120px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) 64px; } .sc-intro h1 { font-size: 30px; line-height: 1.15; margin: 0 0 var(--sp-2); } .sc-intro p { color: var(--text-dim); margin: 0 0 var(--sp-5); max-width: 62ch; } .sc-banner { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); box-shadow: var(--shadow); } .sc-banner-title { font-weight: 650; margin-bottom: var(--sp-4); } .sc-cmp { display: flex; align-items: stretch; gap: var(--sp-4); } .sc-cmp-col { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); } .sc-cmp-col.good { border-color: var(--good); background: var(--c-you-bg); } .sc-cmp-h { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin-bottom: var(--sp-2); } .sc-cmp-big { font-size: 34px; font-weight: 750; line-height: 1; } .sc-cmp-big span { font-size: 13px; font-weight: 500; color: var(--text-faint); margin-left: 4px; } .sc-cmp-col.good .sc-cmp-big { color: var(--good); } .sc-cmp-row { font-size: 13px; color: var(--text-dim); margin-top: var(--sp-2); } .sc-cmp-row b { color: var(--text); } .sc-cmp-vs { align-self: center; color: var(--text-faint); font-weight: 600; } .sc-controls { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; } .sc-pick { max-width: 280px; } .sc-speeds { display: inline-flex; gap: 2px; } .sc-speed.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .sc-clock { font-variant-numeric: tabular-nums; color: var(--text-faint); font-size: 13px; } .sc-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .sc-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); min-height: 420px; display: flex; flex-direction: column; } .sc-col-sotto { background: var(--surface-2); } .sc-col-head { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); } .sc-col-head h2 { font-size: 15px; margin: 0; } .sc-sub { font-size: 12px; color: var(--text-faint); } .sc-silence { font-size: 12px; color: var(--text-faint); font-style: italic; margin-bottom: var(--sp-3); } .sc-feed { flex: 1; overflow-y: auto; max-height: 62vh; display: flex; flex-direction: column; gap: var(--sp-3); scroll-behavior: smooth; } .sc-empty { color: var(--text-faint); text-align: center; margin: auto; } .sc-turn { max-width: 88%; } .sc-turn.us { align-self: flex-end; text-align: right; } .sc-who { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; margin: 0 6px 3px; } .sc-coached { margin-left: 6px; color: var(--c-now); font-weight: 650; text-transform: none; letter-spacing: 0; } .sc-bubble { padding: 9px 13px; border-radius: 14px; line-height: 1.45; display: inline-block; text-align: left; } .sc-turn.them .sc-bubble { background: var(--surface-3); border-bottom-left-radius: 4px; } .sc-turn.us .sc-bubble { background: var(--accent); color: var(--accent-contrast); border-bottom-right-radius: 4px; } .sc-advice { border-left: 3px solid var(--c-ambient); background: var(--surface); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); } .sc-advice.sc-now { border-left-color: var(--c-now); background: var(--c-now-bg); } .sc-advice.sc-note { border-left-color: var(--c-note); } .sc-advice.sc-action_item { border-left-color: var(--c-action); } .sc-advice.sc-summary { border-left-color: var(--c-summary); background: var(--c-summary-bg); } .sc-atag { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 3px; } .sc-advice.sc-now .sc-atag { color: var(--c-now); } .sc-ahead { font-weight: 650; } .sc-adetail { font-size: 13px; color: var(--text-dim); margin-top: 2px; } .sc-caveat { color: var(--text-faint); font-size: 12px; margin-top: var(--sp-4); font-style: italic; } @media (max-width: 760px) { .sc-split { grid-template-columns: 1fr; } .sc-cmp { flex-direction: column; } } /* ---- Showcase: hero / primer / scenario / debrief (Phase 4+) ---- */ .sc-hero { margin-bottom: var(--sp-5); } .sc-hero h1 { font-size: 32px; line-height: 1.12; margin: 0 0 var(--sp-3); max-width: 20ch; } .sc-lede { color: var(--text-dim); margin: 0 0 var(--sp-2); max-width: 68ch; font-size: 15px; } .sc-lede b { color: var(--text); } .sc-lede-dim { color: var(--text-faint); } .sc-primer { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); } .sc-step { display: flex; gap: var(--sp-3); align-items: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font-size: 13px; color: var(--text-dim); } .sc-step b { color: var(--text); } .sc-step-n { flex: none; width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-contrast); font-weight: 700; font-size: 13px; display: grid; place-items: center; } .sc-lock { color: var(--c-summary); font-weight: 600; } .sc-scenario { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); box-shadow: var(--shadow); } .sc-scenario-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); } .sc-scenario-head h2 { font-size: 16px; margin: 0; } .sc-case { color: var(--text-dim); font-size: 14px; } .sc-brief-note { font-size: 12px; color: var(--text-faint); font-style: italic; margin-bottom: var(--sp-2); } .sc-brief-row { display: flex; gap: var(--sp-3); padding: 5px 0; border-top: 1px solid var(--border); font-size: 13px; } .sc-brief-row:first-of-type { border-top: none; } .sc-brief-k { flex: none; width: 92px; color: var(--text-faint); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; padding-top: 1px; } .sc-brief-v { color: var(--text); } .sc-brief-row.red .sc-brief-v { color: var(--c-now); } .sc-debrief { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5) var(--sp-5); margin-top: var(--sp-5); box-shadow: var(--shadow); } .sc-debrief h2 { font-size: 18px; margin: 0 0 var(--sp-3); } .sc-outcome { font-weight: 650; font-size: 15px; margin-bottom: var(--sp-2); } .sc-db-summary { color: var(--text-dim); margin: 0 0 var(--sp-4); max-width: 82ch; line-height: 1.55; } .sc-tactics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .sc-tactic-col h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin: 0 0 var(--sp-2); } .sc-tactic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); } .sc-tactic-list li { background: var(--surface-2); border-radius: var(--r-sm); padding: 8px 11px; } .sc-t-name { display: block; font-weight: 600; font-size: 13px; } .sc-t-note { display: block; color: var(--text-dim); font-size: 12.5px; margin-top: 1px; } .sc-t-none { color: var(--text-faint); font-style: italic; } .sc-turning { margin-top: var(--sp-4); padding: var(--sp-3); background: var(--c-action-bg); border-left: 3px solid var(--c-action); border-radius: var(--r-sm); font-size: 13px; } .sc-pick-label { font-size: 13px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 760px) { .sc-primer { grid-template-columns: 1fr; } .sc-tactics { grid-template-columns: 1fr; } .sc-hero h1 { font-size: 26px; } } .sc-tip { font-size: 12.5px; color: var(--text-faint); margin: -4px 0 var(--sp-3); } .sc-tip b { color: var(--text-dim); } .sc-debrief-locked { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2); color: var(--text-dim); font-size: 13.5px; text-align: center; } .sc-debrief-locked b { color: var(--text); }