/* ─────────────────────────────────────────────────
Retort Labs admin — design system v2
Light = Cloudflare-style. Dark = Resend-style.
Theme switched via [data-theme="light"|"dark"] on .
───────────────────────────────────────────────── */
:root,
[data-theme="light"] {
--bg: #F7F7F8;
--bg-card: #FFFFFF;
--bg-sidebar: #FFFFFF;
--bg-hover: #F0F1F3;
--bg-muted: #ECEDEF;
--text: #18181B;
--text-muted: #5C5C61;
--text-soft: #8C8C92;
--border: rgba(0, 0, 0, 0.08);
--border-strong: rgba(0, 0, 0, 0.16);
--accent: #18181B;
--accent-fg: #FFFFFF;
--info: #2563EB;
--success: #16A34A;
--danger: #B0413E;
--pill-new-bg: #E6F1FB; --pill-new-fg: #0C447C;
--pill-contacted-bg: #EDE7F6; --pill-contacted-fg: #3F2D6E;
--pill-proposal-bg: #FAEDDB; --pill-proposal-fg: #6B4D11;
--pill-won-bg: #E0EFDF; --pill-won-fg: #2F5A2F;
--pill-lost-bg: #F5DBDB; --pill-lost-fg: #6B2A2A;
--pill-neutral-bg: #EBE9E1; --pill-neutral-fg: #4A4A48;
}
[data-theme="dark"] {
--bg: #0A0A0A;
--bg-card: #161616;
--bg-sidebar: #0F0F0F;
--bg-hover: #1C1C1C;
--bg-muted: #1F1F22;
--text: #F4F4F5;
--text-muted: #A1A1AA;
--text-soft: #6B6B74;
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.16);
--accent: #F4F4F5;
--accent-fg: #0A0A0A;
--info: #60A5FA;
--success: #4ADE80;
--danger: #F87171;
--pill-new-bg: rgba(96,165,250,0.15); --pill-new-fg: #93C5FD;
--pill-contacted-bg: rgba(167,139,250,0.15); --pill-contacted-fg: #C4B5FD;
--pill-proposal-bg: rgba(251,191,36,0.15); --pill-proposal-fg: #FCD34D;
--pill-won-bg: rgba(74,222,128,0.15); --pill-won-fg: #86EFAC;
--pill-lost-bg: rgba(248,113,113,0.15); --pill-lost-fg: #FCA5A5;
--pill-neutral-bg: rgba(255,255,255,0.06); --pill-neutral-fg: #D4D4D8;
}
:root {
--radius-sm: 4px;
--radius: 6px;
--radius-lg: 8px;
--shadow-card: 0 1px 0 rgba(0,0,0,0.02);
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Courier New", monospace;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
/* ─── Layout shell ─── */
.app {
display: grid;
grid-template-columns: 240px 1fr;
min-height: 100vh;
}
.sidebar {
background: var(--bg-sidebar);
border-right: 1px solid var(--border);
padding: 20px 16px;
display: flex;
flex-direction: column;
}
.sidebar .brand {
font-weight: 600;
font-size: 16px;
letter-spacing: -0.02em;
margin: 4px 8px 8px;
}
/* Theme pill — two-segment switch under the brand */
.theme-pill {
display: flex;
align-items: stretch;
width: calc(100% - 16px);
margin: 0 8px 18px;
padding: 3px;
background: var(--bg-muted);
border-radius: 999px;
}
.theme-pill .seg {
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 5px 8px;
border: none;
background: transparent;
border-radius: 999px;
color: var(--text-muted);
font: inherit;
font-size: 12px;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.theme-pill .seg:hover { color: var(--text); }
.theme-pill .seg svg { width: 12px !important; height: 12px !important; flex-shrink: 0; }
[data-theme="light"] .theme-pill .seg[data-set-theme="light"],
[data-theme="dark"] .theme-pill .seg[data-set-theme="dark"] {
background: var(--bg-card);
color: var(--text);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .theme-pill .seg[data-set-theme="dark"] {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.sidebar .nav-section {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-soft);
margin: 12px 8px 8px;
}
.sidebar .nav-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 10px;
border-radius: var(--radius);
color: var(--text);
font-size: 14px;
text-decoration: none;
}
.sidebar .nav-link:hover {
background: var(--bg-hover);
text-decoration: none;
}
.sidebar .nav-link.active {
background: var(--bg-muted);
font-weight: 500;
}
.sidebar .nav-link .count {
color: var(--text-soft);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.sidebar .spacer { flex: 1; }
.sidebar .user-pill {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 13px;
}
.sidebar .user-pill .avatar {
width: 24px; height: 24px;
border-radius: 50%;
background: var(--bg-muted);
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 500;
}
.sidebar .user-pill .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .user-pill form { margin: 0; }
.sidebar .user-pill button {
background: none; border: none; color: var(--text-soft);
font-size: 14px; padding: 4px;
}
.sidebar .user-pill button:hover { color: var(--text); }
/* ─── Page content ─── */
.main {
padding: 24px 32px;
max-width: 1400px;
width: 100%;
}
.page-head {
display: flex; align-items: flex-end; justify-content: space-between;
margin-bottom: 24px;
border-bottom: 1px solid var(--border);
padding-bottom: 16px;
}
.crumbs {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 12px;
}
.crumbs a:hover { color: var(--text); }
.crumbs .sep { margin: 0 6px; color: var(--text-soft); }
.page-title {
font-size: 26px;
font-weight: 600;
letter-spacing: -0.02em;
margin: 0;
}
.page-subtitle {
font-size: 14px;
color: var(--text-muted);
margin: 4px 0 0;
}
/* ─── Buttons ─── */
.btn {
display: inline-flex; align-items: center; gap: 6px;
background: var(--accent);
color: var(--accent-fg);
border: 1px solid var(--accent);
border-radius: var(--radius);
padding: 8px 14px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
}
.btn:hover { opacity: 0.92; text-decoration: none; }
.btn.secondary {
background: var(--bg-card);
color: var(--text);
border-color: var(--border-strong);
}
.btn.secondary:hover { background: var(--bg-hover); }
.btn.danger {
background: var(--bg-card);
color: var(--danger);
border-color: var(--border-strong);
}
/* ─── Forms ─── */
.form-row { margin-bottom: 16px; }
.form-row label {
display: block; font-size: 12px; font-weight: 500;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 6px;
}
.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=tel],
.form-row input[type=password],
.form-row input[type=url],
.form-row input[type=number],
.form-row input[type=date],
.form-row select,
.form-row textarea {
width: 100%;
padding: 9px 11px;
font-size: 14px;
font-family: inherit;
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
color: var(--text);
}
.form-row textarea { min-height: 100px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
outline: 2px solid var(--text);
outline-offset: -1px;
border-color: var(--text);
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* ─── Cards ─── */
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px;
box-shadow: var(--shadow-card);
}
.card h3 { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
/* ─── Pills ─── */
.pill {
display: inline-flex; align-items: center;
padding: 2px 9px;
font-size: 11px; font-weight: 500;
letter-spacing: 0.02em;
border-radius: 999px;
background: var(--pill-neutral-bg);
color: var(--pill-neutral-fg);
text-transform: capitalize;
}
.pill.new { background: var(--pill-new-bg); color: var(--pill-new-fg); }
.pill.contacted { background: var(--pill-contacted-bg); color: var(--pill-contacted-fg); }
.pill.proposal { background: var(--pill-proposal-bg); color: var(--pill-proposal-fg); }
.pill.won { background: var(--pill-won-bg); color: var(--pill-won-fg); }
.pill.lost { background: var(--pill-lost-bg); color: var(--pill-lost-fg); }
/* ─── Pipeline (kanban) ─── */
.pipeline {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
.pipeline-col {
background: transparent;
border-radius: var(--radius-lg);
}
.pipeline-col-head {
display: flex; justify-content: space-between; align-items: center;
padding: 4px 6px 10px;
border-bottom: 1px dashed var(--border);
margin-bottom: 10px;
}
.pipeline-col-head .label {
font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--text-muted);
}
.pipeline-col-head .count {
font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums;
}
.pipeline-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 14px;
margin-bottom: 10px;
font-size: 13px;
display: block;
color: inherit;
text-decoration: none;
}
.pipeline-card:hover {
border-color: var(--border-strong);
text-decoration: none;
}
.pipeline-card .name { font-weight: 500; margin-bottom: 4px; }
.pipeline-card .email { color: var(--text-muted); font-size: 12px; margin-bottom: 8px; }
.pipeline-card .meta { display: flex; justify-content: space-between; align-items: center; }
.pipeline-card .age { font-size: 11px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.pipeline-col-body {
min-height: 60px;
padding: 2px;
border-radius: var(--radius);
transition: background-color 100ms ease, outline-color 100ms ease;
outline: 2px dashed transparent;
outline-offset: -2px;
}
.pipeline-empty {
padding: 14px 10px;
font-size: 12px;
color: var(--text-soft);
text-align: center;
}
.pipeline-card { cursor: grab; }
.pipeline-card.dragging {
opacity: 0.4;
cursor: grabbing;
}
.pipeline-col.drop-target .pipeline-col-body {
background: var(--bg-hover);
outline-color: var(--text-soft);
}
/* ─── Tables ─── */
.table {
width: 100%;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
border-collapse: separate; border-spacing: 0;
overflow: hidden;
}
.table th, .table td {
padding: 12px 14px;
text-align: left;
font-size: 13px;
border-bottom: 1px solid var(--border);
}
.table th {
background: var(--bg-card);
font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--text-muted);
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--bg-hover); }
/* ─── Signing pages (public) ─── */
.signing-shell {
max-width: 800px;
margin: 0 auto;
padding: 28px 24px 60px;
}
.signing-brand {
font-weight: 600; font-size: 16px; letter-spacing: -0.02em;
margin-bottom: 24px;
}
.consent-card {
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
padding: 18px 20px;
margin-bottom: 20px;
font-size: 14px;
line-height: 1.6;
}
.consent-card h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.signing-doc {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 32px 36px;
margin-bottom: 24px;
font-size: 14px; line-height: 1.7; color: var(--text);
}
.signing-doc h2 { font-size: 18px; margin: 0 0 8px; font-weight: 600; }
.signing-doc h3 { font-size: 15px; margin: 22px 0 6px; font-weight: 600; }
.signing-doc p { margin: 8px 0; }
.signing-doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.signing-doc th, .signing-doc td { border-bottom: 1px solid var(--border); padding: 8px 6px; text-align: left; }
.signing-doc th { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.signing-doc .doc-meta {
display: flex; flex-wrap: wrap; gap: 16px;
font-size: 12px; color: var(--text-muted);
border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 18px;
}
.signing-section { margin-top: 26px; }
.sign-panel {
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
padding: 22px 24px;
}
.sign-panel h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.sign-panel .checks label {
display: flex; align-items: flex-start; gap: 10px;
font-size: 13px; line-height: 1.55;
padding: 8px 0;
cursor: pointer;
}
.sign-panel .checks input[type=checkbox] { margin-top: 3px; flex-shrink: 0; }
.sign-meta-line {
font-size: 12px; color: var(--text-muted);
margin-top: 12px; line-height: 1.6;
}
.signature-pad {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
height: 150px;
overflow: hidden;
}
.signature-pad canvas {
display: block;
width: 100%;
height: 150px;
cursor: crosshair;
touch-action: none;
}
.signature-pad-baseline {
position: absolute; left: 24px; right: 24px; bottom: 36px;
border-top: 1px dashed var(--border-strong);
pointer-events: none;
}
.signature-pad-actions {
position: absolute; right: 8px; bottom: 8px;
}
/* Typed-name "signature" — cursive script font on the signing page only.
* Caveat is loaded via in views/sign/review.ejs. Falls back gracefully
* to system cursive fonts if Caveat hasn't loaded yet.
*/
input.signature-typed {
font-family: "Caveat", "Brush Script MT", "Snell Roundhand", cursive;
font-size: 28px;
line-height: 1.2;
padding: 8px 12px;
letter-spacing: 0.5px;
}
/* ─── Trix editor (proposal scope summary) ───
* Theme overrides on top of trix.css. Trix renders its own
* with default formatting buttons (bold, italic, strike, link, heading,
* quote, code, bullet, numbered, undo, redo, attach). We style its chrome
* to match our theme and hide the attach button (file uploads not wired
* up yet — clicking would do nothing useful).
*/
trix-editor {
display: block;
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: 0 0 var(--radius) var(--radius);
border-top: none;
padding: 12px 16px;
min-height: 180px;
font-size: 14px;
line-height: 1.7;
color: var(--text);
font-family: var(--font-sans);
}
trix-editor:focus { outline: 2px solid var(--text); outline-offset: -1px; }
trix-editor h1 { font-size: 18px; font-weight: 600; margin: 14px 0 6px; }
trix-editor ul, trix-editor ol { padding-left: 22px; margin: 6px 0; }
trix-editor li { margin: 2px 0; }
trix-editor blockquote {
margin: 8px 0; padding: 6px 12px;
border-left: 3px solid var(--border-strong);
color: var(--text-muted);
}
trix-editor pre {
background: var(--bg-muted);
padding: 10px 12px;
border-radius: var(--radius);
font-family: var(--font-mono);
font-size: 13px;
white-space: pre-wrap;
}
/* Trix's own toolbar */
trix-toolbar {
background: var(--bg-muted);
border: 1px solid var(--border-strong);
border-radius: var(--radius) var(--radius) 0 0;
padding: 4px 6px;
}
trix-toolbar .trix-button-group {
border: none;
margin: 0 6px 0 0;
}
trix-toolbar .trix-button {
border: none;
background: transparent;
color: var(--text);
}
trix-toolbar .trix-button:not(:first-child) { border-left: none; }
trix-toolbar .trix-button:hover { background: var(--bg-hover); }
trix-toolbar .trix-button.trix-active { background: var(--border-strong); color: var(--text); }
[data-theme="dark"] trix-toolbar .trix-button:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] trix-toolbar .trix-button.trix-active { background: rgba(255,255,255,0.14); }
/* Hide attach-file button (no file upload wired up yet) and dialogs we don't use */
trix-toolbar .trix-button--icon-attach { display: none; }
trix-toolbar .trix-dialog--link { background: var(--bg-card); border-color: var(--border-strong); }
/* ─── Rendered scope HTML (browser preview, signing page) ─── */
.scope-content { font-size: 14px; line-height: 1.7; color: var(--text); }
.scope-content > div, .scope-content p { margin: 0 0 10px; }
.scope-content > div:last-child, .scope-content p:last-child { margin-bottom: 0; }
.scope-content h1 { font-size: 18px; font-weight: 600; margin: 18px 0 6px; }
.scope-content h2 { font-size: 17px; font-weight: 600; margin: 18px 0 6px; }
.scope-content h3 { font-size: 15px; font-weight: 600; margin: 14px 0 4px; }
.scope-content h4 { font-size: 14px; font-weight: 600; margin: 12px 0 4px; }
.scope-content ul, .scope-content ol { margin: 8px 0; padding-left: 22px; }
.scope-content li { margin: 4px 0; }
.scope-content blockquote {
margin: 10px 0; padding: 8px 14px;
border-left: 3px solid var(--border-strong);
color: var(--text-muted);
background: var(--bg-muted);
border-radius: 0 var(--radius) var(--radius) 0;
}
.scope-content pre {
background: var(--bg-muted);
padding: 10px 12px;
border-radius: var(--radius);
font-family: var(--font-mono);
font-size: 13px;
white-space: pre-wrap;
margin: 8px 0;
}
.scope-content a { color: var(--info); text-decoration: underline; }
.scope-content strong, .scope-content b { font-weight: 600; }
.scope-content em, .scope-content i { font-style: italic; }
.scope-content del, .scope-content s { text-decoration: line-through; }
/* ─── Login ─── */
.auth-shell {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
}
.auth-card {
width: 100%; max-width: 380px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px 28px 24px;
}
.auth-card .brand {
font-weight: 600; font-size: 16px;
letter-spacing: -0.02em; margin-bottom: 22px;
}
.auth-card h1 {
font-size: 20px; font-weight: 600; margin: 0 0 4px;
}
.auth-card p.help {
color: var(--text-muted); font-size: 13px; margin: 0 0 22px;
}
.auth-card .btn { width: 100%; justify-content: center; padding: 10px; }
/* ─── Flash ─── */
.flash {
padding: 10px 14px;
margin-bottom: 16px;
border-radius: var(--radius);
font-size: 13px;
background: var(--pill-won-bg); color: var(--pill-won-fg);
}
.flash.error { background: var(--pill-lost-bg); color: var(--pill-lost-fg); }
.flash.info { background: var(--pill-new-bg); color: var(--pill-new-fg); }
/* ─── Misc ─── */
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); font-size: 12px; }
.right-actions { display: flex; gap: 8px; align-items: center; }
.actions-bar {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 16px;
}