/* GroundStation - design system. Tokens from docs/RESEARCH.md §4. */ :root { --bc-green: #00ad45; --bc-green-emerald: #5ecc62; --bc-blue-air: #b3dcff; --bc-ink: #1d2d35; --bc-white: #ffffff; --bc-canvas: #f6f3ed; --bc-canvas-warm: #fbf9f5; --bc-ink-muted: #6b747a; --bc-border: #e4e0d8; --bc-blue-link: #1b6fa8; --bc-yellow: #ffc532; --bc-yellow-soft: #fff3c4; --bc-orange-badge: #ff8a00; --bc-red: #d0021b; --bc-green-dark: #00913a; --bc-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; --bc-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --bc-content-width: 730px; --bc-grid-width: 1000px; --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(29, 45, 53, 0.06); --shadow-card: 0 1px 3px rgba(29, 45, 53, 0.08), 0 1px 2px rgba(29, 45, 53, 0.04); --shadow-pop: 0 8px 24px rgba(29, 45, 53, 0.14); /* Semantic "soft" families - a tinted surface + matching border + ink. These recur across the app (flash banners, calendar/schedule pills, status chips) and used to be hardcoded per-feature; as tokens the dark theme restyles them in one place. Light values equal the literals they replaced. */ --bc-border-strong: #d7d2c8; /* firmer hairline, e.g. hover borders */ --bc-blue-air-border: #a9d3f5; /* border to pair with --bc-blue-air */ --bc-yellow-soft-border: #f0e0a8; --bc-yellow-soft-ink: #6b5400; --bc-success-soft: #e4f7e8; --bc-success-soft-border: #bfe8c8; --bc-success-ink: #1a6d31; --bc-danger-soft: #fdeaec; --bc-danger-soft-border: #f5c2c8; --bc-danger-ink: #a01421; --bc-info-soft: #eaf4fc; --bc-info-soft-border: #bfe0f7; --bc-info-ink: #0f4d78; --bc-hover-wash: rgba(0, 0, 0, 0.04); /* subtle wash for quiet/transparent hovers */ --trix-icon-filter: none; /* Trix toolbar icons are black SVGs; invert in dark */ color-scheme: light; } /* ============================ DARK THEME ============================ Theming is token-only: dark mode is just a re-declaration of the custom properties above. It applies in two cases, and the two blocks below are kept IDENTICAL on purpose - edit both together: 1. the viewer's OS prefers dark AND they haven't overridden it - i.e. no [data-theme] attribute, which is our "System" setting; and 2. the viewer explicitly picked Dark → :root[data-theme="dark"]. An explicit Light/Dark choice is written to on the server (see layout.ejs + POST /me/appearance), so there is never a flash of the wrong theme. "System" emits no attribute and the media query governs. A [data-theme="light"] simply matches neither dark rule → falls back to the light :root above. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bc-green: #19b85c; --bc-green-emerald: #5ecc62; --bc-blue-air: #26405a; --bc-ink: #e7e3db; --bc-white: #212327; --bc-canvas: #161719; --bc-canvas-warm: #26282c; --bc-ink-muted: #9aa19d; --bc-border: #34373d; --bc-blue-link: #5aa9e6; --bc-yellow: #ffc532; --bc-yellow-soft: #332b12; --bc-orange-badge: #ff8a00; --bc-red: #ff6b7a; --bc-green-dark: #3ad675; --bc-border-strong: #43474e; --bc-blue-air-border: #345066; --bc-yellow-soft-border: #5a4a1f; --bc-yellow-soft-ink: #e8c766; --bc-success-soft: #15271b; --bc-success-soft-border: #2f5b3d; --bc-success-ink: #79dda0; --bc-danger-soft: #2b1618; --bc-danger-soft-border: #5a2e33; --bc-danger-ink: #ff9aa6; --bc-info-soft: #152532; --bc-info-soft-border: #2c4a63; --bc-info-ink: #8fc6f0; --bc-hover-wash: rgba(255, 255, 255, 0.06); --trix-icon-filter: invert(1); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-pop: 0 12px 30px rgba(0, 0, 0, 0.6); } } :root[data-theme='dark'] { color-scheme: dark; --bc-green: #19b85c; --bc-green-emerald: #5ecc62; --bc-blue-air: #26405a; --bc-ink: #e7e3db; --bc-white: #212327; --bc-canvas: #161719; --bc-canvas-warm: #26282c; --bc-ink-muted: #9aa19d; --bc-border: #34373d; --bc-blue-link: #5aa9e6; --bc-yellow: #ffc532; --bc-yellow-soft: #332b12; --bc-orange-badge: #ff8a00; --bc-red: #ff6b7a; --bc-green-dark: #3ad675; --bc-border-strong: #43474e; --bc-blue-air-border: #345066; --bc-yellow-soft-border: #5a4a1f; --bc-yellow-soft-ink: #e8c766; --bc-success-soft: #15271b; --bc-success-soft-border: #2f5b3d; --bc-success-ink: #79dda0; --bc-danger-soft: #2b1618; --bc-danger-soft-border: #5a2e33; --bc-danger-ink: #ff9aa6; --bc-info-soft: #152532; --bc-info-soft-border: #2c4a63; --bc-info-ink: #8fc6f0; --bc-hover-wash: rgba(255, 255, 255, 0.06); --trix-icon-filter: invert(1); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-pop: 0 12px 30px rgba(0, 0, 0, 0.6); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--bc-font-sans); font-size: 16px; line-height: 1.5; color: var(--bc-ink); background: var(--bc-canvas); -webkit-font-smoothing: antialiased; } a { color: var(--bc-blue-link); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { line-height: 1.25; color: var(--bc-ink); margin: 0 0 var(--space-3); } h1 { font-size: 30px; font-weight: 700; } h2 { font-size: 22px; font-weight: 700; } h3 { font-size: 19px; font-weight: 600; } p { margin: 0 0 var(--space-3); } .muted { color: var(--bc-ink-muted); } .small { font-size: 13px; } hr { border: 0; border-top: 1px solid var(--bc-border); margin: var(--space-5) 0; } /* ---------- layout ---------- */ .container { max-width: var(--bc-grid-width); margin: 0 auto; padding: 0 var(--space-4); } main.container { padding-top: var(--space-6); padding-bottom: var(--space-8); } .narrow { max-width: var(--bc-content-width); margin-left: auto; margin-right: auto; } .page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; } .page-header h1 { margin: 0; } .section-title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bc-ink-muted); margin: var(--space-6) 0 var(--space-3); } .stack > * + * { margin-top: var(--space-4); } .row { display: flex; gap: var(--space-3); align-items: center; } .spread { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; } /* ---------- top bar ---------- */ .top-bar { background: var(--bc-white); border-bottom: 1px solid var(--bc-border); position: sticky; top: 0; z-index: 50; } .top-bar-inner { display: flex; align-items: center; justify-content: center; gap: var(--space-4); height: 56px; } .brand { font-weight: 700; color: var(--bc-ink); font-size: 18px; display: flex; align-items: center; gap: 6px; } .brand:hover { text-decoration: none; } .top-nav { display: flex; gap: var(--space-4); align-items: center; margin-left: var(--space-3); } .top-nav a { color: var(--bc-ink); font-weight: 500; position: relative; padding: 4px 2px; } .top-nav a:hover { color: var(--bc-green-dark); text-decoration: none; } .has-badge { display: inline-flex; align-items: center; gap: 6px; } .badge { background: var(--bc-orange-badge); color: #fff; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; } .top-search { margin-left: auto; } .top-search input { width: 170px; } .top-me { display: flex; align-items: center; gap: var(--space-2); } /* ---------- buttons ---------- */ .btn, .btn-primary, .btn-quiet, .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--radius); padding: 9px 16px; border: 1px solid transparent; line-height: 1.2; text-decoration: none; } .btn-primary { background: var(--bc-green); color: #fff; } .btn-primary:hover { background: var(--bc-green-dark); text-decoration: none; color: #fff; } .btn { background: var(--bc-white); color: var(--bc-ink); border-color: var(--bc-border); } .btn:hover { background: var(--bc-canvas-warm); text-decoration: none; } .btn-quiet { background: transparent; color: var(--bc-blue-link); padding: 6px 10px; } .btn-quiet:hover { background: var(--bc-hover-wash); text-decoration: none; } .btn-danger { background: transparent; color: var(--bc-red); border-color: transparent; padding: 6px 10px; } .btn-danger:hover { background: rgba(208, 2, 27, 0.08); text-decoration: none; } .btn-sm { padding: 5px 10px; font-size: 14px; } button:disabled { opacity: 0.5; cursor: default; } /* ---------- cards & tiles ---------- */ .card { background: var(--bc-white); border: 1px solid var(--bc-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-5); } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); } .project-card { display: block; color: var(--bc-ink); transition: transform 0.06s ease, box-shadow 0.12s ease; } .project-card:hover { text-decoration: none; box-shadow: var(--shadow-pop); transform: translateY(-1px); } .project-card h3 { margin: var(--space-2) 0 var(--space-1); } .project-dot { display: inline-block; width: 36px; height: 36px; border-radius: var(--radius); } .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-4); } .tile { display: block; background: var(--bc-white); border: 1px solid var(--bc-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-5); color: var(--bc-ink); } .tile:hover { text-decoration: none; box-shadow: var(--shadow-pop); transform: translateY(-1px); } .tile.disabled { opacity: 0.5; filter: grayscale(0.4); pointer-events: none; } .tile-icon { font-size: 26px; line-height: 1; } .tile h3 { margin: var(--space-3) 0 var(--space-1); } .tile .muted { font-size: 14px; } /* ---------- forms ---------- */ label { display: block; font-weight: 600; margin-bottom: var(--space-3); } input[type='text'], input[type='email'], input[type='password'], input[type='search'], input[type='date'], input[type='datetime-local'], input[type='time'], textarea, select { width: 100%; font: inherit; color: var(--bc-ink); background: var(--bc-white); border: 1px solid var(--bc-border); border-radius: var(--radius); padding: 9px 11px; margin-top: 6px; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--bc-green); box-shadow: 0 0 0 3px rgba(0, 173, 69, 0.15); } .top-search input { margin-top: 0; } select { margin-top: 0; } textarea { min-height: 90px; resize: vertical; } .field-inline { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; } .field-inline label { flex: 1; margin-bottom: 0; } /* ---------- prose / rich text ---------- */ .prose { line-height: 1.6; } .prose h1 { font-size: 24px; } .prose h2 { font-size: 20px; } .prose img { max-width: 100%; height: auto; border-radius: var(--radius); } .prose blockquote { border-left: 3px solid var(--bc-border); margin: 0 0 var(--space-3); padding-left: var(--space-4); color: var(--bc-ink-muted); } .prose pre { background: var(--bc-canvas-warm); padding: var(--space-3); border-radius: var(--radius); overflow: auto; } .mention { color: var(--bc-green-dark); font-weight: 600; background: var(--bc-yellow-soft); border-radius: var(--radius-sm); padding: 0 3px; } /* Rich text field (Trix): the auto-generated toolbar + the editable area are wrapped in one bordered .trix-field so the controls read as part of the editor, not a strip floating above it. (Trix inserts its toolbar right before the in the same parent, so wrapping the editor captures both.) */ .trix-field { margin-top: 6px; background: var(--bc-white); border: 1px solid var(--bc-border); border-radius: var(--radius); } .trix-field:focus-within { border-color: var(--bc-green); box-shadow: 0 0 0 3px rgba(0, 173, 69, 0.15); } /* toolbar = attached header; round its top to match the field (no overflow:hidden, so the link popup can drop past the field edge without being clipped) */ .trix-field trix-toolbar { margin: 0; padding: 4px 6px; background: var(--bc-canvas-warm); border-bottom: 1px solid var(--bc-border); border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; } .trix-field trix-editor { min-height: 110px; margin: 0; padding: var(--space-3) var(--space-4); border: 0; border-radius: 0; background: transparent; } /* a flat, quiet toolbar - left-packed icon buttons, no boxed groups */ /* Flat, evenly-spaced icon buttons: a light hover wash, a slim divider between each tool group, and NO scrollbar (wrap instead of scroll; the default Trix spacer that shoves groups apart is removed). */ trix-toolbar .trix-button-row { flex-wrap: wrap; justify-content: flex-start; align-items: center; overflow: visible; row-gap: 2px; } trix-toolbar .trix-button-group-spacer { display: none; } trix-toolbar .trix-button-group { border: 0; margin: 0; padding: 0; gap: 3px; } trix-toolbar .trix-button-row > .trix-button-group:not(:first-child) { margin-left: var(--space-2); padding-left: var(--space-2); border-left: 1px solid var(--bc-border); } trix-toolbar .trix-button { border: 0; background: transparent; border-radius: var(--radius-sm); } /* Trix draws a 1px #ccc separator between buttons in a group (its selector out- specifies a plain `border:0`); kill it so only our per-group dividers remain. */ trix-toolbar .trix-button:not(:first-child) { border-left: 0; } trix-toolbar .trix-button--icon { width: 30px; height: 28px; } trix-toolbar .trix-button:not(:disabled):hover { background: rgba(128, 128, 128, 0.16); } trix-toolbar .trix-button--icon:not(:disabled):hover::before { opacity: 0.9; } trix-toolbar .trix-button:focus-visible { outline: 2px solid var(--bc-green); outline-offset: -2px; } trix-toolbar .trix-button.trix-active { background: var(--bc-blue-air); } /* Trix ships black icon SVGs on each toolbar button's ::before; invert them in dark so they're legible (light theme resolves the token to `none`). */ trix-toolbar .trix-button--icon::before { filter: var(--trix-icon-filter); } /* Our injected "Insert image" toolbar button (app.js adds it on trix-initialize). Uses Trix's own icon machinery: an SVG background on ::before, sized + dark-inverted by the rules above. Rich text is image-only here, so we hide Trix's generic "Attach Files" paperclip and let this be the single, clear image affordance. */ trix-toolbar .trix-button--icon-attach { display: none; } trix-toolbar .trix-button--icon-image::before { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%228.5%22%20r%3D%221.5%22%2F%3E%3Cpolyline%20points%3D%2221%2015%2016%2010%205%2021%22%2F%3E%3C%2Fsvg%3E'); top: 8%; bottom: 4%; } /* ---------- breadcrumbs ---------- */ .breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; color: var(--bc-ink-muted); margin-bottom: var(--space-4); } .breadcrumbs a { color: var(--bc-ink-muted); } .breadcrumbs .sep { opacity: 0.6; } /* recording detail top row - breadcrumbs on the left, page actions (Save) on the right */ .recording-top { gap: var(--space-3); margin-bottom: var(--space-4); } .recording-top .breadcrumbs { margin-bottom: 0; } .recording-top .bookmark-form { margin-left: 0; } /* ---------- tooltip ---------- */ /* Opt-in hover/focus label: add data-tooltip="…" to any element. The bubble uses --bc-ink/--bc-white, so it auto-inverts (dark bubble in the light theme, light bubble in dark) and always stays high-contrast. It opens below and right-aligned, which suits the top-right buttons (e.g. Bookmark) that use it today. */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; padding: 6px 9px; border-radius: var(--radius-sm); background: var(--bc-ink); color: var(--bc-white); font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; box-shadow: var(--shadow-pop); opacity: 0; transform: translateY(-2px); pointer-events: none; transition: opacity 0.12s ease, transform 0.12s ease; } [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [data-tooltip]::after { transition: none; } } /* ---------- flash ---------- */ .flash { padding: var(--space-3) var(--space-4); border-radius: var(--radius); margin: 0 auto var(--space-4); max-width: var(--bc-content-width); border: 1px solid transparent; } .flash-notice { background: var(--bc-yellow-soft); border-color: var(--bc-yellow-soft-border); color: var(--bc-yellow-soft-ink); } .flash-success { background: var(--bc-success-soft); border-color: var(--bc-success-soft-border); color: var(--bc-success-ink); } .flash-error { background: var(--bc-danger-soft); border-color: var(--bc-danger-soft-border); color: var(--bc-danger-ink); } /* ---------- avatars ---------- */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-pill); color: #fff; font-size: 12px; font-weight: 700; flex: 0 0 auto; } .avatar-lg { width: 44px; height: 44px; font-size: 15px; } /* ---------- comments & boosts ---------- */ .comments { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--bc-border); } .comment { display: flex; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--bc-border); } /* The comments section leads with its own top hairline, so the first comment drops its border/padding to avoid doubling up; comments after it keep their dividers. */ .comments > .comment:first-child { border-top: 0; padding-top: 0; } .comment-meta { margin-bottom: var(--space-1); } .comment-form { margin-top: var(--space-4); } /* composer collapse: the prompt + "Never mind" appear only once JS enhances the form */ .comment-prompt { display: none; align-items: center; gap: var(--space-3); width: 100%; text-align: left; background: transparent; border: 0; padding: 6px 0; cursor: pointer; font: inherit; color: var(--bc-ink-muted); } .comment-prompt:hover .comment-prompt-text { color: var(--bc-ink); } .comment-prompt-text { font-size: 15px; } .comment-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); } [data-comment-cancel] { display: none; } .comment-form.comment-js [data-comment-cancel] { display: inline-flex; } .comment-form.comment-js.is-collapsed .comment-prompt { display: flex; } .comment-form.comment-js.is-collapsed .comment-editor { display: none; } .boosts { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-4) 0; } .boost { background: var(--bc-canvas-warm); border: 1px solid var(--bc-border); border-radius: var(--radius-pill); padding: 2px 10px; font-size: 14px; } /* Given boosts render as toggle buttons: click one you gave to remove it, or any other to add yours. `.boost-list` is layout-transparent so the pills, the 🚀 and the bookmark all share the single .boosts flex row. Hover shows who reacted. */ .boost-list { display: contents; } .boost-toggle { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-family: inherit; color: var(--bc-ink); line-height: 1.2; transition: border-color 0.12s ease, background 0.12s ease; } .boost-toggle:hover { border-color: var(--bc-green); } .boost-toggle:focus-visible { outline: 2px solid var(--bc-green); outline-offset: 1px; } .boost-toggle.is-mine { background: var(--bc-success-soft); border-color: var(--bc-success-soft-border); } .boost-count { font-size: 12px; font-weight: 700; color: var(--bc-ink-muted); font-variant-numeric: tabular-nums; } .boost-toggle.is-mine .boost-count { color: var(--bc-success-ink); } /* add-a-boost: a subtle round 🚀 that opens a little emoji picker (native
). Click an emoji to toggle that reaction on the recording — no free-text input. Mirrors the campfire line reaction palette so boosting feels the same everywhere. */ .boost-add { position: relative; display: inline-flex; align-items: center; } .boost-add-trigger { cursor: pointer; list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-pill); background: var(--bc-canvas-warm); border: 1px solid var(--bc-border); font-size: 15px; line-height: 1; user-select: none; opacity: 0.7; } .boost-add-trigger::-webkit-details-marker { display: none; } .boost-add-trigger:hover, .boost-add[open] .boost-add-trigger { opacity: 1; border-color: var(--bc-green); } /* the picker: a little pill of emoji that floats above the 🚀 when open */ .boost-add-menu { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--bc-white); border: 1px solid var(--bc-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-pop); } .boost-emoji { border: 0; background: transparent; cursor: pointer; padding: 0; width: 32px; height: 32px; border-radius: var(--radius-pill); font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; filter: grayscale(0.25); transition: transform 0.08s ease, background 0.12s ease, filter 0.12s ease; } .boost-emoji:hover { background: var(--bc-canvas-warm); filter: none; transform: scale(1.18); } .boost-emoji:focus-visible { outline: 2px solid var(--bc-green); outline-offset: 1px; filter: none; } .boost-emoji.is-mine { background: var(--bc-success-soft); filter: none; } .bookmark-form { margin-left: auto; } /* ---------- feeds & lists ---------- */ .feed { list-style: none; padding: 0; margin: 0; } .feed-item { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--bc-border); } .feed-item.unread { background: var(--bc-yellow-soft); border-radius: var(--radius); padding-left: var(--space-3); padding-right: var(--space-3); } .people-list, .assign-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } .person { display: flex; align-items: center; gap: var(--space-3); } .person-info { flex: 1; } .badge-role { background: var(--bc-canvas-warm); border: 1px solid var(--bc-border); border-radius: var(--radius-pill); padding: 2px 10px; font-size: 13px; text-transform: capitalize; } /* ---------- activity feed (shared: /activity + Home "Latest activity") ---------- */ .activity-body { flex: 1; min-width: 0; } .activity-line a { color: var(--bc-ink); font-weight: 500; } .activity-line a:hover { color: var(--bc-green-dark); text-decoration: none; } .activity-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .activity-proj { display: inline-flex; align-items: center; gap: 5px; color: var(--bc-ink-muted); font-weight: 600; } .activity-proj:hover { color: var(--bc-green-dark); text-decoration: none; } .activity-proj-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: 0 0 auto; } .activity-dot-sep { opacity: 0.6; } /* Whole-row click-through: the summary link's ::after covers the row; the project chip is lifted above it so it stays separately clickable. Rows with no target (e.g. account-level pings) simply have no .activity-target and aren't clickable. */ .activity-item { position: relative; } .activity-item:hover { background: var(--bc-canvas-warm); } .activity-target::after { content: ''; position: absolute; inset: 0; } .activity-item .activity-proj { position: relative; z-index: 1; } /* ---------- segmented switcher (Hey! read/unread filter; reusable) ---------- */ .segmented { display: inline-flex; border: 1px solid var(--bc-border); border-radius: var(--radius); overflow: hidden; } .segmented a { padding: 6px 14px; color: var(--bc-ink); font-weight: 600; font-size: 14px; background: var(--bc-white); display: inline-flex; align-items: center; gap: 6px; } .segmented a + a { border-left: 1px solid var(--bc-border); } .segmented a:hover { background: var(--bc-canvas-warm); text-decoration: none; } .segmented a.is-active, .segmented a.is-active:hover { background: var(--bc-green); color: #fff; } .segmented .seg-count { font-size: 12px; font-weight: 700; opacity: 0.7; font-variant-numeric: tabular-nums; } .segmented a.is-active .seg-count { opacity: 0.95; } /* ---------- Hey! notifications ---------- */ .hey-tabs { margin-bottom: var(--space-5); } .hey-link { flex: 1; min-width: 0; color: inherit; } .hey-link:hover { text-decoration: none; } .hey-link:hover .hey-line { color: var(--bc-green-dark); } .hey-line { display: block; } .hey-meta { display: block; margin-top: 2px; } .hey-read { flex: 0 0 auto; } /* Home dashboard: projects (left, primary) + latest activity (right, sidebar). One column by default and on narrow screens; two columns once there's room AND there's activity to show (clients / empty accounts stay single-column). */ .home-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; } .home-grid .section-title { margin-top: 0; } /* align both column labels at the top */ .home-projects, .home-activity { min-width: 0; } @media (min-width: 880px) { .home-grid.has-activity { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-7); } } .home-activity-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .home-activity-head .section-title { margin: 0; } /* ---------- empty states ---------- */ .empty-state { text-align: center; padding: var(--space-8) var(--space-4); color: var(--bc-ink-muted); } .empty-icon { font-size: 44px; margin-bottom: var(--space-3); } .empty-state h2 { color: var(--bc-ink); } /* ---------- auth ---------- */ .auth-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; } .auth-card { width: 100%; max-width: 400px; } .auth-card h1 { font-size: 24px; text-align: center; } /* ---------- client sharing (WP-24) ---------- */ .page-header-actions { display: flex; gap: var(--space-2); align-items: center; } .client-shared { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); } .client-shared-item { display: flex; align-items: center; gap: var(--space-3); } .client-shared-title { font-weight: 600; } .client-shared-meta { margin-left: auto; white-space: nowrap; } .sharing-section { margin: var(--space-5) 0; } .sharing-people, .sharing-items { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); } .sharing-person { display: flex; align-items: center; gap: var(--space-3); } .sharing-person-name { font-weight: 600; } .sharing-toggle { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); } .sharing-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--bc-border); } .sharing-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sharing-on { background: var(--bc-green); color: #fff; } /* ---------- responsive ---------- */ @media (max-width: 720px) { .top-nav { gap: var(--space-3); font-size: 14px; } .top-search { display: none; } .top-bar-inner { gap: var(--space-2); } .page-header { align-items: flex-start; } .client-shared-meta { margin-left: 0; } .sharing-toggle { margin-left: 0; } } /* ===================== v5 navigation: logo mega-menu + bottom dock ===================== */ .mega { position: relative; } .mega-trigger { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius); user-select: none; } .mega-trigger::-webkit-details-marker { display: none; } .mega-trigger:hover { background: var(--bc-canvas); } .mega-caret { color: var(--bc-ink-muted); font-size: 12px; transition: transform 0.15s ease; } .mega[open] .mega-caret { transform: rotate(180deg); } .mega-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bc-orange-badge); display: inline-block; } .mega-panel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 340px; max-width: calc(100vw - 32px); background: var(--bc-white); border: 1px solid var(--bc-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: var(--space-3); z-index: 60; } .mega-search input { width: 100%; padding: 10px 12px; border: 1px solid var(--bc-border); border-radius: var(--radius); font-size: 15px; background: var(--bc-canvas-warm); margin-bottom: var(--space-3); } .mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .mega-grid a { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: var(--radius); color: var(--bc-ink); font-weight: 500; } .mega-grid a:hover { background: var(--bc-canvas); text-decoration: none; color: var(--bc-green-dark); } .mega-ic { width: 20px; text-align: center; } .mega-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--bc-border); flex-wrap: wrap; } .mega-who { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--bc-ink); border-radius: var(--radius); } a.mega-who { padding: 2px 6px; margin: -2px -6px; } a.mega-who:hover { background: var(--bc-canvas); text-decoration: none; color: var(--bc-green-dark); } .mega-foot-links { display: inline-flex; align-items: center; gap: var(--space-2); } /* Appearance switch - a small 3-way segmented control (System / Light / Dark) in the mega-menu (and mirrored on the profile page). No-JS: each option is a real submit button (POST /me/appearance) that reloads with the new theme. With JS, app.js flips instantly and persists in the background. */ .mega-appearance { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--bc-border); } .mega-appearance-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bc-ink-muted); } .appearance { display: flex; gap: 2px; padding: 2px; background: var(--bc-canvas); border: 1px solid var(--bc-border); border-radius: var(--radius-pill); } .appearance-opt { flex: 1; justify-content: center; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 0; background: transparent; color: var(--bc-ink-muted); border-radius: var(--radius-pill); line-height: 1.2; } .appearance-opt:hover { color: var(--bc-ink); } .appearance-opt[aria-pressed='true'] { background: var(--bc-white); color: var(--bc-ink); box-shadow: var(--shadow-sm); } .appearance-ic { font-size: 14px; line-height: 1; } .has-dock main.container { padding-bottom: 96px; } .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--bc-white); border-top: 1px solid var(--bc-border); box-shadow: 0 -1px 3px rgba(29, 45, 53, 0.06); display: flex; justify-content: center; gap: var(--space-6); padding: 6px var(--space-4); } .dock-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 14px; border-radius: var(--radius); color: var(--bc-ink-muted); font-size: 12px; font-weight: 600; min-width: 72px; } .dock-item:hover { background: var(--bc-canvas); color: var(--bc-green-dark); text-decoration: none; } .dock-label { white-space: nowrap; } .dock-sheet { position: fixed; inset: 0; z-index: 70; } .dock-scrim { position: absolute; inset: 0; background: rgba(29, 45, 53, 0.32); border: 0; width: 100%; cursor: pointer; } .dock-sheet-card { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(560px, 100%); max-height: 70vh; overflow: auto; background: var(--bc-white); border: 1px solid var(--bc-border); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-pop); padding: var(--space-4); animation: dock-rise 0.18s ease-out; } @keyframes dock-rise { from { transform: translate(-50%, 24px); opacity: 0.6; } to { transform: translate(-50%, 0); opacity: 1; } } /* Theme-aware close (dark ink in light theme, light ink in dark theme) so it never disappears against the sheet surface; btn-quiet's blue would vanish. */ .dock-sheet-close { position: absolute; top: 10px; right: 10px; z-index: 1; color: var(--bc-ink-muted); } .dock-sheet-close:hover { color: var(--bc-ink); } /* Reserve room on the right so a panel-head action clears the close button. */ .dock-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); padding-right: var(--space-7); } .dock-panel-head h2 { margin: 0; font-size: 18px; } .dock-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .dock-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 8px 10px; border-radius: var(--radius); } .dock-row:hover { background: var(--bc-canvas); } .dock-row a { font-weight: 600; } .dock-overdue { color: var(--bc-red); font-weight: 700; } .dock-empty, .dock-loading { color: var(--bc-ink-muted); padding: var(--space-4) 0; } .dock-notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } .dock-note { border: 1px solid var(--bc-border); border-radius: var(--radius); padding: var(--space-3); background: var(--bc-yellow-soft); } /* The note swatches are fixed light pastels in every theme, so the text on them must stay dark - otherwise the dark theme flips `--bc-ink` to a light cream that vanishes against the paper (mirrors `--notes-ink-*` on the full page). */ .dock-note a { color: #1d2d35; display: block; } .dock-note strong { display: block; } .dock-note-body { color: rgba(29, 45, 53, 0.66); font-size: 13px; } .dock-note-pin { float: right; } .bookmark-btn.is-on { background: var(--bc-green); color: #fff; border-color: var(--bc-green); } .my-events, .bookmark-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .my-event-item, .bookmark-item { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .my-event-title, .bookmark-title { font-weight: 600; } .my-event-due { margin-left: auto; font-size: 14px; color: var(--bc-ink-muted); } .my-event-due.is-overdue { color: var(--bc-red); font-weight: 600; } .bookmark-meta { margin-left: auto; } .settings-card { display: block; margin-bottom: var(--space-4); } .settings-card label { display: block; font-weight: 600; margin: var(--space-3) 0 4px; } .settings-card input { width: 100%; padding: 10px 12px; border: 1px solid var(--bc-border); border-radius: var(--radius); font-size: 15px; } .settings-card button { margin-top: var(--space-4); } .business-companies { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: 6px; } @media (max-width: 720px) { .dock { gap: 0; } .dock-item { min-width: 0; flex: 1; padding: 6px 4px; } .dock-label { font-size: 11px; } .dock-notes { grid-template-columns: 1fr; } .mega-panel { width: calc(100vw - 24px); } .brand-word { display: none; } } /* ===== System banners (impersonation, read-only/suspended) ===== */ /* Full-bleed bars pinned above the app chrome. Token-driven, so they theme in light + dark for free. Rendered by partials/system_banners.ejs. */ .sysbanner { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) var(--space-4); font-size: 14px; line-height: 1.3; text-align: center; border-bottom: 1px solid transparent; } .sysbanner-msg { font-weight: 500; } .sysbanner-impersonate { background: var(--bc-info-soft); color: var(--bc-info-ink); border-bottom-color: var(--bc-info-soft-border); } .sysbanner-readonly { background: var(--bc-danger-soft); color: var(--bc-danger-ink); border-bottom-color: var(--bc-danger-soft-border); } .sysbanner-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; color: inherit; text-decoration: none; background: transparent; border: 1px solid currentColor; border-radius: 999px; } .sysbanner-btn:hover { background: rgba(0, 0, 0, 0.06); } /* Account switcher in the mega-menu (only shown when an identity belongs to 2+ businesses). */ .mega-switch { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3) 0 var(--space-2); margin-top: var(--space-2); border-top: 1px solid var(--bc-border); } .mega-switch-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bc-ink-muted); font-weight: 600; }