/* quoteiq.css — the look of every manager screen, built against the Claude Design exports in design_html\ (01_frame, 03_leads, 05_sent; 2026-08-23). The tokens are the design system's own (Brand Standards 4.2/4.3/4.7 plus Brand Guidelines §5); the component measurements are copied from the component source inside the export (Sidebar, TopBar, DataTable, StatusPill, InlineMessage, Button, PriceBlock …). Plain CSS, no build step. Class names are short and the comment above each block names the design component it stands in for. The rules that never bend, whatever the screen: - a status is never a bare coloured dot: .pill always carries a word - money is right-aligned and set in Space Grotesk (.figure / td.num) - the price block (.price-block) takes no brand colour — Brand Guidelines §0 rule 2 - Coral is never body text on white The colour assignment (owner's decision 2026-08-25, QUOTEIQ_UI_RESEARCH §3): brand blue at rest lives ONLY on the primary button, the sidebar chrome, and selected things (row, tab, sort, base box, switch, preview tab) — plus the focus ring, and blue as hover/focus feedback. Headings, links, figures and secondary buttons are ink or grey. The hex values themselves never change. */ /* ---------- tokens (Brand Standards 4.2 — do not add a colour) ---------- */ :root { --cg-blue: #2F3192; --cg-coral: #F9674B; --cg-charcoal: #1A1A2E; --cg-slate: #4A4A68; --cg-cool-gray: #8B8BA3; --cg-light-gray: #E8E8F0; --cg-off-white: #F8F8FC; --cg-white: #FFFFFF; --cg-success: #22C55E; --cg-warning: #F59E0B; --cg-error: #EF4444; --cg-info: #3B82F6; /* derived shades, blue and coral mixed against charcoal or white — no new hues */ --cg-blue-press: #24266F; --cg-blue-hover: #282A7E; --cg-blue-tint: #EDEDF7; --cg-coral-press: #DA4E33; --cg-coral-hover: #E85940; --cg-coral-tint: #FEEDE9; --cg-success-tint: #E7F8EE; --cg-warning-tint: #FEF3E2; --cg-error-tint: #FDECEC; --cg-info-tint: #EAF2FE; /* the text colours the design system uses ON the tints (they pass 4.5:1 on white too) */ --fg-success: #158244; --fg-warning: #96620A; --fg-error: #B32626; --fg-info: #1D5FCB; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-data: 'Space Grotesk', var(--font-sans); --size-h1: 36px; --size-h2: 28px; --size-h3: 22px; --size-body-lg: 18px; --size-body: 16px; --size-body-sm: 15px; --size-caption: 14px; --size-label: 13px; --leading-heading: 1.2; --leading-body: 1.55; --tracking-button: 0.02em; --tracking-label: 0.04em; --tracking-data: -0.01em; --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --sidebar-width: 232px; --topbar-height: 56px; --control-height: 38px; --control-height-sm: 30px; /* tool sizes, not marketing sizes (research §9 item 14) — 24px was the website value */ --page-gutter: 16px; --card-padding: 16px; /* row density — three steps the person picks; quoteiq.js stores the choice on */ --row-h: 36px; --row-pad: 12px; --row-text: 14px; --row-head: 32px; --radius-control: 6px; --radius-button: 8px; --radius-card: 10px; --radius-pill: 999px; --border-hairline: 1px solid var(--cg-light-gray); --border-input: var(--cg-cool-gray); --focus-ring: 0 0 0 2px var(--cg-white), 0 0 0 4px var(--cg-blue); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-overlay: 0 12px 32px rgba(26, 26, 46, 0.18); --ease: cubic-bezier(0.2, 0, 0.2, 1); --duration-fast: 90ms; --duration: 140ms; /* a heading is structure, not an action (research §3.3) — ink, never brand */ --text-heading: var(--cg-charcoal); --text-body: var(--cg-charcoal); --text-secondary: var(--cg-slate); --text-tertiary: var(--cg-cool-gray); --text-link: var(--cg-charcoal); /* links are ink with an underline; blue arrives on hover/focus as feedback */ --surface-page: var(--cg-off-white); --surface-card: var(--cg-white); --surface-sunken: var(--cg-off-white); --surface-row-hover: var(--cg-off-white); --surface-row-selected: var(--cg-blue-tint); --surface-disabled: var(--cg-light-gray); } html[data-density="comfortable"] { --row-h: 44px; --row-pad: 14px; --row-text: 15px; --row-head: 34px; } html[data-density="tight"] { --row-h: 30px; --row-pad: 10px; --row-text: 13px; --row-head: 28px; } /* ---------- element defaults ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--size-body); line-height: var(--leading-body); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { color: var(--text-heading); line-height: var(--leading-heading); margin: 0; font-weight: 600; } h1 { font-size: var(--size-h3); } h2 { font-size: var(--size-body-lg); margin: var(--space-7) 0 var(--space-4); } h3 { font-size: var(--size-body); font-weight: 500; margin: var(--space-6) 0 var(--space-3); } p { margin: 0 0 var(--space-5); max-width: 78ch; } a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--cg-blue); } small, .muted { font-size: var(--size-caption); color: var(--text-secondary); } code, .figure, .num, td.num { font-family: var(--font-data); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-data); } td.num, th.num { text-align: right; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-control); } pre { white-space: pre-wrap; font-family: var(--font-data); font-size: var(--size-caption); } hr { border: 0; border-top: var(--border-hairline); margin: var(--space-6) 0; } /* ---------- the frame: sidebar + top bar + banner + content (01_frame) ---------- */ .qi { display: flex; min-height: 100vh; background: var(--surface-page); } .qi-side { width: var(--sidebar-width); flex: 0 0 auto; display: flex; flex-direction: column; background: var(--cg-blue); color: var(--cg-white); position: sticky; top: 0; height: 100vh; } .qi-brand { padding: 18px var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: 6px; } .qi-brand .logo { max-width: 150px; max-height: 40px; display: block; } .qi-brand .company { font-size: var(--size-caption); font-weight: 600; letter-spacing: 0.01em; color: rgba(255,255,255,0.86); } .qi-brand .product { font-size: var(--size-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--cg-coral); font-weight: 600; } .qi-nav { list-style: none; margin: 0; padding: 0 var(--space-4); display: flex; flex-direction: column; gap: 2px; flex: 1; } .qi-nav a { display: flex; align-items: center; gap: var(--space-4); padding: 9px 12px; border-radius: var(--radius-control); color: rgba(255,255,255,0.78); text-decoration: none; font-size: var(--size-body-sm); transition: background var(--duration-fast) var(--ease); } .qi-nav a:hover { background: rgba(255,255,255,0.07); color: var(--cg-white); } .qi-nav a.on { background: rgba(255,255,255,0.14); color: var(--cg-white); font-weight: 600; } .qi-nav a .ph { font-size: 18px; } .qi-nav a span { flex: 1; } .qi-nav a .count { flex: 0 0 auto; font-family: var(--font-data); font-size: var(--size-label); font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.7); } .qi-nav a.on .count { color: var(--cg-white); } .qi-side-foot { padding: var(--space-5) var(--space-6); border-top: 1px solid rgba(255,255,255,0.14); font-size: var(--size-caption); color: rgba(255,255,255,0.72); display: flex; flex-direction: column; gap: 10px; } .qi-side-foot .btn { align-self: flex-start; } .qi-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .qi-top { height: var(--topbar-height); flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-5); padding: 0 var(--page-gutter); background: var(--surface-card); border-bottom: var(--border-hairline); } .qi-top .ph-storefront { font-size: 17px; color: var(--cg-slate); } .qi-top .store { font-size: var(--size-body-sm); font-weight: 600; color: var(--text-body); } .qi-top form.store { display: inline-flex; align-items: center; gap: var(--space-3); } .qi-top form.store .label { font-size: var(--size-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); font-weight: 400; } .qi-top form.store select { height: var(--control-height-sm); padding: 0 8px; border: var(--border-hairline); border-radius: var(--radius-control); background: var(--surface-card); font: inherit; font-weight: 600; color: var(--text-body); cursor: pointer; } .qi-top .spacer { flex: 1; } .qi-top .who { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--size-caption); color: var(--text-secondary); white-space: nowrap; } .qi-top .who b { color: var(--text-body); font-weight: 600; } .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--cg-light-gray); color: var(--cg-slate); display: inline-flex; align-items: center; justify-content: center; font-size: var(--size-label); font-weight: 600; flex: 0 0 auto; } .qi-menu, .qi-top-brand, .qi-scrim { display: none; } .qi-content { flex: 1; min-width: 0; display: flex; flex-direction: column; } .qi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); padding: var(--space-6) var(--page-gutter) var(--space-5); } .qi-head .meta { margin-top: 4px; font-size: var(--size-caption); color: var(--text-secondary); } .qi-head .actions { display: flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; } .qi-body { padding: 0 var(--page-gutter) var(--space-8); } .qi-body > p:last-child a { text-decoration: none; } .qi-body .msg, .qi-body .warn, .qi-body .bad, .qi-body .good { margin-bottom: var(--space-5); } /* the feed banner: full width, square, directly under the bar, the loudest thing on the page. A healthy feed renders nothing at all. */ .qi-banner { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-4); padding: 14px var(--page-gutter); } .qi-banner.stale { background: var(--cg-warning-tint); border-bottom: 1px solid var(--cg-warning); box-shadow: inset 0 3px 0 var(--cg-warning); } .qi-banner.never { background: var(--cg-error-tint); border-bottom: 1px solid var(--cg-error); box-shadow: inset 0 3px 0 var(--cg-error); } .qi-banner .ph-fill { font-size: 22px; } .qi-banner.stale .ph-fill { color: var(--cg-warning); } .qi-banner.never .ph-fill { color: var(--cg-error); } .qi-banner .words { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-4); } .qi-banner .title { font-size: var(--size-body); font-weight: 600; } .qi-banner.stale .title { color: var(--fg-warning); } .qi-banner.never .title { color: var(--fg-error); } .qi-banner .body { font-size: var(--size-caption); color: var(--text-body); } /* the read-only note: the words always travel with the greyed state */ .viewonly { display: inline-flex; align-items: center; gap: var(--space-3); padding: 5px 10px; border-radius: var(--radius-pill); background: var(--cg-light-gray); color: var(--cg-slate); font-size: var(--size-caption); font-weight: 600; white-space: nowrap; } .viewonly .ph { font-size: 15px; } /* ---------- Button ---------- */ .btn, button, input[type=submit] { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); height: var(--control-height); padding: 0 24px; border-radius: var(--radius-button); font-family: var(--font-sans); font-size: var(--size-body-sm); font-weight: 600; letter-spacing: var(--tracking-button); cursor: pointer; border: 2px solid transparent; background: var(--cg-blue); color: var(--cg-white); white-space: nowrap; text-decoration: none; transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); } .btn:hover, button:hover { background: var(--cg-blue-hover); color: var(--cg-white); } .btn:active, button:active { background: var(--cg-blue-press); } .btn.sm, button.sm, form.inline button, td button, .qi-top button, .qi-side-foot button { height: var(--control-height-sm); padding: 0 14px; font-size: var(--size-caption); } .btn.secondary, button.secondary { background: transparent; color: var(--text-body); border-color: var(--cg-cool-gray); } .btn.secondary:hover, button.secondary:hover { background: var(--surface-row-hover); color: var(--text-body); border-color: var(--cg-slate); } .btn.ghost, button.ghost { background: transparent; color: var(--text-body); } .btn.ghost:hover, button.ghost:hover { background: var(--surface-row-hover); color: var(--text-body); } .btn.accent, button.accent { background: var(--cg-coral); } .btn.accent:hover, button.accent:hover { background: var(--cg-coral-hover); } .btn.danger, button.danger { background: var(--cg-error); } .btn[aria-disabled=true], button:disabled { background: var(--surface-disabled); color: var(--text-tertiary); cursor: not-allowed; border-color: transparent; } .btn .ph, button .ph { font-size: 17px; } .btn.sm .ph, button.sm .ph { font-size: 15px; } form.inline { display: inline; } /* IconButton — size follows the row density inside a table */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: var(--radius-control); border: 1px solid transparent; background: transparent; color: var(--cg-slate); text-decoration: none; } .icon-btn:hover { background: var(--cg-blue-tint); color: var(--cg-slate); } .icon-btn .ph { font-size: 16px; } html[data-density="comfortable"] td .icon-btn { width: 34px; height: 34px; } html[data-density="comfortable"] td .icon-btn .ph { font-size: 18px; } html[data-density="tight"] td .icon-btn { width: 24px; height: 24px; } html[data-density="tight"] td .icon-btn .ph { font-size: 14px; } /* ---------- forms: Input, Select, Textarea, Field ---------- */ input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea { font-family: var(--font-sans); font-size: var(--size-body-sm); color: var(--text-body); background: var(--surface-card); border: 1px solid var(--border-input); border-radius: var(--radius-control); height: var(--control-height); padding: 0 10px; } textarea { height: auto; padding: 10px 12px; line-height: var(--leading-body); width: 100%; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border: 2px solid var(--cg-blue); box-shadow: none; } input[type=number], input.num { font-family: var(--font-data); text-align: right; font-variant-numeric: tabular-nums; } select { padding-right: 28px; cursor: pointer; } input:disabled, select:disabled, textarea:disabled, input[readonly] { background: var(--surface-disabled); color: var(--text-secondary); } label { font-size: var(--size-caption); color: var(--text-secondary); } .search { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-height); padding: 0 10px; background: var(--surface-card); border: 1px solid var(--border-input); border-radius: var(--radius-control); } .search:focus-within { border: 2px solid var(--cg-blue); } .search .ph { font-size: 16px; color: var(--cg-cool-gray); } .search input { border: 0; height: auto; padding: 0; flex: 1; min-width: 0; background: transparent; } .search input:focus { border: 0; } /* the filter bar over a table: selects that submit on change, a sort note, the density control */ .filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-5) 0 var(--space-4); } .filters .spacer { flex: 1; } .filters .note { font-size: var(--size-label); color: var(--text-tertiary); white-space: nowrap; } .filters select { width: 168px; } .filters select.narrow { width: 140px; } .chips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: 0 0 var(--space-5); } .chips .label { font-size: var(--size-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600; color: var(--text-secondary); margin-right: 4px; } /* DensityControl: three buttons, the chosen one blue-tinted */ .density { display: inline-flex; height: var(--control-height); padding: 2px; gap: 2px; background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-control); flex: 0 0 auto; } .density button { height: auto; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: var(--text-secondary); font-size: var(--size-caption); font-weight: 400; gap: var(--space-2); } .density button:hover { background: var(--cg-blue-tint); color: var(--cg-blue); } .density button[aria-pressed=true] { background: var(--surface-row-selected); color: var(--cg-blue); font-weight: 600; } .density button .ph { font-size: 15px; } /* ---------- Tabs ---------- */ .tabs { display: flex; gap: var(--space-6); border-bottom: var(--border-hairline); padding: 0 var(--page-gutter); } .tabs a { padding: 10px 0 9px; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: var(--size-body-sm); color: var(--text-secondary); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-3); } .tabs a.on { border-bottom-color: var(--cg-blue); color: var(--cg-blue); font-weight: 600; } .tabs a .count { font-family: var(--font-data); font-size: var(--size-label); color: var(--text-tertiary); } /* ---------- Card ---------- */ .card { background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--card-padding); } .card.flush { padding: 0; overflow: hidden; } .card > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: 12px var(--card-padding); border-bottom: var(--border-hairline); margin: calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding)) var(--space-5); } .card > header h3 { margin: 0; font-size: var(--size-body-lg); font-weight: 600; color: var(--text-heading); } /* ---------- DataTable ---------- */ .tbl-wrap { width: 100%; overflow-x: auto; } table { border-collapse: collapse; width: 100%; font-size: var(--row-text); } th { text-align: left; padding: 0 var(--row-pad); height: var(--row-head); background: var(--surface-sunken); border-bottom: var(--border-hairline); color: var(--text-secondary); font-size: var(--size-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap; position: sticky; top: 0; z-index: 1; } th .ph { font-size: 11px; color: var(--cg-cool-gray); vertical-align: middle; } td { padding: 0 var(--row-pad); height: var(--row-h); border-bottom: var(--border-hairline); color: var(--text-body); vertical-align: middle; white-space: nowrap; background: var(--surface-card); } td.wrap { white-space: normal; } tr[data-href] { cursor: pointer; } tbody tr:hover td, tr[data-href]:hover td { background: var(--surface-row-hover); } tr.selected td { background: var(--surface-row-selected); } tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--cg-blue); } td .sub, .two .sub { display: block; font-size: 13px; color: var(--text-tertiary); line-height: 1.15; } .two { display: flex; flex-direction: column; line-height: 1.15; } html[data-density="tight"] .two { display: inline; } html[data-density="tight"] .two .sub { display: inline; } html[data-density="tight"] .two .sub::before { content: " · "; } td.empty { padding: var(--space-8); text-align: center; color: var(--text-tertiary); white-space: normal; } /* the older screens draw their own small tables inside the body; keep them readable without the card */ .qi-body > table, .qi-body form table { width: auto; margin: var(--space-4) 0; } .qi-body > table td, .qi-body form table td { white-space: normal; } /* ---------- StatusPill: a word beside its colour, never a bare dot; hold carries the reason ---------- */ .pill { display: inline-flex; align-items: baseline; gap: var(--space-3); min-width: 0; max-width: 100%; } .pill .word { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 2px 9px; border-radius: var(--radius-pill); font-size: var(--size-label); font-weight: 600; } .pill .word::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 1; } .pill .why { font-size: var(--size-caption); color: var(--text-secondary); white-space: normal; line-height: 1.25; } .pill.sent .word { background: var(--cg-success-tint); color: var(--fg-success); } .pill.sent .word::before { background: var(--cg-success); } .pill.hold .word { background: var(--cg-warning-tint); color: var(--fg-warning); } .pill.hold .word::before { background: var(--cg-warning); } .pill.blocked .word { background: var(--cg-error-tint); color: var(--fg-error); } .pill.blocked .word::before { background: var(--cg-error); } .pill.note .word { background: var(--cg-info-tint); color: var(--fg-info); } .pill.note .word::before { background: var(--cg-info); } .pill.readonly .word, .pill.draft .word { background: var(--cg-light-gray); color: var(--cg-slate); } .pill.readonly .word::before, .pill.draft .word::before { background: var(--cg-cool-gray); } html[data-density="tight"] .pill .why { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Tag: how a message left */ .tag { display: inline-flex; align-items: center; gap: var(--space-2); padding: 3px 10px; border-radius: var(--radius-control); border: var(--border-hairline); background: var(--surface-card); color: var(--text-secondary); font-size: var(--size-caption); white-space: nowrap; } .tag .ph { font-size: 13px; color: var(--cg-slate); } /* ---------- InlineMessage (and the older .warn/.bad/.good boxes, same look) ---------- */ .msg, .warn, .bad, .good { display: flex; gap: var(--space-4); align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-control); font-size: var(--size-caption); line-height: var(--leading-body); color: var(--text-body); } .msg .ph-fill { font-size: 18px; margin-top: 1px; flex: 0 0 auto; } .msg .text { flex: 1; min-width: 0; } .msg .title { display: block; font-size: var(--size-body-sm); font-weight: 600; margin-bottom: 2px; } .msg .action { flex: 0 0 auto; } .msg.info { background: var(--cg-info-tint); border: 1px solid var(--cg-info); } .msg.info .title, .msg.info .ph-fill { color: var(--fg-info); } .msg.info .ph-fill { color: var(--cg-info); } .msg.warning, .warn { background: var(--cg-warning-tint); border: 1px solid var(--cg-warning); } .msg.warning .title { color: var(--fg-warning); } .msg.warning .ph-fill { color: var(--cg-warning); } .msg.error, .bad { background: var(--cg-error-tint); border: 1px solid var(--cg-error); } .msg.error .title { color: var(--fg-error); } .msg.error .ph-fill { color: var(--cg-error); } .msg.success, .good { background: var(--cg-success-tint); border: 1px solid var(--cg-success); } .msg.success .title { color: var(--fg-success); } .msg.success .ph-fill { color: var(--cg-success); } .block { background: var(--surface-sunken); border: var(--border-hairline); padding: var(--space-5); font-family: var(--font-data); font-size: var(--size-caption); white-space: pre-wrap; line-height: 1.6; } .lock { color: var(--text-secondary); font-size: var(--size-label); } /* EmptyState */ .empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-9) var(--space-7); text-align: center; } .empty-state .ph { font-size: 28px; color: var(--cg-cool-gray); } .empty-state .title { font-size: var(--size-body-sm); font-weight: 600; color: var(--text-body); } .empty-state .words { font-size: var(--size-caption); color: var(--text-secondary); max-width: 46ch; } /* ---------- the sealed-record panel (05 slide-over / 06 page) ---------- */ .scrim { position: fixed; inset: 0; background: rgba(26,26,46,.45); z-index: 40; display: block; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100vw; background: var(--surface-card); box-shadow: var(--shadow-overlay); z-index: 41; display: flex; flex-direction: column; } .drawer .record { flex: 1; overflow: auto; } .record-head { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: var(--border-hairline); } .record-head .ref { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600; color: var(--text-heading); } .record-head .kept { font-size: var(--size-caption); color: var(--text-secondary); } .record-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .record-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); } .facts { display: grid; grid-template-columns: 132px 1fr; gap: 10px var(--space-5); font-size: 14px; line-height: 1.45; } .facts .k { color: var(--text-secondary); } .facts .v { min-width: 0; overflow-wrap: anywhere; } .section-label { font-size: var(--size-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600; color: var(--text-secondary); } .section { display: flex; flex-direction: column; gap: var(--space-3); } .copy-box { border: var(--border-hairline); background: var(--surface-sunken); padding: var(--space-5); font-size: 14px; line-height: 1.6; white-space: pre-wrap; font-family: var(--font-sans); } .events { display: flex; flex-direction: column; } .events .ev { display: flex; gap: 16px; padding: 8px 0; font-size: 14px; align-items: baseline; border-top: var(--border-hairline); } .events .ev:first-child { border-top: 0; } .events .at { font-family: var(--font-data); font-variant-numeric: tabular-nums; color: var(--text-secondary); width: 72px; flex: 0 0 auto; } .events .vendor { font-family: var(--font-data); font-size: 13px; color: var(--text-secondary); line-height: 1.45; display: block; margin-top: 4px; } .html-as-sent { border: var(--border-hairline); padding: 10px; background: #fff; overflow: auto; } /* ⛔ PriceBlock — the legal price block. No brand colour, no accent, no icon, no radius, no shadow. Charcoal on white, hairline rules, the doc-fee-inclusive figure at least as heavy as the total. */ .price-block { border: 1px solid #E8E8F0; background: #FFFFFF; padding: 20px; max-width: 520px; font-family: 'Inter', sans-serif; color: #1A1A2E; } .price-block .row { display: flex; justify-content: space-between; gap: 24px; padding: 6px 0; font-size: 15px; } .price-block .row .n { font-family: 'Space Grotesk', monospace; font-variant-numeric: tabular-nums; text-align: right; } .price-block .row.total { border-top: 1px solid #E8E8F0; margin-top: 8px; padding-top: 10px; font-weight: 600; font-size: 17px; } .price-block .row.incl { font-weight: 700; font-size: 17px; } .price-block .foot { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: #4A4A68; } /* ---------- pages with no frame: log in, forgot, reset, errors (design_html/02_login.html) ---------- The lockup sits above one 420px card on the page colour. Inside the card everything is spaced by one 18px gap; forms space their own rows at 16px. The heading is small (17px) — the lockup is the only big thing on the page. */ .bare { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 24px 96px; } .bare .auth { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; } .bare .brand { display: flex; flex-direction: column; gap: 6px; align-items: center; padding-bottom: 6px; } .bare .brand .product { font-size: 27px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; color: var(--cg-blue); } .bare .brand .company { font-size: var(--size-label); color: var(--cg-slate); } .bare .brand .company b { font-weight: 600; } .bare .card { padding: 28px; display: flex; flex-direction: column; gap: 18px; } .bare .card > *, .bare form > * { margin: 0; } .bare h1 { font-size: 17px; font-weight: 600; color: var(--cg-charcoal); } .bare .sub { font-size: var(--size-caption); color: var(--cg-slate); line-height: 1.55; margin-top: -12px; } .bare .msg, .bare .warn, .bare .bad, .bare .good { margin-bottom: 0; } .bare form { display: flex; flex-direction: column; gap: 16px; } .bare .field { display: flex; flex-direction: column; gap: 6px; } .bare .field > .lblrow, .bare .field > label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--size-label); font-weight: 600; color: var(--text-secondary); letter-spacing: 0.01em; } .bare .pw-toggle { height: auto; padding: 0; border: 0; background: none; color: var(--cg-blue); font-size: var(--size-label); font-weight: 600; cursor: pointer; } .bare .pw-toggle:hover { background: none; color: var(--cg-blue); text-decoration: underline; } .bare input[type=text], .bare input[type=email], .bare input[type=password] { width: 100%; } .bare .pw-help { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--size-label); color: var(--cg-slate); } .bare .pw-help .count { font-family: var(--font-data); font-variant-numeric: tabular-nums; color: var(--cg-cool-gray); white-space: nowrap; } .bare .field-err { font-size: var(--size-caption); color: var(--fg-error); line-height: 1.5; } .bare form button[type=submit], .bare form > p > button { width: 100%; } .bare .lock-line { font-size: var(--size-label); color: var(--cg-slate); text-align: center; } .bare .lock-line .clock { font-family: var(--font-data); font-variant-numeric: tabular-nums; color: var(--cg-charcoal); } .bare .links { display: flex; gap: 18px; justify-content: center; font-size: var(--size-caption); } .bare .links a { font-weight: 500; } /* ---------- phone width (≤ 800px): the rail becomes a drawer over a 45% charcoal scrim ---------- */ @media (max-width: 800px) { .qi-side { position: fixed; left: 0; top: 0; bottom: 0; width: 258px; transform: translateX(-100%); transition: transform var(--duration) var(--ease); z-index: 51; box-shadow: none; } html.nav-open .qi-side { transform: none; box-shadow: var(--shadow-overlay); } html.nav-open .qi-scrim { display: block; position: fixed; inset: 0; background: rgba(26,26,46,.45); z-index: 50; } .qi-nav a { min-height: 44px; } .qi-menu { display: inline-flex; width: 38px; height: 38px; padding: 0; border: 0; background: transparent; color: var(--cg-slate); border-radius: var(--radius-control); } .qi-menu:hover { background: var(--surface-row-hover); color: var(--cg-slate); } .qi-menu .ph { font-size: 22px; } .qi-top { padding: 0 12px; gap: var(--space-4); } .qi-top .ph-storefront, .qi-top > .store, .qi-top > form.store, .qi-top .who .name, .qi-top .who .role, .qi-top .viewonly, .qi-top > form.logout { display: none; } .msg { flex-wrap: wrap; } .msg .action { width: 100%; } .qi-top-brand { display: flex; flex: 1; min-width: 0; flex-direction: column; } .qi-top-brand .product { font-size: var(--size-caption); font-weight: 600; color: var(--cg-blue); } .qi-top-brand .store { font-size: var(--size-label); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qi-banner { align-items: flex-start; padding: 12px 16px; } .qi-banner .words { flex-direction: column; align-items: flex-start; } .qi-banner .btn { display: none; } .qi-head, .qi-body { padding-left: 16px; padding-right: 16px; } .tabs { padding: 0 16px; gap: var(--space-5); } .drawer { width: 100vw; } .facts { grid-template-columns: 100px 1fr; } } /* ---------- small additions the built screens need ---------- */ .late { color: var(--fg-error); } /* a waiting time past the store's reminder line — #B32626, 6.52:1 on white */ .phone-only { display: none; } .qi-side-foot button.reversed { border-color: rgba(255,255,255,0.5); color: var(--cg-white); background: transparent; } .qi-side-foot button.reversed:hover { background: rgba(255,255,255,0.1); } .record-page { max-width: 760px; } .record-body .actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .ellipsis { display: inline-block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .ellipsis a { text-decoration: none; color: var(--text-body); } .ellipsis a:hover { text-decoration: underline; } td .figure { font-size: inherit; } .qi-body form .filters, .qi-body .filters { padding-top: 0; } @media (max-width: 800px) { .qi-side-foot .phone-only { display: block; } } /* column widths the two designed tables need so the words that matter stay readable (design: Status 208, Source 108, Delivery 320) */ td.status { min-width: 210px; } td.source, td.customer .sub, td.to .sub, td.to { max-width: 160px; overflow: hidden; text-overflow: ellipsis; } td.to { max-width: 220px; } td.car { min-width: 190px; } td.delivery { min-width: 250px; } td.delivery .sub.figure { display: block; max-width: 296px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- held leads: a cause card is a
whose summary is the card face (07_held) ---------- */ .cause-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; } .cause-section > p { margin: -4px 0 2px; max-width: 78ch; font-size: 14px; } .cause-head { display: flex; align-items: baseline; gap: 10px; } .cause-head h2 { margin: 0; font-size: 16px; color: var(--text-body); } details.cause { background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; } details.cause > summary { list-style: none; display: flex; flex-wrap: wrap; gap: 16px 20px; padding: 16px 20px; cursor: pointer; align-items: flex-start; } details.cause > summary::-webkit-details-marker { display: none; } details.cause > summary:hover { background: var(--surface-row-hover); } .cause-count { flex: 0 0 76px; display: flex; flex-direction: column; } .cause-count .figure { font-size: 28px; font-weight: 600; line-height: 1; color: var(--text-body); } .cause-body { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 7px; } .cause-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .cause-line .sentence { font-size: 16px; font-weight: 600; line-height: 1.35; } .code { flex-shrink: 0; font-family: var(--font-data); font-size: 12px; letter-spacing: 0.02em; color: var(--text-tertiary); background: var(--cg-off-white); border: var(--border-hairline); border-radius: 4px; padding: 1px 6px; white-space: nowrap; } .newcode { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--cg-coral-press); background: var(--cg-coral-tint); border-radius: 999px; padding: 2px 8px; } .fixedby { display: flex; align-items: baseline; gap: 7px; font-size: 14px; color: var(--text-secondary); } .fixedby .ph { font-size: 15px; position: relative; top: 2px; flex-shrink: 0; } .timing { font-size: 13px; } .cause-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; } details.cause .toggle .hide, details.cause[open] .toggle .show { display: none; } details.cause[open] .toggle .hide { display: inline; } details.cause[open] .toggle .ph { transform: rotate(180deg); } .cause-leads { border-top: var(--border-hairline); } .noalert { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-error); font-weight: 600; } .noalert .ph-fill { font-size: 15px; color: var(--cg-error); } .density a.seg { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 4px; color: var(--text-secondary); text-decoration: none; font-size: var(--size-caption); font-weight: 600; } .density a.seg.on { background: var(--surface-row-selected); color: var(--cg-blue); } .density a.seg .ph { font-size: 15px; } /* ---------- car flags: the load card and the two severity cards (09_cars_flags) ---------- */ .load-top { display: flex; align-items: flex-start; gap: 24px; padding: 16px 24px; border-bottom: var(--border-hairline); flex-wrap: wrap; } .load-what { min-width: 280px; flex: 1; display: flex; flex-direction: column; gap: 7px; } .load-label { display: flex; align-items: center; gap: 10px; } .load-what .file { font-size: var(--size-body-sm); overflow-wrap: anywhere; } .load-counts { display: flex; gap: 32px; padding-top: 2px; } .load-counts > div { display: flex; flex-direction: column; gap: 3px; min-width: 96px; } .figure.big { font-size: 22px; font-weight: 600; color: var(--text-heading); } .load-reject { padding: 14px 24px; display: flex; gap: 10px; align-items: flex-start; background: var(--surface-sunken); font-size: var(--size-caption); line-height: var(--leading-body); } .load-reject .section-label { flex-shrink: 0; padding-top: 2px; } .sev-head { display: flex; align-items: center; gap: 12px; padding: 13px 24px; border-bottom: var(--border-hairline); flex-wrap: wrap; } .sev-head h2 { margin: 0; font-size: var(--size-body-lg); } .sev-head .spacer { flex: 1; min-width: 20px; } th a.sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } th a.sort.on { color: var(--cg-blue); } .btn.disabled { pointer-events: none; background: transparent; color: var(--text-tertiary); border-color: var(--cg-light-gray); } /* ---------- the pricing grid (08_pricing_grid) ---------- */ .strip { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; } .strip > div { padding: 14px 16px; border-left: var(--border-hairline); font-size: 13px; line-height: 1.4; } .strip > div:first-child { border-left: 0; } .strip .step { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: var(--size-body-sm); } .strip .step .figure { font-size: 13px; font-weight: 600; color: var(--text-body); } .strip .noquote { background: var(--cg-error-tint); color: var(--fg-error); } .strip .noquote .figure, .strip .noquote b { color: var(--fg-error); } .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--size-label); font-weight: 600; white-space: nowrap; } .badge.neutral { background: var(--cg-light-gray); color: var(--cg-slate); } .badge.brand { background: var(--cg-blue-tint); color: var(--cg-blue); } .badge.info { background: var(--cg-info-tint); color: var(--fg-info); } .badge.warning { background: var(--cg-warning-tint); color: var(--fg-warning); } .outside { color: var(--fg-warning); } .picked { display: inline-block; background: var(--cg-blue-tint); color: var(--cg-blue); padding: 2px 8px; border-radius: 6px; font-size: 13px; font-weight: 600; } .typed { display: inline-block; border: 1px dashed var(--border-input); color: var(--text-secondary); padding: 2px 8px; border-radius: 6px; font-size: 13px; font-weight: 600; } .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; } .grid2.wide { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); align-items: start; gap: 24px; } .field { display: flex; flex-direction: column; gap: 6px; } .field > label { font-size: var(--size-label); font-weight: 600; color: var(--text-secondary); letter-spacing: 0.01em; } .field .hint { font-size: var(--size-caption); color: var(--text-tertiary); } .field .error { font-size: var(--size-caption); color: var(--fg-error); } .field .ro { font-size: var(--size-caption); color: var(--text-tertiary); } .field input[type=text], .field select, .field textarea { width: 100%; } .radios { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; } .radios label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--size-body-sm); color: var(--text-body); } .sends { margin-top: 20px; padding: 16px; background: var(--surface-sunken); border: var(--border-hairline); border-radius: 8px; font-size: var(--size-body-sm); line-height: 1.5; } .sends .section-label { display: block; margin-bottom: 6px; } .hist { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: var(--border-hairline); font-size: var(--size-caption); } .hist > div:first-child { flex: 1; min-width: 0; } .savebar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 16px; padding: 16px var(--page-gutter); margin: 0 calc(-1 * var(--page-gutter)); background: var(--surface-card); border-top: var(--border-hairline); } .savebar .spacer { flex: 1; } button.danger-text { color: var(--fg-error); } button.danger-text:hover { background: var(--cg-error-tint); color: var(--fg-error); } /* ---------- the quote tool (04_quote_tool) ---------- */ .tool { display: flex; flex-direction: column; gap: 20px; max-width: 1180px; } .tool .card > header { margin-bottom: var(--space-5); } .k { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; color: var(--text-tertiary); margin-bottom: 4px; } .lead-grid { display: grid; grid-template-columns: minmax(220px, 260px) minmax(240px, 1fr) minmax(240px, 300px); gap: 24px; align-items: start; } blockquote.wrote { margin: 0; border-left: 1px solid var(--border-subtle); padding: 0 0 0 14px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; } .tab-body { padding: 16px 24px 24px; } .tabs a { white-space: nowrap; } .thumb { width: 44px; height: 28px; object-fit: cover; border: var(--border-hairline); display: block; } .thumb.none { display: grid; place-items: center; font-size: 9px; color: var(--text-tertiary); } .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; } .dashed { border: 1px dashed var(--border-input); border-radius: 10px; padding: 24px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); } .confirm { border: var(--border-hairline); border-radius: 10px; background: var(--surface-card); padding: 20px; } .confirm .src { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; color: var(--text-secondary); } .confirm .src .ph { font-size: 16px; color: var(--cg-slate); } .grid2.tight { gap: 12px 20px; margin-bottom: 16px; font-size: 14px; } .grid2.tight .k { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 400; margin-bottom: 0; } .grid2.boxes { gap: 12px; } .box { border: 1px solid var(--border-input); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } .box .figure.big { font-size: 18px; color: var(--text-body); } .basebox { display: flex; justify-content: space-between; align-items: baseline; border: var(--border-hairline); border-radius: 6px; padding: 10px 12px; margin-bottom: 6px; font-size: 14px; color: var(--text-secondary); } .basebox.on { border-color: var(--cg-blue); background: var(--cg-blue-tint); color: var(--text-body); font-weight: 600; } .basebox .figure { font-size: 15px; } .offer-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 30px; gap: 8px; align-items: center; padding: 6px 0; font-size: 14px; } .offer-row .figure { text-align: right; } .offer-row.net { border-top: var(--border-hairline); font-weight: 600; } .offer-row.add { grid-template-columns: minmax(0, 1fr) 150px auto; } .reminder { display: flex; align-items: center; gap: 14px; border: var(--border-hairline); border-radius: 6px; background: var(--surface-card); padding: 10px 14px; font-size: 14px; } .reminder button { margin-left: auto; } .strip-photos { margin-top: 12px; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .strip-photos a { flex: 0 0 auto; width: 104px; text-decoration: none; color: var(--text-secondary); font-size: 12px; } .strip-photos img { width: 104px; height: 64px; object-fit: cover; border: var(--border-hairline); display: block; } .strip-photos img.main { outline: 2px solid var(--cg-blue); } .strip-photos span { display: block; margin-top: 4px; line-height: 1.2; } .mainmark { font-size: 11px; font-weight: 600; color: var(--cg-blue); border: 1px solid var(--cg-blue); border-radius: 999px; padding: 0 6px; } details > summary.btn { list-style: none; display: inline-flex; } details > summary.btn::-webkit-details-marker { display: none; } .html-as-sent { max-width: 640px; } /* ---------- installed items (10), users (11), settings (12) ---------- */ .car-strip { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 16px; background: var(--surface-sunken); border: var(--border-hairline); border-radius: var(--radius-control); } .car-strip .spacer { flex: 1; } .item-head, .item-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 92px 38px; gap: 12px; align-items: center; } .item-head { padding: 0 2px 6px; font-size: var(--size-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600; color: var(--text-secondary); } .item-row { margin-bottom: 8px; } .item-row input.invalid, .item-row .search:has(input.invalid) { border-color: var(--cg-error); } .items-list { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; } .items-list > div { display: flex; align-items: baseline; gap: 8px; } .locked-line { display: flex; align-items: center; gap: 12px; align-self: end; padding: 9px 12px; border: var(--border-hairline); border-radius: var(--radius-control); background: var(--surface-page); font-size: var(--size-body-sm); } .locked-line .ph { font-size: 16px; color: var(--cg-slate); } .swatch { width: 200px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-control); } .swatch.light { background: var(--cg-white); border: var(--border-hairline); } .swatch.dark { background: var(--cg-charcoal); } .swatch img { max-width: 180px; max-height: 48px; } .week { display: grid; grid-template-columns: repeat(7, minmax(104px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 2px; } .day { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: var(--border-hairline); border-radius: var(--radius-control); background: var(--surface-card); } input.switch { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 999px; background: var(--cg-cool-gray); position: relative; cursor: pointer; padding: 0; margin: 0; border: 0; flex: 0 0 auto; transition: background var(--duration) var(--ease); } input.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--cg-white); box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: left var(--duration) var(--ease); } input.switch:checked { background: var(--cg-blue); } input.switch:checked::after { left: 18px; } input.switch:disabled { background: var(--surface-disabled); cursor: not-allowed; } input[type=file] { font-size: 13px; } /* ---------- templates list (14) and the block editor (15) ---------- */ .tthumb { width: 44px; height: 32px; background: #fff; border: var(--border-hairline); border-radius: 3px; padding: 4px; display: flex; flex-direction: column; gap: 2.5px; } .tthumb i { display: block; width: 100%; height: 2px; background: var(--cg-light-gray); border-radius: 1px; } .tthumb i:first-child { background: var(--cg-cool-gray); } .tthumb b { margin-top: auto; width: 55%; height: 5px; background: var(--cg-slate); opacity: .35; display: block; } .tthumb.retired { opacity: .5; } form.starter { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: var(--border-hairline); border-radius: var(--radius-control); background: var(--surface-page); } form.starter input { width: 100%; } .editor { display: flex; gap: 16px; align-items: flex-start; } .editor .blocks { width: 300px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; } .editor form.card { flex: 1; min-width: 380px; } .editor .pv { width: 420px; flex: 0 0 auto; display: flex; flex-direction: column; } .block { cursor: pointer; padding: 12px 14px; border-radius: 10px; background: var(--surface-card); border: 1px solid var(--cg-light-gray); box-shadow: var(--shadow-card); transition: background var(--duration-fast) var(--ease); } .block:hover { background: var(--surface-row-hover); } .block.on { border-color: var(--cg-blue); box-shadow: inset 3px 0 0 var(--cg-blue); } .block.refused { border: 2px solid var(--cg-error); } .block.refused.on { box-shadow: inset 3px 0 0 var(--cg-error); } .block.price { background: #F1F1F6; border-color: #D6D6E2; } .block-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 600; } .block-sum { font-size: 13px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .block-err { margin: 6px 0 2px; display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; background: var(--cg-error-tint); border: 1px solid #F6BDBD; border-radius: 6px; font-size: 13px; line-height: 1.45; } .block-err .ph-bold { font-size: 15px; color: var(--cg-error); margin-top: 1px; } .lockpill { font-size: 12px; font-weight: 400; color: var(--cg-slate); display: inline-flex; align-items: center; gap: 5px; background: #fff; border: var(--border-hairline); border-radius: 999px; padding: 2px 8px 2px 6px; } .lockpill .ph-fill { font-size: 13px; } .price-mini { border: 1px solid #D6D6E2; background: #fff; padding: 10px 12px; opacity: .72; margin-top: 8px; } .price-mini > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #4A4A68; padding: 2px 0; } .price-mini > div.tot { color: #1A1A2E; font-weight: 700; padding-top: 6px; margin-top: 4px; border-top: 1px solid #E8E8F0; } .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .panel-head h2 { margin: 0; font-size: 17px; } .chip-editor { min-height: 150px; padding: 12px 14px; border-radius: 6px; font-size: 15px; line-height: 1.6; background: var(--surface-card); border: var(--border-hairline); white-space: pre-wrap; outline: none; } .chip-editor:focus { border: 2px solid var(--cg-blue); } .chip-editor.refused { border-color: var(--cg-error); } .chip-editor[contenteditable="false"], .chip-editor:not([contenteditable]) { background: var(--surface-sunken); color: var(--text-secondary); } .chip { display: inline-block; padding: 1px 8px; margin: 0 1px; border-radius: 999px; font-size: 13px; line-height: 1.5; white-space: nowrap; background: var(--cg-blue-tint); color: var(--cg-blue); border: 1px solid #D6D6EE; cursor: default; } .chip.photo { background: var(--cg-coral-tint); color: var(--cg-charcoal); border-color: var(--cg-coral); } .tags { display: flex; flex-wrap: wrap; gap: 6px; } .tagbtn { height: auto; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 400; letter-spacing: 0; border: 1px solid #D6D6EE; background: var(--cg-blue-tint); color: var(--cg-blue); } .tagbtn:hover { background: var(--cg-blue-tint); color: var(--cg-blue-press); } .tagbtn.photo { border-color: var(--cg-coral); background: var(--cg-coral-tint); color: var(--cg-charcoal); } .tagbtn:disabled { border: 1px dashed var(--cg-light-gray); background: var(--surface-page); color: var(--text-tertiary); } .switch-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: var(--border-hairline); } .switch-row > div { max-width: 46ch; } .pvtab { height: auto; padding: 6px 10px; border-radius: 6px; font-size: 13px; font-weight: 400; letter-spacing: 0; border: 1px solid var(--cg-light-gray); background: var(--surface-card); color: var(--text-secondary); } .pvtab:hover { background: var(--surface-row-hover); color: var(--text-body); } .pvtab.on { border-color: var(--cg-blue); background: var(--cg-blue); color: #fff; } .pvtab:disabled { border: 1px dashed var(--cg-light-gray); background: var(--surface-page); color: var(--text-tertiary); } .pv-well { background: var(--cg-light-gray); border: var(--border-hairline); border-radius: 10px; padding: 16px; display: flex; justify-content: center; max-height: 70vh; overflow: auto; } .pv-frame { width: 600px; max-width: 100%; background: #fff; border: var(--border-hairline); align-self: flex-start; } .pv-frame.phone { width: 360px; } .pv-html { padding: 12px; } .pv-text { margin: 0; padding: 22px; font-family: var(--font-data); font-size: 13px; line-height: 1.65; color: var(--cg-charcoal); white-space: pre-wrap; } details.versions { position: relative; } details.versions > summary { list-style: none; } details.versions > summary::-webkit-details-marker { display: none; } details.versions .menu { position: absolute; top: 40px; right: 0; width: 340px; background: #fff; border: var(--border-hairline); border-radius: 10px; box-shadow: var(--shadow-overlay); z-index: 40; overflow: hidden; } details.versions .menu-head { padding: 12px 16px; border-bottom: var(--border-hairline); display: flex; justify-content: space-between; align-items: center; } details.versions .ver { padding: 11px 16px; border-bottom: var(--border-hairline); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; } details.versions .menu-foot { padding: 10px 16px; font-size: 12px; background: var(--surface-page); } td.tpl { max-width: 320px; } td.tpl .two .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Under ~1200px the editor's three fixed columns cannot fit side by side: stack them — blocks, then the fields, then the preview — instead of making the whole page scroll sideways (caught by the 390px screenshot). */ @media (max-width: 1200px) { .editor { flex-direction: column; } .editor .blocks, .editor .pv { width: 100%; } .editor form.card { min-width: 0; width: 100%; } } /* ================================================================ the quote screen (design_html/"QuoteIQ Quote Screen (standalone).html", built 2026-08-25). Three regions side by side, each scrolling on its own: find the car, the money, the email. The export came back in Neuron's names and neutrals; everything here is mapped onto the existing QuoteIQ tokens — no second naming scheme, no new hex. */ .qt-default-submit { position: absolute; left: -9999px; width: 1px; height: 1px; padding: 0; border: 0; background: none; } .qt-viewonly { margin-bottom: 10px; } .qtool-grid { display: grid; grid-template-columns: 300px 410px minmax(0, 1fr); background: var(--surface-card); border: var(--border-hairline); height: calc(100vh - var(--topbar-height) - 108px); min-height: 520px; } .qt-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: var(--border-hairline); } .qt-col:last-child { border-right: 0; } .qt-email { background: var(--surface-page); } .qt-col-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px 8px; } .qt-col-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 14px 14px; } .qt-eyebrow { font-family: var(--font-data); font-size: 10.5px; letter-spacing: .14em; color: var(--text-tertiary); } .qt-seg { display: flex; width: 100%; border: 1px solid var(--border-input); border-radius: 6px; overflow: hidden; } .qt-seg a { flex: 1; text-align: center; padding: 5px 0; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); text-decoration: none; border-right: var(--border-hairline); white-space: nowrap; } .qt-seg a:last-child { border-right: 0; } .qt-seg a:hover { background: var(--surface-row-hover); color: var(--text-body); } .qt-seg a.on { background: var(--cg-charcoal); color: var(--cg-white); } .qt-search { width: 100%; margin-bottom: 6px; } .qt-count { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); padding-bottom: 6px; } .qt-rows { border-top: var(--border-hairline); margin: 0 -14px; } .qt-rows .dashed { margin: 10px 14px; } .qt-row { display: flex; gap: 9px; align-items: center; padding: 7px 14px; border-bottom: var(--border-hairline); text-decoration: none; color: var(--text-body); } .qt-row:hover { background: var(--surface-row-hover); color: var(--text-body); } .qt-row.on { background: var(--surface-row-selected); box-shadow: inset 3px 0 0 var(--cg-blue); } .qt-thumb { width: 48px; height: 34px; flex: 0 0 48px; object-fit: cover; border: var(--border-hairline); border-radius: 3px; } .qt-thumb.none { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-sunken); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); } .qt-row-words { min-width: 0; display: flex; flex-direction: column; } .qt-row-words b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qt-row-words .sub { font-size: 10.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qt-row-words .badge { align-self: flex-start; margin-top: 2px; } .qt-stack { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; } .qt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .qt-note { font-size: 12.5px; margin: 6px 0 0; line-height: 1.5; } .qt-cust { flex: 0 0 auto; border-top: var(--border-hairline); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; max-height: 42%; overflow-y: auto; } .qt-cust .field { margin: 0; } .qt-cust-head { display: flex; align-items: baseline; gap: 8px; } .qt-cust-head .muted { font-size: 11px; } .qt-cust-name { font-size: 15px; font-weight: 600; } .qt-wrote { font-size: 13px; max-height: 130px; overflow-y: auto; } .qt-held .msg { margin: 6px 0 0; } .qt-history summary { cursor: pointer; font-size: 12.5px; color: var(--text-secondary); } .qt-carhead { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0 10px; border-bottom: var(--border-hairline); margin-bottom: 10px; } .qt-carphoto { width: 78px; height: 54px; flex: 0 0 78px; object-fit: cover; border: var(--border-hairline); border-radius: 3px; } .qt-carphoto.none { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-sunken); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); } .qt-carwords { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .qt-carwords b { font-size: 15px; line-height: 1.2; } .qt-carwords .sub { font-size: 11px; color: var(--text-secondary); } .qt-photopick summary { cursor: pointer; font-size: 12px; color: var(--text-secondary); text-decoration: underline; } .qt-points { display: flex; flex-direction: column; margin-bottom: 8px; } .qt-points a.basebox { text-decoration: none; color: var(--text-secondary); cursor: pointer; } .qt-edit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .qt-edit-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); } .qt-adjust { width: 130px; } .qt-ladder { border-top: 1px solid var(--cg-light-gray); margin-top: 10px; } .lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto 26px; column-gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--cg-light-gray); font-size: 13px; } .lrow .ll { text-align: right; color: var(--text-secondary); } .lrow .lnote { display: block; font-size: 11px; color: var(--text-tertiary); } .lrow .lv { text-align: right; min-width: 104px; font-size: 13px; color: var(--text-body); } .lrow.big { padding: 10px 0; } .lrow.big .ll { font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-body); } .lrow.big .lv { font-weight: 700; font-size: 21px; } .lrow.net { font-weight: 600; } .lrow .lx { width: 26px; } .qt-addlines { margin-top: 10px; } .qt-addlines summary, .qt-items-d summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); } .qt-addrow { display: flex; gap: 6px; align-items: center; margin-top: 8px; } .qt-addrow input[type=text] { flex: 1; min-width: 0; } .qt-amount { width: 130px; flex: 0 0 130px; } .qt-notebox { width: 100%; margin-top: 6px; } .qt-saveline { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 12.5px; } .qt-items, .qt-items-d { margin-top: 10px; } .qt-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 40px 20px; margin-top: 20px; border: 1px dashed var(--border-input); border-radius: 10px; color: var(--text-secondary); font-size: 14px; } .qt-empty .ph { font-size: 28px; color: var(--text-tertiary); } .qt-sealed { font-family: var(--font-data); font-size: 12.5px; max-height: 60vh; overflow-y: auto; } .qt-zoom { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; } .qt-zoom .figure { font-size: 11px; color: var(--text-secondary); min-width: 36px; text-align: center; } .qt-zoom button { height: 24px; padding: 0 8px; } .qt-wording { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; } .qt-wording-pick { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); } .qt-wording-pick select { flex: 1; min-width: 0; } .qt-pv { overflow: auto; } .qt-pv-frame { transform-origin: top left; width: 660px; background: var(--cg-white); } .qt-plain summary { cursor: pointer; font-size: 12.5px; color: var(--text-secondary); margin-top: 8px; } .qt-actions { flex: 0 0 auto; border-top: var(--border-hairline); background: var(--surface-card); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; } .qt-actions-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Under ~1150px the three columns stack; the page scrolls normally. */ @media (max-width: 1150px) { .qtool-grid { grid-template-columns: 1fr; height: auto; } .qt-col { border-right: 0; border-bottom: var(--border-hairline); } .qt-col-body { overflow: visible; } .qt-cust { max-height: none; } } /* ================================================================ the leads split view (design_html/"QuoteIQ Leads.html", built 2026-08-25): the dense table on the left, the selected lead in full on the right, one screen. Same token mapping rule as the quote screen — Neuron's neutrals became the QuoteIQ tokens, nothing new. */ .leads-split { display: grid; grid-template-columns: minmax(0, 62fr) minmax(360px, 38fr); background: var(--surface-card); border-top: var(--border-hairline); min-height: 0; height: calc(100vh - var(--topbar-height) - 150px); } .ls-list { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: var(--border-hairline); } .ls-list .filters { flex: 0 0 auto; padding: 8px var(--page-gutter); border-bottom: var(--border-hairline); margin: 0; } .ls-list .tbl-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .ls-list .empty-state { margin: 24px; } .leads-tbl td.asked { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text-secondary); } .ls-detail { min-width: 0; min-height: 0; overflow-y: auto; padding: 14px 18px 18px; background: var(--surface-page); display: flex; flex-direction: column; gap: 12px; } .ld-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .ld-head h2 { margin: 2px 0 2px; font-size: 22px; line-height: 1.1; } .ld-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } .ld-meta { background: var(--surface-card); border: var(--border-hairline); border-radius: 8px; padding: 10px 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .ld-fact .k { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 2px; } .ld-fact { font-size: 13px; min-width: 0; overflow-wrap: break-word; } .ld-card { background: var(--surface-card); border: var(--border-hairline); border-radius: 8px; padding: 12px 14px; } .ld-card .qt-eyebrow { margin-bottom: 8px; } .ld-card .msg { margin: 0; } .ld-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-top: 2px; } @media (max-width: 1100px) { .leads-split { grid-template-columns: 1fr; height: auto; } .ls-list { border-right: 0; border-bottom: var(--border-hairline); } .ls-list .tbl-wrap { max-height: 50vh; } .ld-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* fixed column widths so all six leads columns stay visible without sideways scroll */ .leads-tbl table { table-layout: fixed; width: 100%; } .leads-tbl th:nth-child(1), .leads-tbl td:nth-child(1) { width: 118px; } .leads-tbl th:nth-child(3), .leads-tbl td:nth-child(3) { width: 158px; } .leads-tbl th:nth-child(4), .leads-tbl td:nth-child(4) { width: 74px; } .leads-tbl th:nth-child(5), .leads-tbl td:nth-child(5) { width: 84px; } .leads-tbl th:nth-child(6), .leads-tbl td:nth-child(6) { width: 168px; } .leads-tbl td.customer b { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .leads-tbl td.car .two, .leads-tbl td.car .two .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .leads-tbl td.source { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } .leads-tbl td.status .pill .why { overflow: hidden; text-overflow: ellipsis; }