/* ============================================================ COMMAND CENTER — Blueprint design system · single entry point ------------------------------------------------------------ Link ONLY this file from a page; it pulls in the four verbatim design sources (ported 1:1 from claude.ai/design) and then applies the choices the design landed on: · JetBrains Mono everywhere (vendored, no CDN) · MONO accent (greyscale "signal" colour) · blueprint variant: 0 radius · hairline · grid + scanlines Theme/density live on (data-theme, data-density, data-scanlines); the blueprint variant lives on the root element (class "oh-root" + data-v="blueprint"). ============================================================ */ /* @import rules must come first. Order matters: later files override earlier. */ @import "theme.css"; /* reset · theme tokens · app shell · command palette */ @import "operhud.css"; /* 4 type sizes · variant system · bento home · HUD page · readouts */ @import "blocks.css"; /* bp-* components: buttons, inputs, table, kanban, modal, ... + gallery chrome */ @import "blocks2.css"; /* bp-* v2: overlays, charts, lists/trees, indicators, terminal */ /* ------------------------------------------------------------ VENDORED FONT — JetBrains Mono (latin subset, ~21KB/weight) ------------------------------------------------------------ */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/jetbrains-mono-400.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/jetbrains-mono-500.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/jetbrains-mono-600.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/jetbrains-mono-700.woff2") format("woff2"); } /* ------------------------------------------------------------ LOCKED CHOICES — one typeface, MONO accent (overrides theme.css) These come AFTER the @imports so they win the cascade. ------------------------------------------------------------ */ :root { /* the whole UI is one mono typeface — hierarchy comes from weight/colour/spacing/caps */ --sans: "JetBrains Mono", ui-monospace, monospace; --mono: "JetBrains Mono", ui-monospace, monospace; } /* MONO accent — greyscale "system signal", no glow (the blueprint look) */ :root, [data-theme="dark"] { --accent: oklch(0.78 0.006 240); --accent-2: oklch(0.70 0.02 240); --accent-ink: oklch(0.16 0.01 240); --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent); --accent-line: color-mix(in oklch, var(--accent) 38%, transparent); --glow: transparent; } [data-theme="light"] { --accent: oklch(0.46 0.01 240); --accent-2: oklch(0.40 0.02 240); --accent-ink: oklch(0.98 0.005 240); --accent-soft: color-mix(in oklch, var(--accent) 10%, transparent); --accent-line: color-mix(in oklch, var(--accent) 30%, transparent); --glow: transparent; } /* ------------------------------------------------------------ GLUE — bits the prototype did in JS/markup, done here in CSS ------------------------------------------------------------ */ /* the vendored icons render as inline (see web/icons.py). make them behave like the prototype's icon spans inside flex rows. */ .bpi-svg { display: inline-block; vertical-align: middle; flex: none; } /* live "pulse" indicators (oh-live, oh-rail-dot) reference this keyframe; it lived in a direction file the gallery never loaded, so define it here. */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* file-tree chevron rotates open (the prototype set this inline per-node; JS toggles .open on the caret instead). */ .bp-tree-cv.open > .bpi-svg { transform: rotate(90deg); transition: transform .14s ease; } /* select / dropdown caret rotation already handled by blocks.css via .open; keep the icon centred regardless of set. */ .bp-select-btn .cv, .bp-acc-h .cv { display: grid; place-items: center; } /* overlays must stay viewport-fixed wherever they sit in the tree. operhud.css's `.oh-root > *:not(.oh-grid-bg){position:relative}` (specificity 0,2,0) otherwise drops a scrim into the layout. This descendant rule matches that specificity and, declared later, wins — so a modal/drawer scrim works at any depth inside the root. */ .oh-root .bp-modal-scrim, .oh-root .bp-drawer-scrim { position: fixed; } /* Same trap for the notification tray (a direct child of .oh-root): the rule above forces it position:relative — dropping it into the shell grid as a flexible row that balloons to fill the slack a short page leaves, pushing the content far down — and z-index:1 (behind content). Restore the fixed, on-top placement it declares in blocks.css. (Its top/right offsets aren't clobbered.) */ .oh-root > .cc-notify { position: fixed; z-index: 250; } /* overlays are server-rendered into the DOM and revealed by JS (blocks.js) toggling [hidden]; [hidden] already means display:none, but be explicit so an open scrim lays out as designed. */ .bp-modal-scrim[hidden], .bp-drawer-scrim[hidden], .palette-scrim[hidden], .bp-menu[hidden], .bp-dd-menu[hidden], .bp-pop-card[hidden], .palette-item[hidden], .palette-group[hidden], [data-tab-panel][hidden], [data-tree-children][hidden], [data-filter-item][hidden] { display: none; } /* ------------------------------------------------------------ CONNECTOR SETTINGS — searchable checkbox pickers (project allow-list / label exclusion-list on /connectors/todoist). Token-only, no new look. ------------------------------------------------------------ */ .cc-pick-list { margin-top: 10px; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); padding: 6px; } .cc-pick-list .bp-choice { width: 100%; justify-content: flex-start; padding: 5px 7px; } .cc-pick-list .bp-choice:hover { background: var(--accent-soft); } .cc-pick-note { color: var(--text-2); font-size: var(--t4); margin-top: 8px; } .cc-pick-empty { color: var(--text-2); font-size: var(--t4); padding: 8px 4px; } .cc-pick-warn { grid-column: 1 / -1; } /* Landing-project single choice — native radios in the same list shell. */ .cc-pick-radio { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 7px; font-size: var(--t3); color: var(--text-1); cursor: pointer; } .cc-pick-radio:hover { background: var(--accent-soft); } .cc-pick-radio input[type="radio"] { accent-color: var(--accent); margin: 0; } .cc-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; } /* ------------------------------------------------------------ BREATHING ROOM — wider canvas + taller table rows by default, plus a real "comfy" density. data-density lives on ("compact" is the shell default; the top-bar toggle flips it to "comfy" and blocks.js persists the choice). theme.css's density tokens are barely consumed by the bp-* components, so the mode is applied here, at the high-traffic surfaces. ------------------------------------------------------------ */ .bp-content-inner { max-width: 1260px; } .bp-table th, .bp-table td { padding: 11px 12px; } [data-density="comfy"] .bp-content { padding: 34px 38px 90px; } [data-density="comfy"] .bp-spec { padding: 22px; } [data-density="comfy"] .oh-readout .oh-panel { padding: 18px 20px; } [data-density="comfy"] .bp-table th, [data-density="comfy"] .bp-table td { padding: 13px 14px; } [data-density="comfy"] .cc-target-row { padding: 12px 14px; } [data-density="comfy"] .cc-prompt-card { padding: 16px 18px; } [data-density="comfy"] .cc-prompt-grid { gap: 18px; } /* Clickable connector card (whole panel is the link). */ .cc-card-link { display: block; text-decoration: none; color: inherit; } .cc-card-link .cc-card { transition: border-color .14s ease, background .14s ease; } .cc-card-link:hover .cc-card { border-color: var(--accent); background: var(--accent-soft); } .cc-card-cue { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-size: var(--t4); text-transform: uppercase; letter-spacing: .08em; } .cc-card-link:hover .cc-card-cue { color: var(--accent); } /* Card-as-button via [data-card-href] (blocks.js): cards that contain interactive children (buttons, forms) can't be wrapped in an , so JS navigates instead. Same hover read. */ [data-card-href] { cursor: pointer; transition: border-color .14s ease, background .14s ease; } [data-card-href]:hover { border-color: var(--accent); background: var(--accent-soft); } [data-card-href]:hover .cc-card-cue { color: var(--accent); } /* Icon picker (icon_pick component): the chosen tile reads as selected. */ .cc-iconpick [data-icon-val].on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } /* "Saving…" overlay shown while a filter save re-syncs (blocks.js reveals it on submit). Scoped under .oh-root so it beats operhud's `.oh-root > *{position:relative}` (0,2,0) — otherwise the overlay drops into normal flow at the bottom of the page instead of covering it. */ .oh-root .cc-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: color-mix(in oklch, var(--bg-1) 92%, transparent); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .oh-root .cc-overlay[hidden] { display: none; } .cc-overlay-card { position: relative; min-width: 280px; padding: 26px 30px; text-align: center; border: 1px solid var(--line); background: var(--bg-2); } .cc-overlay-title { font-size: var(--t2); letter-spacing: .14em; } .cc-overlay-sub { color: var(--text-2); font-size: var(--t4); margin-top: 12px; animation: pulse 1.3s ease-in-out infinite; } .cc-overlay-bar { position: relative; height: 3px; margin-top: 16px; overflow: hidden; background: var(--line); } .cc-overlay-bar > span { position: absolute; top: 0; left: 0; height: 100%; width: 40%; background: var(--accent); animation: cc-indet 1.1s ease-in-out infinite; } @keyframes cc-indet { 0% { left: -40%; } 100% { left: 100%; } } /* ─── Page transitions — per-block "CRT power-cycle" + text fade ────────────────────────────── Instead of cycling the whole page, each MAIN BLOCK animates on its own. JS-driven (blocks.js) so the feedback is INSTANT on click, not deferred until the next page loads. · Bordered boxes (panels, tiles, cards…) → CRT power-cycle: collapse to a bright scanline on leave, power on by expanding from the line on arrival. blocks.js finds them by their computed border and keeps only the TOP-LEVEL ones, so a table inside a panel rides the panel (no recursion). Each box pivots about its OWN centre. The pinch is purely VERTICAL — no jitter. · Free text / titles (.oh-hero, .bp-sec-h) → a clean opacity FADE. (This used to be a glitch that shook the text side-to-side; that jitter is removed everywhere — nothing shakes now.) · The top bar and the grid background never animate — blocks.js only scans `.oh-root`'s content children, never `.bp-top` / `.oh-grid-bg`. blocks.js adds these classes per element. Durations are mirrored by the *_MS constants there. Tune the look in the keyframes below. Reduced-motion → no animation (and content shown at once). PERFORMANCE RULE for every keyframe here: animate ONLY transform / opacity / clip-path — these run on the compositor. No `filter` (it forced an extra render surface per box and ran on the main thread in some engines — the source of visible jank when a whole dashboard cycled at once). The collapse must END at opacity 0: with fill-mode `both` the element HOLDS its last frame until the next page actually arrives (network time included), so a visible end state lingered as a thin bright line across the screen. */ .cc-box-out { animation: cc-crt-out 160ms cubic-bezier(.55, 0, .9, .35) both; will-change: transform, opacity; } .cc-box-in { animation: cc-crt-in 260ms cubic-bezier(.16, .9, .2, 1) both; will-change: transform, opacity; } .cc-text-out { animation: cc-fade-out 140ms ease both; } .cc-text-in { animation: cc-fade-in 220ms ease both; } @keyframes cc-crt-out { 0% { transform: scaleY(1); opacity: 1; } 70% { transform: scaleY(.03); opacity: .85; } 100% { transform: scaleY(.002); opacity: 0; } /* fully off — nothing left behind */ } @keyframes cc-crt-in { 0% { transform: scaleY(.02); opacity: 0; } 18% { transform: scaleY(.08); opacity: 1; } /* the power-on line: visible for ~45ms, then... */ 100% { transform: scaleY(1); } /* ...rapid expansion (strong ease-out) */ } /* Text fade — pure opacity, NO transform/skew/clip. The old version slice-shifted the text side-to-side ("jitter"); that's intentionally gone so titles just fade with the boxes. */ @keyframes cc-fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes cc-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } /* Flash guard: keep animated content hidden until blocks.js has tagged it for the power-on, so nothing shows un-animated for a frame. `.cc-prep` is set pre-paint by the inline script and removed by blocks.js (or its own failsafe timer if JS never runs). The persistent top-bar controls (brand, Home link, search, theme, logout AND the breadcrumb) and the grid stay shown — only the page meta (`.bp-top-meta`) is hidden alongside the main content so it fades in with everything else, while those controls read as static across the navigation. The crumb used to be hidden + faded here too, but clicking an ancestor (A>B>C → B) then animated the whole crumb out and the new one in — rusty; it now swaps instantly like the other persistent controls. */ .cc-prep .oh-root > *:not(.bp-top):not(.oh-grid-bg), .cc-prep .bp-top-meta { visibility: hidden; } /* ─── Tables — their own, calmer treatment (NOT the CRT pinch) ──────────────────────────────── A big table under the CRT scaleY pinch jitters and distorts badly — the motion is far more visible on a tall grid than on a compact panel. So any block that IS or CONTAINS a `.bp-table` opts out of `cc-box-*`/`cc-text-*` and uses these instead (blocks.js routes it). The look: a top-down "scanline reveal" — the rows wipe in from the top edge, no horizontal shift and no vertical squash. This drives BOTH the page transition (leave/arrive) AND in-place data refreshes (show/hide completed, post-sync), so every table — now and future — animates the same way. Durations mirrored by the *_MS constants in blocks.js. Same compositor-only + end-at-opacity-0 rules as the CRT keyframes above. */ .cc-table-out { animation: cc-table-out 160ms cubic-bezier(.55, 0, .9, .35) both; transform-origin: top center; will-change: clip-path, opacity; } .cc-table-in { animation: cc-table-in 260ms cubic-bezier(.16, .9, .2, 1) both; transform-origin: top center; will-change: clip-path, opacity; } @keyframes cc-table-out { 0% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 94% 0); } } @keyframes cc-table-in { 0% { opacity: 0; clip-path: inset(0 0 94% 0); } 35% { opacity: 1; } 100% { opacity: 1; clip-path: inset(0 0 0 0); } } /* In-place refresh "busy" state — a region whose data is being re-fetched (blocks.js adds it during the fetch, then swaps the new HTML in under cc-table-in / a skeleton fade). Dim + lock clicks so a stale table reads as pending without collapsing the layout. The side widgets instead show skeleton placeholders (the `skeleton` component markup, injected by blocks.js) during their fetch. */ .cc-busy { opacity: .5; pointer-events: none; transition: opacity .14s ease; } .cc-region { position: relative; } .cc-skel-fade { animation: cc-frag-in 260ms cubic-bezier(.16, .9, .2, 1) both; transform-origin: top; } /* In-page fragment swaps (skeleton → loaded content) keep using document.startViewTransition in blocks.js, tagged `view-transition-class: cc-frag` — a quick power-on echo, scoped to the box. */ @keyframes cc-frag-out { to { opacity: 0; } } @keyframes cc-frag-in { from { opacity: 0; transform: scaleY(.6); } to { opacity: 1; transform: scaleY(1); } } /* ─── Target rows — a target as its own block (goal cards + goal detail) ───────────────────── Label + window caption on the head line, then the bar line: progress (flex) + the "+1" button. The caption no longer shares the bar's row, so every bar in a list is the SAME width. `.cc-target-row` is excluded from box detection in blocks.js (CONTROL_SEL) — these are row furniture, not panels; they ride their container (or fade) instead of CRT-pinching one by one. */ .cc-target-row { border: 1px solid var(--line-soft); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .cc-target-head { display: flex; align-items: baseline; gap: 10px; } .cc-target-label { flex: 1; min-width: 0; font-size: var(--t3); font-weight: 600; color: var(--text); overflow-wrap: anywhere; } .cc-target-cap { font-size: var(--t4); color: var(--text-2); white-space: nowrap; } .cc-target-bar { display: flex; align-items: center; gap: 10px; } .cc-target-bar > .bp-progress { flex: 1; min-width: 0; } /* Hover-revealed card action (e.g. the Edit button on a goal card): invisible until the card is hovered or the control is keyboard-focused, so the cap stays quiet. */ .oh-panel .cc-hover-action { opacity: 0; transition: opacity .14s ease; } .oh-panel:hover .cc-hover-action, .oh-panel:focus-within .cc-hover-action { opacity: 1; } /* Watch-list prompt cards — the dashboard's dedicated section (one bordered card per light). */ .cc-prompt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; align-items: start; margin-bottom: 22px; } .cc-prompt-card { position: relative; border: 1px solid var(--line); background: var(--oh-panel-bg, var(--bg-1)); padding: 13px 15px; display: flex; flex-direction: column; gap: 9px; } .cc-prompt-title { font-size: var(--t3); font-weight: 600; color: var(--text); } .cc-prompt-body { font-size: var(--t4); color: var(--text-2); line-height: 1.5; } /* Voice journal (/journal + /journal/capture) — the captain's log. The recorder fills the viewport: the page → panel → stage chain is a flex column, the scope grows so the waveform's centreline sits mid-screen, and the transcript is a full-height read-only terminal (bp-term clothes, no input). The REC light pulses with opacity only (motion perf rule). */ .cc-journal-page { display: flex; flex-direction: column; padding-bottom: 26px; } .cc-journal-page .bp-content-inner { flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; } .cc-journal-page .oh-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; } .cc-journal-stage { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: stretch; } @media (max-width: 900px) { .cc-journal-stage { grid-template-columns: 1fr; } } .cc-journal-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; } .cc-journal-scope { position: relative; flex: 1; min-height: 220px; border: 1px solid var(--line-soft); background: var(--bg-2); } .cc-journal-scope canvas { display: block; width: 100%; height: 100%; } .cc-journal-status { display: flex; align-items: center; gap: 14px; font-size: var(--t4); color: var(--text-2); letter-spacing: .08em; text-transform: uppercase; flex: none; } .cc-journal-status #journal-state { color: var(--text); font-weight: 600; } .cc-journal-rec { width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); flex: none; } .cc-journal-rec.is-live { background: oklch(62% .19 25); animation: cc-rec-pulse 1.4s ease-in-out infinite; } @keyframes cc-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } .cc-journal-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: none; } .cc-journal-hint { font-size: var(--t4); color: var(--text-2); } .cc-journal-hint kbd { font-size: 10px; border: 1px solid var(--line); padding: 1px 5px; } @media (pointer: coarse) { .cc-journal-hint { display: none; } } .cc-journal-error { font-size: var(--t3); color: var(--text); border: 1px solid var(--line); border-left: 2px solid oklch(62% .19 25); padding: 10px 12px; flex: none; } .cc-journal-term { min-height: 0; height: 100%; } .cc-journal-term .bp-term-body { max-height: none; } .cc-journal-feed { color: var(--text); } .cc-journal-lost { color: var(--text-2); font-size: var(--t4); } .cc-journal-prose { margin: 0; font-size: var(--t3); line-height: 1.7; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; } .cc-journal-card { cursor: pointer; } /* Typed-entry (keyboard) path — the quick-write box (/journal) + the Write stage (/journal/capture). .bp-seg only styles