/* FollowerCRM — the workspace app. A quiet, professional working surface: white cards on a soft neutral ground, one accent, real typography, drawn icons. Nothing decorative that the task does not need. Four themes ship as a user preference — light and warm, dark and midnight — via [data-theme] on . Components name roles, never a theme. Plain CSS on Propshaft: no build step, no framework. */ /* ---------- Themes ---------- */ :root, [data-theme="light"] { color-scheme: light; --bg: #f7f8fa; --surface: #ffffff; --surface-2: #f4f5f7; --surface-3: #eceef1; --border: #e6e8ec; --border-strong: #d3d7de; --text: #101828; --muted: #525b68; --subtle: #656e7a; --accent: #6d28d9; --accent-hover: #5b21b6; --accent-text: #5b21b6; --accent-soft: #f3eefc; --accent-line: #ddd0f7; --on-accent: #ffffff; --focus: #6d28d9; --field-border: #868f9c; --ring: rgba(109, 40, 217, .22); --success: #027a48; --success-soft: #e7f6ef; --warning: #b54708; --warning-soft: #fdf1e3; --danger: #b42318; --danger-soft: #fdeceb; --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05); --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04); --shadow-md: 0 8px 20px -6px rgba(16, 24, 40, .12), 0 2px 6px -2px rgba(16, 24, 40, .06); --tag-slate: #eef0f3; --tag-slate-ink: #3f4854; --tag-rose: #fdeaf1; --tag-rose-ink: #a11a4d; --tag-amber: #fdf1e3; --tag-amber-ink: #92400e; --tag-emerald: #e7f6ef; --tag-emerald-ink: #036640; --tag-sky: #e8f1fe; --tag-sky-ink: #0b5cad; --tag-violet: #f3eefc; --tag-violet-ink: #5b21b6; } [data-theme="warm"] { color-scheme: light; --bg: #faf8f5; --surface: #ffffff; --surface-2: #f6f2ed; --surface-3: #efe9e1; --border: #eae3da; --border-strong: #d8cec2; --text: #1c1917; --muted: #57514b; --subtle: #6b635b; --accent: #6d28d9; --accent-hover: #5b21b6; --accent-text: #5b21b6; --accent-soft: #f4eefb; --accent-line: #e0d2f5; --on-accent: #ffffff; --focus: #6d28d9; --field-border: #8b8378; --ring: rgba(109, 40, 217, .22); --success: #04704a; --success-soft: #e8f4ee; --warning: #a8480a; --warning-soft: #fbeee0; --danger: #ad2b1d; --danger-soft: #fbeae6; --shadow-xs: 0 1px 2px rgba(60, 45, 30, .05); --shadow-sm: 0 1px 3px rgba(60, 45, 30, .08), 0 1px 2px rgba(60, 45, 30, .04); --shadow-md: 0 8px 20px -6px rgba(60, 45, 30, .12), 0 2px 6px -2px rgba(60, 45, 30, .06); --tag-slate: #f0ece6; --tag-slate-ink: #4a443c; --tag-rose: #fbe9ec; --tag-rose-ink: #9c2444; --tag-amber: #fbeede; --tag-amber-ink: #8a3d09; --tag-emerald: #e8f4ec; --tag-emerald-ink: #0a5f3e; --tag-sky: #e9f0f8; --tag-sky-ink: #135691; --tag-violet: #f4eefb; --tag-violet-ink: #5b21b6; } [data-theme="dark"] { color-scheme: dark; --bg: #0f1319; --surface: #161b23; --surface-2: #1d232d; --surface-3: #242b37; --border: #262d38; --border-strong: #38404e; --text: #e8eaee; --muted: #a2abb8; --subtle: #8b95a3; --accent: #7c3aed; --accent-hover: #6d28d9; --accent-text: #c4b5fd; --accent-soft: #221c38; --accent-line: #3a2f63; --on-accent: #ffffff; --focus: #a78bfa; --field-border: #6b7280; --ring: rgba(167, 139, 250, .35); --success: #4ade80; --success-soft: #10291d; --warning: #fbbf24; --warning-soft: #2c2312; --danger: #fca5a5; --danger-soft: #2e1a1a; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5); --shadow-md: 0 10px 26px -8px rgba(0, 0, 0, .7), 0 2px 6px -2px rgba(0, 0, 0, .5); --tag-slate: #262d38; --tag-slate-ink: #c2cad6; --tag-rose: #3a1f2b; --tag-rose-ink: #f9a8d4; --tag-amber: #33270f; --tag-amber-ink: #fcd34d; --tag-emerald: #12301f; --tag-emerald-ink: #6ee7b7; --tag-sky: #12283f; --tag-sky-ink: #93c5fd; --tag-violet: #271f45; --tag-violet-ink: #c4b5fd; } [data-theme="midnight"] { color-scheme: dark; /* Dark is a neutral slate. Midnight is the night sky: a deeper, bluer ground with an indigo accent, so the two never read as the same theme. */ --bg: #05060f; --surface: #0c0e1e; --surface-2: #12152a; --surface-3: #191d36; --border: #1d2140; --border-strong: #2d3358; --text: #e7e9f7; --muted: #9ea6c8; --subtle: #858dae; --accent: #5a62e6; --accent-hover: #4b52d4; --accent-text: #a5b4fc; --accent-soft: #151a3c; --accent-line: #2a3068; --on-accent: #ffffff; --focus: #818cf8; --field-border: #626a94; --ring: rgba(129, 140, 248, .38); --success: #34d399; --success-soft: #0a2a27; --warning: #fbbf24; --warning-soft: #2a2314; --danger: #fca5a5; --danger-soft: #2b1a2a; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .6); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .7); --shadow-md: 0 12px 30px -8px rgba(0, 0, 0, .9), 0 2px 6px -2px rgba(0, 0, 0, .7); --tag-slate: #1d2140; --tag-slate-ink: #bcc3e0; --tag-rose: #2f1c3a; --tag-rose-ink: #f0a8e0; --tag-amber: #2b2412; --tag-amber-ink: #fcd34d; --tag-emerald: #0b2b28; --tag-emerald-ink: #5eead4; --tag-sky: #0f2544; --tag-sky-ink: #93c5fd; --tag-violet: #1f1f4c; --tag-violet-ink: #b4b8fd; } /* ---------- Constants ---------- */ :root { --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --r-lg: 14px; --r: 10px; --r-sm: 8px; --r-xs: 6px; --rail-w: 252px; --page-max: 1280px; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @supports (font-variation-settings: normal) { body { font-feature-settings: "cv11", "ss01"; } } /* ---------- Type ---------- */ h1, h2, h3, h4 { margin: 0 0 .4rem; line-height: 1.25; letter-spacing: -.017em; color: var(--text); } h1 { font-size: 1.55rem; font-weight: 640; letter-spacing: -.022em; } h2 { font-size: 1.2rem; font-weight: 620; } h3 { font-size: .95rem; font-weight: 620; letter-spacing: -.01em; margin: 0; } p { margin: 0 0 1rem; } a { color: var(--accent-text); text-decoration: none; text-underline-offset: .18em; } a:hover { text-decoration: underline; } strong, b { font-weight: 600; } code { font-family: var(--mono); font-size: .88em; } .muted { color: var(--muted); } .subtle { color: var(--subtle); } .tiny { font-size: .8rem; } .nowrap { white-space: nowrap; } .center { text-align: center; } .right { text-align: right; } .mono { font-family: var(--mono); } .stat-value, .pipeline-count, td.right, .tabular { font-variant-numeric: tabular-nums; } .stack { display: flex; flex-direction: column; gap: 1rem; } .stack-sm { display: flex; flex-direction: column; gap: .5rem; } .row { display: flex; align-items: center; gap: .75rem; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- Browser surfaces ---------- */ ::selection { background: var(--accent-soft); color: var(--accent-text); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); } html { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border: 2px solid var(--bg); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--subtle); } .icon { flex: none; width: 1.05rem; height: 1.05rem; display: inline-block; vertical-align: -.18em; } .icon-lg { width: 1.65rem; height: 1.65rem; } /* ---------- Layout ---------- */ .app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1.1rem; padding: 1rem .7rem; overflow-y: auto; min-width: 0; background: var(--surface); border-right: 1px solid var(--border); } .main { min-width: 0; display: flex; flex-direction: column; } .page { width: 100%; max-width: var(--page-max); padding: 1.9rem 2rem 4.5rem; } .page-header { margin-bottom: 1.5rem; } .page-header h1 + p, .page-header > div > p { margin: .35rem 0 0; max-width: 70ch; color: var(--muted); } /* ---------- Rail ---------- */ .brand { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem .6rem; font-size: 1rem; font-weight: 640; letter-spacing: -.015em; color: var(--text); } .brand:hover { text-decoration: none; color: var(--text); } .brand-mark { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-size: .8rem; font-weight: 700; letter-spacing: -.02em; } /* The chip holds either a workspace's initial or the product's own mark. The mark is a single evenodd path, so the person in it is a hole and the chip's accent shows through -- no second fill to keep in step with the theme. */ .brand-glyph { width: 58%; height: auto; fill: currentColor; } .nav { display: flex; flex-direction: column; gap: 2px; } .nav-label { padding: .95rem .6rem .3rem; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--subtle); } .nav-item { display: flex; align-items: center; gap: .6rem; padding: .48rem .6rem; border-radius: var(--r-sm); font-size: .92rem; font-weight: 500; color: var(--muted); transition: background .12s ease, color .12s ease; } .nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .nav-item.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; } .nav-icon { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; flex: none; color: var(--subtle); } .nav-item:hover .nav-icon { color: var(--muted); } .nav-item.active .nav-icon { color: var(--accent-text); } .nav-item .count { margin-left: auto; padding: .05rem .4rem; font-size: .74rem; font-weight: 640; font-variant-numeric: tabular-nums; color: var(--on-accent); background: var(--accent); border-radius: 999px; } .nav-item.active .count { background: var(--accent); } .sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; } .rail-user { display: flex; align-items: center; gap: .55rem; padding: .65rem .5rem .1rem; border-top: 1px solid var(--border); } .rail-keys { display: flex; gap: .3rem; } .rail-keys > *, .rail-keys form { flex: 1; } .rail-keys .btn { width: 100%; } .rail-sync .btn { gap: .4rem; } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-xs); } .card-pad { padding: 1.1rem 1.25rem; } .card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--border); } .card-body { padding: 1.1rem 1.25rem; } .card-footer { padding: .9rem 1.25rem; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r) var(--r); } .card-list > * { padding: .85rem 1.25rem; border-bottom: 1px solid var(--border); } .card-list > *:last-child { border-bottom: 0; } .card-list > a:hover { background: var(--surface-2); text-decoration: none; } .grid { display: grid; gap: 1rem; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .split { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 1.25rem; align-items: start; } /* ---------- Stats ---------- */ .stat { padding: 1.05rem 1.25rem; display: block; color: inherit; } a.stat:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .stat-value { font-size: 1.9rem; font-weight: 660; line-height: 1.1; letter-spacing: -.03em; color: var(--text); } .stat-label { margin-top: .2rem; font-size: .82rem; color: var(--muted); } /* The queue is the one number that decides what to do next. */ .stat-lead .stat-value { color: var(--accent-text); } .stat-lead { border-color: var(--accent-line); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .85rem; font-family: inherit; font-size: .875rem; font-weight: 560; line-height: 1.2; white-space: nowrap; cursor: pointer; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-xs); transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease; -webkit-appearance: none; appearance: none; } .btn:hover { background: var(--surface-2); text-decoration: none; color: var(--text); } .btn:active { box-shadow: none; } .btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; } .btn-primary, .btn-accent { color: var(--on-accent); background: var(--accent); border-color: var(--accent); box-shadow: var(--shadow-xs); } .btn-primary:hover, .btn-accent:hover { color: var(--on-accent); background: var(--accent-hover); border-color: var(--accent-hover); } .btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 32%, var(--border)); background: var(--surface); } .btn-danger:hover { background: var(--danger-soft); color: var(--danger); } .btn-ghost { color: var(--muted); background: transparent; border-color: transparent; box-shadow: none; } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-sm { padding: .34rem .62rem; font-size: .82rem; } .btn-lg { padding: .66rem 1.15rem; font-size: .95rem; } .btn-block { width: 100%; } /* The one button that leaves the app wears where it goes. Its colours are Instagram's own and stay put in all four themes -- the white on it is the mark's white, not a token of ours. */ .btn-instagram { color: #fff; border-color: transparent; background: linear-gradient(74deg, #f9ce34 0%, #ee2a7b 52%, #6228d7 100%); } .btn-instagram:hover { color: #fff; background: linear-gradient(74deg, #f9ce34 0%, #ee2a7b 52%, #6228d7 100%); filter: brightness(1.07) saturate(1.05); } /* A rule with a word in it, telling the two ways in apart without a heading. */ .or { display: flex; align-items: center; gap: .75rem; margin: 1.1rem 0; color: var(--subtle); font-size: .78rem; } .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* ---------- Fields ---------- */ .field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; } .field label, label { font-size: .84rem; font-weight: 540; color: var(--muted); } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], input[type="url"], input[type="number"], select, textarea { width: 100%; padding: .52rem .7rem; font-family: inherit; font-size: .92rem; color: var(--text); background: var(--surface); border: 1px solid var(--field-border); border-radius: var(--r-sm); box-shadow: var(--shadow-xs); transition: border-color .12s ease, box-shadow .12s ease; } input::placeholder, textarea::placeholder { color: var(--subtle); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--ring); } input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; } textarea { resize: vertical; min-height: 84px; line-height: 1.55; } select { -webkit-appearance: none; appearance: none; padding-right: 1.9rem; background-image: linear-gradient(45deg, transparent 50%, var(--subtle) 50%), linear-gradient(135deg, var(--subtle) 50%, transparent 50%); background-position: right 1rem top 53%, right .65rem top 53%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); } .checkbox { display: flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 400; color: var(--muted); } .field-error { color: var(--danger); font-size: .82rem; } .form-errors { margin-bottom: 1rem; padding: .7rem .9rem; font-size: .88rem; color: var(--danger); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); border-radius: var(--r-sm); } .form-errors ul { margin: .3rem 0 0; padding-left: 1.1rem; } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: .28rem; padding: .14rem .5rem; font-size: .75rem; font-weight: 560; line-height: 1.45; white-space: nowrap; border-radius: 999px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); } .badge .icon { width: .82rem; height: .82rem; } .badge-brand, .stage-engaged { color: var(--accent-text); background: var(--accent-soft); border-color: transparent; } .badge-success, .stage-customer { color: var(--success); background: var(--success-soft); border-color: transparent; } .badge-warning { color: var(--warning); background: var(--warning-soft); border-color: transparent; } .badge-danger { color: var(--danger); background: var(--danger-soft); border-color: transparent; } .badge-accent, .stage-advocate { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent-line); } .stage-archived { opacity: .7; } .tag-slate { color: var(--tag-slate-ink); background: var(--tag-slate); border-color: transparent; } .tag-rose { color: var(--tag-rose-ink); background: var(--tag-rose); border-color: transparent; } .tag-amber { color: var(--tag-amber-ink); background: var(--tag-amber); border-color: transparent; } .tag-emerald { color: var(--tag-emerald-ink); background: var(--tag-emerald); border-color: transparent; } .tag-sky { color: var(--tag-sky-ink); background: var(--tag-sky); border-color: transparent; } .tag-violet { color: var(--tag-violet-ink); background: var(--tag-violet); border-color: transparent; } .kbd { display: inline-grid; place-items: center; min-width: 1.5rem; padding: .08rem .32rem; font-family: var(--mono); font-size: .75rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-xs); } /* ---------- Avatars ---------- */ .avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: .78rem; font-weight: 620; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); } .avatar-sm { width: 28px; height: 28px; font-size: .66rem; } .avatar-lg { width: 60px; height: 60px; font-size: 1.1rem; } /* ---------- Tables ---------- */ table { width: 100%; border-collapse: collapse; } thead th { padding: .65rem 1.25rem; text-align: left; font-size: .74rem; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; color: var(--subtle); background: var(--surface-2); border-bottom: 1px solid var(--border); } thead th:first-child { border-top-left-radius: var(--r); } thead th:last-child { border-top-right-radius: var(--r); } /* Sortable headers stay quiet until you go looking: the caret only appears under the cursor, or on the column actually doing the sorting. */ .sort-header { display: inline-flex; align-items: center; gap: .3rem; color: inherit; text-decoration: none; white-space: nowrap; } .sort-header:hover { color: var(--text); text-decoration: none; } .sort-header.active { color: var(--text); } th.right .sort-header { flex-direction: row-reverse; } .sort-caret { width: 14px; height: 14px; opacity: 0; transition: opacity .12s ease, transform .12s ease; } .sort-header:hover .sort-caret { opacity: .45; } .sort-header.active .sort-caret { opacity: 1; } .sort-caret-up { transform: rotate(180deg); } tbody td { padding: .7rem 1.25rem; border-bottom: 1px solid var(--border); vertical-align: middle; } /* A five-column ledger cannot fit a phone. It scrolls inside its own card rather than dragging the whole page sideways. */ .table-scroll { overflow-x: auto; border-radius: 0 0 var(--r) var(--r); } .table-scroll table { min-width: 40rem; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--surface-2); } tbody a { color: inherit; } tbody a:hover { text-decoration: none; color: var(--accent-text); } /* ---------- Flashes ---------- */ .flashes { position: sticky; top: 0; z-index: 30; padding: .75rem 2rem 0; } .flash { display: flex; align-items: center; gap: .55rem; padding: .65rem .9rem; font-size: .9rem; font-weight: 500; border: 1px solid transparent; border-radius: var(--r-sm); box-shadow: var(--shadow-sm); } .flash .flash-lamp { flex: none; } .flash-notice { color: var(--success); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 22%, transparent); } .flash-alert { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 22%, transparent); } .flash .btn-ghost { color: inherit; opacity: .7; } .flash .btn-ghost:hover { opacity: 1; background: transparent; color: inherit; } /* ---------- Empty states ---------- */ .empty { padding: 3rem 1.5rem; text-align: center; color: var(--muted); } .empty-icon { display: grid; place-items: center; margin: 0 auto .8rem; color: var(--subtle); } .empty h2 { color: var(--text); margin-bottom: .35rem; } .empty p { max-width: 46ch; margin-inline: auto; } .empty .btn { margin-top: .5rem; } /* ---------- Dashboard ---------- */ .queue-item { display: flex; align-items: flex-start; gap: .75rem; } .queue-item .avatar { margin-top: .1rem; } .queue-head { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; } .queue-handle { font-size: .875rem; font-weight: 600; color: var(--text); } .queue-text { margin: .1rem 0 0; font-size: .875rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pipeline-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 2.4rem; align-items: center; gap: .75rem; padding: .4rem 0; color: inherit; } .pipeline-row:hover { text-decoration: none; } .pipeline-row > .badge { justify-self: start; } .pipeline-row:hover .pipeline-count { color: var(--accent-text); } .pipeline-track { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .pipeline-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .pipeline-fill.is-empty { background: var(--border-strong); } .pipeline-count { text-align: right; font-size: .875rem; font-weight: 600; color: var(--text); } /* ---------- Inbox ---------- */ .inbox-progress { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .progress-track { flex: 1; min-width: 160px; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } /* No transition: the app has no Turbo Streams or morphing, so this bar is a brand-new element on every render and would never have a value to animate from. Width is also the wrong property to animate, and scaleX would squash the pill's end caps. */ .progress-fill { height: 100%; border-radius: 999px; background: var(--accent); } .comment-card { overflow: hidden; } .comment-post { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.25rem; background: var(--surface-2); border-bottom: 1px solid var(--border); } .post-thumb { flex: none; width: 46px; height: 46px; border-radius: var(--r-xs); object-fit: cover; background: var(--surface-3); border: 1px solid var(--border); } .comment-thread { padding: .9rem 1.25rem; background: var(--surface-2); border-bottom: 1px solid var(--border); } .thread-header { margin-bottom: .5rem; } .thread-item { display: flex; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--border); } .thread-item:last-child { border-bottom: 0; padding-bottom: 0; } .thread-item.is-reply { padding-left: 1.4rem; } .thread-item.is-current { color: var(--accent-text); } .thread-text { margin: .15rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; } .comment-body { padding: 1.35rem 1.25rem; } .comment-meta { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .8rem; color: var(--subtle); } .comment-text { margin: .9rem 0 0; font-size: 1.2rem; line-height: 1.5; letter-spacing: -.011em; color: var(--text); overflow-wrap: anywhere; } .quick-replies { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; } .reply-form textarea { min-height: 96px; font-size: .96rem; } .reply-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .75rem; } .up-next-item { display: flex; gap: .6rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--border); } .up-next-item:last-child { border-bottom: 0; } .up-next-item:hover { text-decoration: none; } /* ---------- Timeline ---------- */ .timeline { display: flex; flex-direction: column; } .timeline-item { display: flex; gap: .7rem; padding: .65rem 0; border-bottom: 1px solid var(--border); } .timeline-item:last-child { border-bottom: 0; } .timeline-icon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--subtle); background: var(--surface-2); border: 1px solid var(--border); } /* ---------- Auth ---------- */ .auth { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; } .auth-card { width: 100%; max-width: 400px; } .auth-brand { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: 1.4rem; font-size: 1.15rem; font-weight: 660; letter-spacing: -.02em; color: var(--text); } .auth-brand:hover { text-decoration: none; } /* ---------- Invitation links ---------- */ .invite-link { display: flex; gap: .4rem; align-items: center; } .invite-link-url { flex: 1; min-width: 0; padding: .35rem .5rem; font-family: var(--mono); font-size: .75rem; color: var(--subtle); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-xs); } /* ---------- Theme picker ---------- */ .finishes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; } .finish { position: relative; display: block; cursor: pointer; } .finish input { position: absolute; opacity: 0; width: 1px; height: 1px; } .finish-swatch { display: block; padding: .6rem; border-radius: var(--r-sm); border: 1px solid var(--border); transition: border-color .14s ease, box-shadow .14s ease; } .finish input:focus-visible + .finish-swatch { border-color: var(--focus); box-shadow: 0 0 0 3px var(--ring); } .finish input:checked + .finish-swatch { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } .finish-bars { display: flex; gap: 3px; height: 30px; margin-bottom: .5rem; } .finish-bars span { flex: 1; border-radius: 3px; } .finish-bars .b-accent { flex: 0 0 14px; } .finish-name { display: block; font-size: .8rem; font-weight: 560; } .finish-swatch { background: var(--sw-bg); } .finish-swatch .finish-name { color: var(--sw-text); } .finish-bars .b-bg { background: var(--sw-bg); border: 1px solid var(--sw-border); } .finish-bars .b-surface { background: var(--sw-surface); border: 1px solid var(--sw-border); } .finish-bars .b-line { background: var(--sw-border); } .finish-bars .b-accent { background: var(--sw-accent); } /* A swatch has to paint a theme it is not currently under, so these are the one place in the sheet that names hexes instead of tokens. Keyed off the attribute rather than the class, so the homepage's compact switch draws from the same four definitions as the settings page's swatches. */ [data-finish="light"] { --sw-bg: #f7f8fa; --sw-surface: #ffffff; --sw-border: #e6e8ec; --sw-accent: #6d28d9; --sw-text: #101828; } [data-finish="warm"] { --sw-bg: #faf8f5; --sw-surface: #ffffff; --sw-border: #eae3da; --sw-accent: #6d28d9; --sw-text: #1c1917; } [data-finish="dark"] { --sw-bg: #0f1319; --sw-surface: #161b23; --sw-border: #262d38; --sw-accent: #7c3aed; --sw-text: #e8eaee; } [data-finish="midnight"] { --sw-bg: #05060f; --sw-surface: #12152a; --sw-border: #2d3358; --sw-accent: #5a62e6; --sw-text: #e7e9f7; } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ---------- Narrow ---------- */ @media (max-width: 62rem) { .split, .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } /* Four numbers stacked into four full-width cards pushes the actual work below the fold. Two up reads just as well and costs a quarter of it. */ .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 56.25rem) { /* Everything in here is scoped to .sidebar: `.brand`, `.nav` and `.nav-item` are shared components, and the homepage borrows them outside the rail -- an unscoped `order: 1` there flipped its header round. The rail lies down across the top in two rows. Grid areas rather than DOM order, so the account block sits at the bottom of the standing rail and at the top-right of the lying one — signing out and switching workspace stay reachable on a handset. */ .app { grid-template-columns: minmax(0, 1fr); } .sidebar { position: sticky; top: 0; z-index: 25; height: auto; /* Two rows: identity and account controls above, the nav strip below. Flex wrap rather than grid areas, so the workspace name is the part that yields -- it already truncates, and the account controls must never be pushed off the row. */ display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0; padding: 0; overflow: visible; border-right: 0; border-bottom: 1px solid var(--border); } .sidebar .brand { order: 1; flex: 1 1 auto; min-width: 0; padding: .6rem .9rem; } .sidebar .nav { order: 3; flex: 1 0 100%; /* Without this the strip's content width becomes the page's, and the whole document scrolls sideways instead of just the nav. */ min-width: 0; flex-direction: row; gap: 2px; padding: 0 .6rem; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--border); } .sidebar .nav::-webkit-scrollbar { display: none; } .sidebar .nav-item { border-radius: var(--r-sm) var(--r-sm) 0 0; white-space: nowrap; padding-block: .6rem; } .sidebar .nav-item .truncate { overflow: visible; } .sidebar .nav-label { display: none; } .sidebar-footer { order: 2; flex: 0 1 auto; min-width: 0; flex-direction: row; align-items: center; gap: .3rem; margin: 0; padding: .5rem .75rem; } /* The rail's buttons are full-width when the rail is a column; in a row they take their own width. */ .rail-keys .btn { width: auto; padding-inline: .5rem; font-size: .78rem; } /* Every page that can usefully sync carries its own button, so the rail's stands down rather than crowding the row. */ .rail-sync { display: none; } /* The avatar identifies who is signed in; the name would push Sign out off the row, and Settings carries the full account anyway. */ .rail-user { padding: 0; border-top: 0; } .rail-user .grow { display: none; } .rail-keys { flex: none; } .rail-keys > *, .rail-keys form { flex: none; } .page { padding: 1.25rem 1rem 3rem; } .flashes { padding: .75rem 1rem 0; } } @media (max-width: 34rem) { .card-header, .card-body, .card-pad, .card-list > *, .comment-body, .comment-post { padding-inline: .95rem; } .stat { padding: .85rem .95rem; } thead th, tbody td { padding-inline: .95rem; } .finishes { grid-template-columns: minmax(0, 1fr); } .stat-value { font-size: 1.65rem; } }