/* Whisgram web app — mobile-first, vanilla. */ :root { /* Palette — violet-biased neutrals (Whisgram design system) */ --brand: #7c3aed; --brand-hover: #6d28d9; --accent-strong: #6d28d9; --accent-soft: #f1eafe; --bg: #faf9fc; --surface: #f3f1f8; --card: #ffffff; --text: #1a1822; --muted: #6c6579; --border: #e6e2f0; --hair: #edeaf4; --error: #b91c1c; --error-bg: #fef2f2; /* Type roles: Newsreader (display serif) · Hanken Grotesk (body) · IBM Plex Mono (timestamps, meta, labels — all the "data") */ --font-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif; --font-serif: "Newsreader", Georgia, "Times New Roman", serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Depth */ --shadow-sm: 0 1px 2px rgba(26, 20, 40, 0.06); --shadow-md: 0 10px 28px -12px rgba(26, 20, 40, 0.16); --shadow-lg: 0 28px 64px -20px rgba(26, 20, 40, 0.26); --shadow: var(--shadow-sm); --radius: 9px; --radius-sm: 6px; --tap: 44px; /* Theme Shoelace to the brand (app.css loads after Shoelace, so these win) */ --sl-color-primary-600: #7c3aed; --sl-color-primary-500: #8b5cf6; --sl-color-primary-700: #6d28d9; --sl-font-sans: "Hanken Grotesk", system-ui, sans-serif; } .sl-theme-dark { --sl-color-primary-600: #a182f2; --sl-color-primary-500: #8b5cf6; --sl-color-primary-700: #b7a0f6; } /* Result-page tabs */ /* Hide the tab group until the web component is defined (avoids a flash of unstyled markup while the autoloader boots). */ sl-tab-group:not(:defined) { visibility: hidden; } /* Subtle card so the result document lifts off the page background instead of floating flat on it. */ .result-card { margin-top: 0.85rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 0.25rem 1.5rem 1.5rem; } .result-tabs { margin-top: 0; } /* Section eyebrow (mono, uppercase, tracked) — data-label styling */ .tab-h { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; } .tab-sub { margin-top: 1.5rem; } /* Dark vars applied when: * - user hasn't picked a theme AND the OS prefers dark, OR * - user explicitly picked dark (data-theme="dark" on ). * Light vars stay as :root defaults so an explicit data-theme="light" wins * over the OS preference. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand: #a182f2; --brand-hover: #b7a0f6; --accent-strong: #b7a0f6; --accent-soft: #241a38; --bg: #111017; --surface: #221f2d; --card: #1a1823; --text: #eceaf3; --muted: #9a94a9; --border: #302b3e; --hair: #26222f; --error: #fca5a5; --error-bg: #2a1313; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 12px 32px -14px rgba(0, 0, 0, 0.6); --shadow-lg: 0 34px 74px -22px rgba(0, 0, 0, 0.72); --sl-color-primary-600: #a182f2; --sl-color-primary-700: #b7a0f6; } } [data-theme="dark"] { --brand: #a182f2; --brand-hover: #b7a0f6; --accent-strong: #b7a0f6; --accent-soft: #241a38; --bg: #111017; --surface: #221f2d; --card: #1a1823; --text: #eceaf3; --muted: #9a94a9; --border: #302b3e; --hair: #26222f; --error: #fca5a5; --error-bg: #2a1313; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 12px 32px -14px rgba(0, 0, 0, 0.6); --shadow-lg: 0 34px 74px -22px rgba(0, 0, 0, 0.72); --sl-color-primary-600: #a182f2; --sl-color-primary-700: #b7a0f6; } * { box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Any element with [hidden] should always be hidden, regardless of which * `display:` rule it carries. Without this, our `.drop-prompt { display:flex }` * (and similar) win the cascade over the browser's `[hidden] { display:none }` * default at equal specificity → `hidden=true` does nothing visible. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--surface); padding: 1px 6px; border-radius: 4px; } pre { background: var(--surface); padding: 0.75rem 1rem; border-radius: var(--radius-sm); overflow-x: auto; font-size: 0.875rem; } pre code { background: none; padding: 0; } .muted { color: var(--muted); } .small { font-size: 0.875rem; } /* --- Topbar --- Full-width background so the bottom border + sticky strip spans the whole viewport (proper "header" look, not a floating chip). The .topbar-inner wrapper keeps the actual content constrained to a comfortable width and centered, matching the container below. */ .topbar { border-bottom: 1px solid var(--border); padding: 0.5rem 1rem; position: sticky; top: 0; background: var(--bg); z-index: 10; } .topbar-inner { display: flex; align-items: center; gap: 0.5rem; max-width: 960px; margin: 0 auto; width: 100%; } /* Logo-left, everything-else-right pattern (Echoly / Stripe / Linear). The first non-brand child gets `margin-left: auto` which consumes the available space, pushing nav + actions to the right edge. Landing has both .landing-nav AND .topbar-actions on the right; app views just have .topbar-actions. */ .landing-nav { margin-left: auto; } body:not([data-view="landing"]) .topbar-actions { margin-left: auto; } /* On the landing view we use a wider canvas (matches modern marketing-page norms). The app view stays at 720px because the URL form reads fine narrow. */ body[data-view="landing"] .topbar-inner, body[data-view="landing"] .container { max-width: 1100px; } .brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; } .logo { width: 1.5rem; height: 1.5rem; display: block; } .brand-name { font-size: 1.05rem; letter-spacing: -0.01em; } .topbar-actions { display: flex; align-items: center; gap: 0.25rem; } /* Balance pill base look comes from .pill + .balance-pill (in the header design-system block below). Only the low-balance state lives here. */ .balance-pill[data-empty="true"] { background: var(--error-bg); color: var(--error); border-color: var(--error); } .balance-pill[data-empty="true"] .bal-num { color: var(--error); } .pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem; margin-top: 0.5rem; } .pack-btn { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem 0.5rem; text-align: center; font-size: 0.95rem; line-height: 1.25; } .pack-btn strong { font-weight: 600; font-size: 1rem; } .pack-btn span { font-size: 0.85rem; opacity: 0.9; } .icon-btn { background: none; border: 1px solid transparent; color: var(--muted); width: var(--tap); height: var(--tap); min-height: var(--tap); padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: 1.05rem; cursor: pointer; line-height: 1; } .icon-btn:hover { background: var(--surface); color: var(--text); } .icon-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -1px; } /* --- Container --- */ .container { max-width: 960px; width: 100%; margin: 0 auto; padding: 1.25rem 1rem 2rem; flex: 1; } /* --- Idle view --- */ .headline { font-size: 1.5rem; letter-spacing: -0.02em; margin: 0.5rem 0 0.75rem; line-height: 1.2; } @media (min-width: 640px) { .headline { font-size: 1.875rem; } } .lede { color: var(--muted); margin: 0 0 1.5rem; } .url-form { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.75rem; } .url-form .hint { margin: -0.25rem 0 0; } .url-form .divider { margin: 0.5rem 0; } .primary-block { width: 100%; margin-top: 0.25rem; } @media (min-width: 640px) { .primary-block { width: 100%; } } .url-input-wrap { position: relative; display: flex; flex: 1; } input[type="url"] { flex: 1; min-height: var(--tap); padding: 0.625rem 0.875rem; font-size: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text); font-family: inherit; } /* Reserve room on the right so typed text never sits under the clear button. */ .url-input-wrap > input[type="url"] { padding-right: 2.5rem; } .input-clear-btn { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: none; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; transition: color 0.12s ease, background 0.12s ease; } .input-clear-btn:hover { color: var(--text); background: var(--surface); } .input-clear-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } .input-clear-btn[hidden] { display: none; } input[type="url"]:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .hint { margin: 0; font-size: 0.875rem; } .divider { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .drop-zone { position: relative; display: flex; align-items: center; justify-content: center; padding: 1.25rem 1rem; border: 2px dashed var(--border); border-radius: var(--radius); cursor: pointer; background: var(--surface); transition: border-color 0.15s, background-color 0.15s; outline: none; } .drop-zone:hover, .drop-zone:focus-visible, .drop-zone.drag-over { border-color: var(--brand); background: var(--card); } .drop-prompt { display: flex; align-items: center; gap: 0.75rem; } .drop-icon { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--card); border: 1px solid var(--border); color: var(--brand); font-size: 1rem; font-weight: 700; flex-shrink: 0; } .drop-text { display: flex; flex-direction: column; gap: 0.125rem; } .drop-text strong { font-size: 0.95rem; font-weight: 600; } .drop-selected { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0 0.5rem; } .drop-selected .file-name { font-size: 0.9rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } /* --- Buttons --- */ button { font-family: inherit; font-size: 0.95rem; font-weight: 500; min-height: var(--tap); padding: 0.625rem 1.125rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; } button:disabled { opacity: 0.5; cursor: not-allowed; } .primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(26, 20, 40, 0.12), 0 6px 16px -8px var(--brand); } .primary:not(:disabled):hover { background: var(--brand-hover); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(26, 20, 40, 0.14), 0 12px 24px -8px var(--brand); } .primary:not(:disabled):active { transform: translateY(0); } .secondary { background: var(--card); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-sm); } .secondary:not(:disabled):hover { background: var(--surface); border-color: var(--accent-soft); } /* --- Working view --- */ .working { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.5rem 1rem; gap: 0.75rem; } .working h2 { margin: 0.5rem 0 0; font-size: 1.125rem; } .spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* --- Complete view --- */ .result-head { margin-bottom: 1.25rem; } .result-head h2 { margin: 0 0 0.5rem; font-family: var(--font-serif); font-weight: 500; font-size: 2rem; line-height: 1.12; letter-spacing: -0.015em; text-wrap: pretty; } .result-head .muted { font-family: var(--font-mono); font-size: 0.8rem; } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.125rem; margin-bottom: 1rem; box-shadow: var(--shadow); } .card-title { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 0.625rem; } .card-title-disclosure { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); cursor: pointer; user-select: none; list-style: none; display: flex; align-items: center; gap: 0.375rem; } .card-title-disclosure::before { content: "▸"; font-size: 0.75rem; transition: transform 0.15s; } details[open] .card-title-disclosure::before { transform: rotate(90deg); } details > div, details > p { margin-top: 0.75rem; } .key-points { margin: 0; padding-left: 1.25rem; } .key-points li { margin-bottom: 0.5rem; } .key-points li:last-child { margin-bottom: 0; } /* Clickable timestamp on a takeaway (drives the mini-player) */ .key-point-timed { display: flex; gap: 0.5rem; align-items: baseline; } .kp-ts { flex: 0 0 auto; font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--brand); text-decoration: none; min-width: 3.25rem; padding-top: 0.1rem; } .kp-ts[href]:hover { text-decoration: underline; } .mermaid-stage { overflow-x: auto; text-align: center; padding: 0.5rem 0; } .mermaid-stage svg { max-width: 100%; height: auto; } .mermaid-actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; flex-wrap: wrap; } .code-block { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; line-height: 1.5; overflow-x: auto; white-space: pre; color: var(--text); } .mermaid-error { color: var(--error); background: var(--error-bg); padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-size: 0.875rem; line-height: 1.4; } /* Editable diagram */ .mermaid-editor { margin-top: 0.75rem; } .mermaid-editor-input { width: 100%; min-height: 180px; resize: vertical; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; line-height: 1.5; color: var(--text); tab-size: 2; } .mermaid-editor-input:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .mermaid-editor-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; flex-wrap: wrap; } .mermaid-editor-actions .mermaid-error { padding: 0.4rem 0.6rem; font-size: 0.8125rem; } .summary-md h1, .summary-md h2, .summary-md h3 { margin: 1.25rem 0 0.5rem; letter-spacing: -0.01em; } .summary-md h1:first-child, .summary-md h2:first-child, .summary-md h3:first-child { margin-top: 0; } .summary-md h2 { font-size: 1.125rem; } .summary-md h3 { font-size: 1rem; } .summary-md p { margin: 0.5rem 0; } .summary-md ul, .summary-md ol { padding-left: 1.25rem; } .summary-md li { margin-bottom: 0.25rem; } .transcript { white-space: pre-wrap; word-wrap: break-word; font-size: 0.9rem; line-height: 1.55; margin: 0; } /* Floating mini-player — pinned bottom-LEFT (bottom-right is the Ask chat's corner), follows scroll, dismissable, draggable. */ .video-embed { position: fixed; bottom: 1rem; left: 1rem; width: min(384px, calc(100vw - 2rem)); z-index: 60; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28); overflow: hidden; } .video-embed[hidden] { display: none; } .video-embed-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0.4rem 0.3rem 0.7rem; background: var(--surface); border-bottom: 1px solid var(--border); cursor: move; user-select: none; } /* While dragging, disable the iframe's pointer events so the cross-origin player doesn't swallow mousemove and drop the drag. */ .video-embed.dragging { user-select: none; } .video-embed.dragging iframe { pointer-events: none; } .video-embed.resizing { user-select: none; } .video-embed.resizing iframe { pointer-events: none; } /* Drag-to-resize grip, bottom-right corner (width drives height via 16/9). */ .video-embed-resize { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; z-index: 3; cursor: nwse-resize; background: linear-gradient( 135deg, transparent 45%, var(--border) 45%, var(--border) 55%, transparent 55% ); } .video-embed-title { font-size: 0.8rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .video-embed-close { flex: 0 0 auto; background: transparent; border: none; cursor: pointer; color: var(--muted); font-size: 0.95rem; line-height: 1; padding: 0.3rem 0.45rem; border-radius: 6px; } .video-embed-close:hover { background: var(--border); color: var(--text); } .video-embed #ytPlayer, .video-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block; background: #000; } /* Timestamped transcript segments (Phase 4) */ .transcript-seg { display: flex; gap: 0.6rem; padding: 0.15rem 0; align-items: baseline; } .transcript-ts { flex: 0 0 auto; font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--brand); text-decoration: none; min-width: 3.5rem; padding-top: 0.1rem; } .transcript-ts[href]:hover { text-decoration: underline; } .transcript-seg-text { flex: 1; } .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } .actions button { flex: 1 1 auto; min-width: 140px; } /* Result header: meta line on the left, export actions on the right (they wrap below the meta on narrow screens). Compact, quiet outlined buttons. */ .result-meta-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 0.6rem 1rem; margin-top: 0.35rem; } .actions-top { display: flex; gap: 0.5rem; flex-wrap: wrap; } .actions-top button { min-height: auto; padding: 0.5rem 0.95rem; font-size: 0.85rem; } /* Re-transcribe is a paid action — demote it to a quiet link set apart from the export buttons (margin-left:auto pushes it to the far right). */ .actions-top .retx-link { margin-left: auto; background: none; border: none; box-shadow: none; color: var(--muted); font-size: 0.8rem; padding: 0.4rem 0.3rem; } .actions-top .retx-link:hover { color: var(--brand); text-decoration: underline; transform: none; } /* Download dropdown — a single "Download ▾" trigger opens a menu of formats, instead of a row of look-alike buttons (which read as a tab bar). */ .download-menu { position: relative; } .actions .download-menu { flex: 1 1 auto; min-width: 140px; } .download-menu > button { width: 100%; } .download-menu-list { position: absolute; top: calc(100% + 4px); left: 0; min-width: 200px; display: flex; flex-direction: column; gap: 0.125rem; padding: 0.25rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); z-index: 20; } .download-menu-list[hidden] { display: none; } .download-menu-list button { width: 100%; text-align: left; background: transparent; border: none; padding: 0.5rem 0.75rem; border-radius: 6px; font: inherit; color: var(--text); cursor: pointer; } .download-menu-list button:hover, .download-menu-list button:focus-visible { background: var(--surface); outline: none; } /* --- Error view --- */ .error-card { border-color: var(--error); background: var(--error-bg); } .error-card h2 { margin-top: 0; color: var(--error); font-size: 1.125rem; } /* --- History view --- */ .history-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .history-head h2 { margin: 0; font-size: 1.25rem; letter-spacing: -0.01em; text-align: center; } .link-btn { background: none; border: none; color: var(--brand); cursor: pointer; font-family: inherit; font-size: 0.95rem; padding: 0.375rem 0.5rem; min-height: auto; border-radius: var(--radius-sm); } .link-btn:hover { background: var(--surface); } .link-btn.danger { color: var(--error); } .link-btn.inline { font-size: inherit; padding: 0 0.125rem; text-decoration: underline; } .history-actions { display: flex; align-items: center; gap: 0.125rem; justify-self: end; } .history-search { width: 100%; min-height: var(--tap); margin-bottom: 1rem; padding: 0.625rem 0.875rem; font-size: 1rem; font-family: inherit; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text); } .history-search:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .history-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; } .history-item { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: start; padding: 0.875rem 1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color 0.1s, background-color 0.1s; } .history-item:hover { border-color: var(--brand); background: var(--surface); } .history-item-title { font-weight: 600; line-height: 1.3; margin: 0 0 0.25rem; word-break: break-word; } .history-item-meta { font-size: 0.825rem; color: var(--muted); } .history-item-del { width: 2rem; height: 2rem; padding: 0; align-self: center; font-size: 1.1rem; background: none; border: none; color: var(--muted); cursor: pointer; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; line-height: 1; } .history-item-del:hover { background: var(--error-bg); color: var(--error); } /* --- Footer --- */ .footer { border-top: 1px solid var(--border); padding: 1rem; text-align: center; } /* --- Modal --- */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; } /* `.modal { display: flex }` wins the cascade over the browser's default * `[hidden] { display: none }` (same specificity, our rule comes later), so * `hidden=true` from the close handler does nothing without this line. */ .modal[hidden] { display: none !important; } .modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); cursor: pointer; animation: fadeIn 0.12s ease-out; } .modal-card { position: relative; z-index: 1; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem 1.25rem 1.25rem; max-width: 420px; width: 100%; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3); animation: slideUp 0.18s ease-out; } .modal-card h2 { margin: 0 0 0.25rem; font-size: 1.25rem; letter-spacing: -0.01em; } .modal-lede { margin: 0 0 1rem; font-size: 0.875rem; } .modal-close { position: absolute; top: 0.5rem; right: 0.5rem; background: none; border: none; color: var(--muted); font-size: 1.5rem; line-height: 1; width: 2.75rem !important; height: 2.75rem !important; padding: 0 !important; min-height: 0 !important; cursor: pointer; border-radius: 999px; display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: auto; } .modal-close:hover { background: var(--surface); color: var(--text); } /* Flashcards */ .flashcards-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0 0; } .flashcard { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; cursor: pointer; font: inherit; color: var(--text); } .flashcard:hover { border-color: var(--brand); } .flashcard.revealed { background: var(--card); } .flashcard-q { font-weight: 600; } .flashcard-a { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); color: var(--text); line-height: 1.5; } .flashcards-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; flex-wrap: wrap; } /* Chat with the video */ .chat-messages { display: flex; flex-direction: column; gap: 0.5rem; max-height: 340px; overflow-y: auto; margin: 0.5rem 0; } .chat-msg { padding: 0.5rem 0.75rem; border-radius: 12px; max-width: 90%; white-space: pre-wrap; line-height: 1.5; font-size: 0.95rem; } .chat-msg-user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; } .chat-msg-assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 4px; } .chat-form { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .chat-input { flex: 1; min-height: var(--tap); padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text); font: inherit; } .chat-input:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .chat-input:disabled { opacity: 0.6; } .chat-meta { margin-top: 0.375rem; } /* Full-screen diagram viewer — drag to pan, scroll to zoom */ .diagram-modal { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: var(--bg); } .diagram-modal[hidden] { display: none; } .diagram-modal-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface); } .diagram-modal-title { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .diagram-modal-actions { display: flex; align-items: center; gap: 0.375rem; } .diagram-modal-zoom { min-width: 48px; text-align: center; color: var(--muted); font-size: 0.85rem; } .diagram-modal-stage { position: relative; flex: 1; overflow: hidden; cursor: grab; background: var(--bg); } .diagram-modal-stage.grabbing { cursor: grabbing; } .diagram-modal-inner { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; } .diagram-modal-inner svg { display: block; } .diagram-modal-hint { position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%); margin: 0; pointer-events: none; background: var(--surface); border: 1px solid var(--border); padding: 0.25rem 0.7rem; border-radius: 999px; } .pack-grid-stacked { grid-template-columns: 1fr; } .pack-btn-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0.875rem 1rem; text-align: left; gap: 0.75rem; } .pack-btn-row .pack-lhs { display: flex; flex-direction: column; gap: 0.125rem; align-items: flex-start; } .pack-btn-row .pack-lhs strong { font-size: 1rem; font-weight: 600; } .pack-btn-row .pack-lhs small { font-size: 0.75rem; opacity: 0.85; font-weight: 400; } .pack-btn-row .pack-rhs { font-size: 1.125rem; font-weight: 700; opacity: 1; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* --- Toast --- */ .toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.25rem; background: var(--text); color: var(--bg); padding: 0.625rem 1rem; border-radius: 999px; font-size: 0.875rem; box-shadow: var(--shadow); z-index: 50; opacity: 0; transition: opacity 0.15s; pointer-events: none; } .toast.show { opacity: 1; } /* --- Trust signals: Our Promises + Pricing FAQ --- */ .section-eyebrow { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; color: var(--brand); text-transform: uppercase; margin: 0 0 0.625rem; } .section-headline { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 0.625rem; } @media (min-width: 640px) { .section-headline { font-size: 2rem; } } .section-lede { font-size: 0.95rem; line-height: 1.55; margin: 0 0 1.75rem; max-width: 36rem; } .promises, .faq { margin-top: 4rem; } .faq { margin-bottom: 2rem; } .promise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.75rem; } .promise-card { position: relative; padding: 1.25rem 1.25rem 1.4rem; border-radius: 14px; background: var(--card); border: 1px solid var(--border); transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .promise-card:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); transform: translateY(-1px); box-shadow: var(--shadow); } .promise-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); margin-bottom: 0.9rem; } .promise-icon svg { width: 19px; height: 19px; display: block; } .promise-title { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.4rem; color: var(--text); } .promise-body { font-size: 0.875rem; line-height: 1.55; color: var(--muted); margin: 0; } .promise-body a { color: var(--brand); font-weight: 500; } .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem 2rem; } .faq-item { padding: 0; border-top: 1px solid var(--border); padding-top: 1rem; } .faq-q { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em; color: var(--text); margin: 0 0 0.5rem; } .faq-a { font-size: 0.875rem; line-height: 1.6; color: var(--muted); margin: 0; } /* "Why $0.20?" line inside the Buy Credits modal */ .modal-trust-line { margin: 0.25rem 0 1rem; line-height: 1.5; } /* --- Landing page (hero + features + final CTA) --- */ .hero { padding: 2.5rem 0 2rem; text-align: center; } @media (min-width: 640px) { .hero { padding: 4rem 0 3rem; } } .hero-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; color: var(--brand); text-transform: uppercase; margin: 0 0 1.1rem; } .hero-headline { font-family: var(--font-serif); font-size: 2.25rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 1rem; max-width: 20ch; margin-left: auto; margin-right: auto; text-wrap: balance; } @media (min-width: 640px) { .hero-headline { font-size: 2.75rem; } } @media (min-width: 900px) { .hero-headline { font-size: 3.25rem; } } .hero-highlight { background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--brand) 30%, transparent) 60%); padding: 0 0.15em; border-radius: 4px; } .hero-lede { font-size: 1.05rem; line-height: 1.55; color: var(--muted); margin: 0 auto 1.75rem; max-width: 32rem; } @media (min-width: 640px) { .hero-lede { font-size: 1.125rem; } } .hero-ctas { display: flex; flex-wrap: wrap; gap: 0.625rem; justify-content: center; margin-bottom: 1rem; } .hero-btn { min-width: 200px; padding: 0.85rem 1.5rem; font-size: 1rem; font-weight: 600; } .hero-meta { margin: 0; } /* Coming-soon styling for the Chrome extension button */ [data-coming-soon="true"] { position: relative; opacity: 0.7; cursor: not-allowed; } [data-coming-soon="true"]::after { content: "Coming soon"; position: absolute; top: -8px; right: -8px; background: var(--brand); color: white; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; } /* Features grid (3 columns desktop, 1 column mobile) */ .features { margin-top: 4rem; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.75rem; } .feature-card { padding: 1.5rem 1.4rem 1.6rem; border-radius: 14px; background: var(--card); border: 1px solid var(--border); transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } .feature-card:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); transform: translateY(-1px); box-shadow: var(--shadow); } .feature-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); margin-bottom: 1rem; } .feature-icon svg { width: 22px; height: 22px; display: block; } .feature-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.5rem; } .feature-body { font-size: 0.9rem; line-height: 1.55; color: var(--muted); margin: 0; } /* Final CTA strip at bottom of landing */ .final-cta { margin-top: 4rem; padding: 3rem 1.5rem; border-radius: 16px; background: color-mix(in srgb, var(--brand) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border)); text-align: center; } .final-cta-headline { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 0.5rem; } .final-cta p { margin: 0 0 1.5rem; font-size: 1rem; } /* App view back-to-overview link */ .app-back-row { margin: -0.25rem 0 0.5rem; } .back-link { font-size: 0.875rem; color: var(--muted); } .back-link:hover { color: var(--brand); } /* Hide app-specific topbar items on the landing page (price pill + CTA take their place). Theme toggle stays — useful everywhere. */ body[data-view="landing"] #balancePill, body[data-view="landing"] #newTopBtn, body[data-view="landing"] .topbar-divider, body[data-view="landing"] #accountMenu, body[data-view="landing"] #historyBtn { display: none; } /* ── Ask Whisgram — floating chat popup ─────────────────────────────────── */ .chat-fab { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 60; width: 52px; height: 52px; display: grid; place-items: center; border: none; border-radius: 50%; background: var(--brand); color: #fff; cursor: pointer; box-shadow: var(--shadow-lg); transition: transform 0.15s ease; } .chat-fab:hover { transform: translateY(-2px); } body[data-view="landing"] .chat-fab { display: none; } .chat-popup { position: fixed; right: 1.5rem; bottom: 5.25rem; z-index: 61; width: min(440px, calc(100vw - 3rem)); height: min(640px, calc(100vh - 7rem)); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; } /* Assistant messages are rendered markdown — keep its typography chat-sized, not document-sized (a bare

was rendering at browser-default 1.5em+). */ .chat-msg-assistant > :first-child { margin-top: 0; } .chat-msg-assistant > :last-child { margin-bottom: 0; } .chat-msg-assistant h1, .chat-msg-assistant h2, .chat-msg-assistant h3, .chat-msg-assistant h4, .chat-msg-assistant h5, .chat-msg-assistant h6 { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 700; line-height: 1.3; margin: 0.5rem 0 0.25rem; } .chat-msg-assistant p { margin: 0.4rem 0; } .chat-msg-assistant ul, .chat-msg-assistant ol { margin: 0.4rem 0; padding-left: 1.15rem; } .chat-msg-assistant li { margin: 0.15rem 0; } .chat-msg-assistant pre { overflow-x: auto; font-size: 0.8rem; } .chat-msg-assistant code { font-size: 0.85em; } .chat-popup-head { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); } .chat-popup-title { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; margin-right: auto; } .chat-popup-btn { border: none; background: none; color: var(--text-muted); font: inherit; font-size: 0.8rem; padding: 0.2rem 0.45rem; border-radius: 6px; cursor: pointer; } .chat-popup-btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); } .chat-popup .chat-messages { flex: 1 1 auto; overflow-y: auto; min-height: 0; max-height: none; /* clear the base tab-chat 340px cap so it fills the popup */ padding: 0.9rem; margin: 0; } .chat-popup .chat-form { display: flex; gap: 0.5rem; padding: 0.7rem 0.9rem; border-top: 1px solid var(--border); } .chat-popup .chat-input { flex: 1 1 auto; } .chat-popup .chat-meta { padding: 0 0.9rem 0.7rem; margin: 0; } .chat-sources { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0 0.9rem; } .chat-sources:empty { padding: 0; } .chat-source { max-width: 100%; padding: 0.3rem 0.65rem; font: inherit; font-size: 0.8rem; color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); border-radius: 999px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-source:hover { background: color-mix(in srgb, var(--brand) 15%, transparent); } .chat-sources-label { flex-basis: 100%; margin: 0 0 0.15rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .chat-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 0.2rem; padding: 1rem; text-align: center; color: var(--text-muted); } .chat-empty-icon { font-size: 1.9rem; line-height: 1; } .chat-empty-title { font-weight: 600; color: var(--text); margin: 0.3rem 0 0; } .chat-empty-hint { font-size: 0.85rem; margin: 0; max-width: 26ch; line-height: 1.4; } /* ── Topbar pill / button family (header design system) ────────────────── Shared outlined look; the right cluster reads action → status → utility → account. Data (price, credits) is monospace. */ .topbar-actions { gap: 0.4rem; } .pill { display: inline-flex; align-items: center; gap: 0.4rem; height: 34px; min-height: 0; padding: 0 0.7rem; font-family: var(--font-mono); font-size: 0.76rem; border: 1px solid var(--border); background: var(--card); color: var(--muted); box-shadow: var(--shadow-sm); white-space: nowrap; border-radius: var(--radius); } /* Fully-rounded pills for the marketing/status chips */ .price-pill, .theme-toggle { border-radius: 999px; } /* Landing-only price pill (shown via the landing rule below) */ #pricePill { display: none; } body[data-view="landing"] #pricePill { display: inline-flex; } /* Persistent "+ New" — compact outlined action */ .new-top-btn { min-height: 0; height: 34px; padding: 0 0.75rem; font-size: 0.82rem; gap: 0.3rem; background: var(--card); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-sm); } .new-top-btn:hover { background: var(--surface); border-color: var(--accent-soft); } .new-plus { color: var(--accent); font-weight: 600; font-family: var(--font-mono); } /* Balance pill (a button — clicks open the buy-credits modal) */ .balance-pill { cursor: pointer; color: var(--muted); } .balance-pill .bal-num { color: var(--text); font-weight: 600; } .balance-pill:hover { background: var(--surface); } /* Labeled theme toggle: contrast icon + current mode */ .theme-toggle { cursor: pointer; color: var(--text); } .theme-toggle .theme-icon { display: inline-flex; color: var(--muted); } .theme-toggle:hover { background: var(--surface); border-color: var(--accent-soft); } /* Vertical divider separating status from utility */ .topbar-divider { width: 1px; height: 20px; background: var(--border); margin: 0 0.2rem; flex: 0 0 auto; } /* History (and any topbar utility icon) → outlined square, pill-family height */ .topbar-actions .icon-btn { width: 34px; height: 34px; min-height: 0; border-color: var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); color: var(--muted); } .topbar-actions .icon-btn:hover { background: var(--surface); color: var(--text); } /* Account avatar — violet circle with initials */ .avatar-btn { width: 34px; height: 34px; min-height: 0; padding: 0; border: none; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .avatar-btn:hover { filter: brightness(0.97); } .avatar-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .avatar-btn { position: relative; overflow: hidden; } /* Google profile photo (when available) covers the initials underneath; if it fails to load it's removed and the initials show through. */ .avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* --- Topbar: split landing nav from app actions --- The header stays in place across views; we just swap which children are visible based on body[data-view]. This avoids re-rendering the header and keeps the brand mark in a consistent spot. */ .landing-nav { display: none; align-items: center; gap: 0.25rem; } .landing-nav-link { font-size: 0.875rem; font-weight: 500; color: var(--muted); padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); text-decoration: none; transition: color 0.15s, background 0.15s; } .landing-nav-link:hover { color: var(--text); background: var(--surface); text-decoration: none; } .nav-cta { display: none; padding: 0.45rem 1rem; font-size: 0.875rem; font-weight: 600; min-height: 0; } /* On landing: show nav + CTA, hide app-state items */ body[data-view="landing"] .landing-nav { display: flex; } body[data-view="landing"] .nav-cta { display: inline-flex; } body[data-view="landing"] #balancePill, body[data-view="landing"] #newTopBtn, body[data-view="landing"] #historyBtn { display: none; } /* On every other view (app, working, complete, etc.): keep landing nav hidden and CTA hidden. Default behavior of the rules above. */ /* Topbar adjusts: when landing nav is visible we want it centered between brand and actions. The flex layout already does this — landing-nav takes the middle slot. */ @media (max-width: 540px) { /* On narrow mobile, hide the anchor links to save space; CTA remains */ body[data-view="landing"] .landing-nav { display: none; } /* Collapse the labeled toggle to icon-only and drop the divider so the app cluster (+ New · credits · history · theme · avatar) fits. */ .theme-label { display: none; } .theme-toggle { padding: 0 0.55rem; } .topbar-divider { display: none; } .topbar-actions { gap: 0.3rem; } } /* Anchor scroll alignment: when the user clicks Features / Pricing in the topbar, the section's top would otherwise hide under the sticky header. scroll-margin-top reserves space so the section heading lands just below the topbar. Tuned to topbar height (~60px) + a bit of breathing room. */ #features, #pricing, .promises { scroll-margin-top: 80px; } /* Smooth-scroll all anchor navigation, not just within the landing page. */ html { scroll-behavior: smooth; } /* Clickable brand mark — replaces the old "← Overview" link. Standard SaaS pattern: logo always navigates to home. Button reset strips default button styling so it visually matches the static .brand div it replaces, but gains pointer cursor + subtle hover affordance. */ .brand-button { appearance: none; background: none; border: none; padding: 0.25rem 0.5rem; margin: 0 -0.5rem; /* visual offset so logo stays flush with the edge */ cursor: pointer; font: inherit; color: inherit; border-radius: var(--radius-sm); transition: background 0.15s; } .brand-button:hover { background: var(--surface); } .brand-button:focus-visible { outline: 2px solid var(--brand); outline-offset: -1px; } /* --- Sign-in modal --- Shares the .modal / .modal-card / .modal-backdrop base styles with the Buy Credits modal; these rules style the sign-in-specific bits inside. */ .signin-btn { display: flex; align-items: center; justify-content: center; gap: 0.625rem; width: 100%; min-height: var(--tap); padding: 0.7rem 1rem; font-size: 0.95rem; font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s; } /* Google's brand guideline: white button, gray border, black text. We match the spec closely so the button feels native to Google users. */ .signin-google { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; } .signin-google:hover { background: #f8f9fa; border-color: #d2d4d7; } .signin-google svg { flex-shrink: 0; } /* Dark mode tweak: lift the contrast slightly so the white button doesn't blaze against a dark modal card. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .signin-google { background: #f5f5f7; color: #1f1f1f; border-color: #d0d3d8; } } [data-theme="dark"] .signin-google { background: #f5f5f7; color: #1f1f1f; border-color: #d0d3d8; } .signin-email-form { display: flex; flex-direction: column; gap: 0.5rem; } .signin-email-form input[type="email"] { width: 100%; min-height: var(--tap); padding: 0.625rem 0.875rem; font-size: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text); font-family: inherit; } .signin-email-form input[type="email"]:focus { outline: 2px solid var(--brand); outline-offset: -1px; } /* Status line under the form — used for "magic link sent" confirmation or error reporting. */ .signin-status { margin: 0.5rem 0 0; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--text); } .signin-status-error { background: var(--error-bg); color: var(--error); } .signin-fineprint { margin: 1rem 0 0; text-align: center; font-size: 0.75rem; } .signin-fineprint a { color: var(--brand); } /* The "or" divider between Google + email — overrides the default form divider top/bottom margin so it sits cleanly between actions. */ #signinModal .divider { margin: 0.875rem 0; } /* --- Account menu (avatar + dropdown) --- */ .account-menu { position: relative; display: inline-flex; } .account-dropdown { position: absolute; top: calc(100% + 0.375rem); right: 0; min-width: 200px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.5rem; z-index: 20; } .account-email { margin: 0 0 0.4rem; padding: 0.25rem 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; } .account-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0.5rem; font: inherit; font-size: 0.9rem; color: var(--text); border-radius: var(--radius-sm); cursor: pointer; } .account-item:hover { background: var(--surface); }