/* THE POST CARDS SHEET at /design/post-cards (design/post_cards.js). The scaffolding only: the cards are the post card wearing its own classes, and what is here lays them out and draws the frames they sit in. ROOTED AT .ob-pcsheet, and every class under it starts pc-. This file is in the frontend bundle and loads on every page, so a bare class here would land on the product too (the collision okaybot.css records). */ .ob-pcsheet { max-width: 1480px; margin: 0 auto; padding: 32px 28px 80px; font-family: var(--ob-font); color: var(--ob-ink); background: var(--ob-canvas); /* the widths the state grid and its header share: the label, then the three presets in the proportions they are drawn at in the product */ --pc-cols: 190px minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.5fr); code { font-family: var(--ob-mono); font-size: 11.5px; font-weight: 500; color: var(--ob-ink-2); background: var(--ob-card); border: 1px solid var(--ob-line); border-radius: 5px; padding: 0 5px; text-transform: none; letter-spacing: 0; } .pc-head { margin-bottom: 32px; } .pc-back { font-size: 12.5px; font-weight: 700; color: var(--ob-muted); text-decoration: none; } .pc-back:hover { color: var(--ob-accent-ink); } .pc-head .ob-title { margin: 8px 0 8px; } .pc-sub { margin: 0; max-width: 80ch; font-size: 13.5px; line-height: 1.55; color: var(--ob-muted); } .pc-sec { margin-bottom: 48px; } .pc-fname { display: flex; align-items: center; gap: 8px; } .pc-fname b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; } .pc-where { font-size: 12px; font-weight: 700; line-height: 1.45; color: var(--ob-ink-2); } .pc-what { font-size: 12.5px; line-height: 1.5; color: var(--ob-muted); } .pc-flags { font-family: var(--ob-mono); font-size: 11px; line-height: 1.5; color: var(--ob-faint-1); } /* ---- the card and its switches ---- */ .pc-one { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--ob-card); border: 1px solid var(--ob-line); border-radius: var(--ob-radius); } .pc-onehead { display: flex; flex-direction: column; gap: 8px; max-width: 80ch; } .pc-onectl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; } .pc-ctlset { display: flex; align-items: center; gap: 10px; } .pc-ctlname { font-size: 12px; font-weight: 700; color: var(--ob-muted); } /* one card per look, at the width the chosen size has in the product */ .pc-onerow { display: grid; grid-template-columns: repeat(auto-fill, 190px); gap: 22px 18px; align-items: start; padding: 14px; border-radius: 12px; background: var(--ob-canvas); } .pc-onerow[data-size="sm"] { grid-template-columns: repeat(auto-fill, 210px); } .pc-onerow[data-size="md"] { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } /* ---- where each preset is drawn ---- */ .pc-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; } .pc-format { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; background: var(--ob-card); border: 1px solid var(--ob-line); border-radius: var(--ob-radius); } /* the cards stand on the page's grey inside the white tile, because that is the ground they are drawn on in the product and the rail's cards are rimmed in it */ .pc-samples { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; padding: 12px; border-radius: 12px; background: var(--ob-canvas); } /* ---- every state ---- */ .pc-cols, .pc-line { display: grid; grid-template-columns: var(--pc-cols); gap: 18px; } .pc-cols { position: sticky; top: 0; z-index: 60; padding: 10px 0; background: var(--ob-canvas); border-bottom: 1px solid var(--ob-line); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-muted); span { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; } } .pc-group { display: flex; align-items: center; gap: 10px; margin: 30px 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--ob-line); font-size: 12.5px; color: var(--ob-muted); code { font-size: 12.5px; font-weight: 700; color: var(--ob-ink); } } /* the tone, as the calendar's legend draws it */ .pc-swatch { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; } .pc-swatch.wait { background: var(--ob-butter-bg); box-shadow: inset 0 0 0 1px var(--ob-butter-edge); } .pc-swatch.going { background: var(--ob-card); box-shadow: inset 0 0 0 1.5px var(--ob-accent-ring); } .pc-swatch.held { background: var(--ob-card); box-shadow: inset 0 0 0 1.5px var(--ob-butter-ink); } .pc-swatch.went { background: var(--ob-mint-bg); } .pc-swatch.gone { background: var(--ob-card); box-shadow: inset 0 0 0 1px var(--ob-grey-edge); } .pc-swatch.stop { background: var(--ob-rose-bg); } .pc-line { align-items: start; padding: 14px 0; border-bottom: 1px dashed var(--ob-line); } .pc-label { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .pc-label b { font-size: 13.5px; font-weight: 800; } .pc-word { font-size: 12px; font-weight: 600; color: var(--ob-ink-2); } .pc-aside { font-size: 11.5px; line-height: 1.4; color: var(--ob-muted); } /* ---- a frame of cards ---- */ .pc-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .pc-note { font-size: 11px; font-weight: 600; line-height: 1.4; color: var(--ob-muted); } .pc-never { display: flex; align-items: center; min-height: 30px; padding: 6px 10px; border: 1.5px dashed var(--ob-line); border-radius: 10px; font-size: 11.5px; font-weight: 600; line-height: 1.4; color: var(--ob-faint-1); } /* one cell of the month: the real .ob-cal .cell, without the grid's fixed row height */ .pc-month { border-radius: 12px; } .pc-month .cell { border: 0; } /* a stretch of the rail: the real .ob-calrail, only as tall as it is told, so a card is placed down it by its top exactly as on a day. The tall one draws the hour lines */ .ob-calrail.pc-rail { position: relative; height: var(--pc-h, 30px); overflow: visible; } .ob-calrail.pc-rail.tall { border-radius: 8px; background: repeating-linear-gradient(to bottom, transparent 0 37px, var(--ob-line) 37px 38px); } } body:not(.ob-app) .ob-pcsheet { min-height: 100vh; } /* the medium tier takes the places a column narrower; the grid of states keeps its columns */ @media (max-width: 1599px) { .ob-pcsheet .pc-formats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ob-pcsheet { --pc-cols: 150px minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.4fr); } } /* The atom sheet's own scaffolding: a canvas page that lays the atoms out in rows. Nothing here is a product class; the atoms carry their own. ITS ROOT IS .ob-atomsheet, NOT .ob-sheet (2026-09-23). This file is in the frontend bundle, so it loads on every page, and .ob-sheet is also the homepage's two comparison boxes (marketing.html, okaybot-site.css). The auto margins here shrank both boxes to their own widths, and the min-height below made each one a whole screen tall for anyone signed out. */ .ob-atomsheet { max-width: 1080px; margin: 0 auto; padding: 40px 28px 80px; font-family: var(--ob-font); color: var(--ob-ink); background: var(--ob-canvas); .ob-sheet-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 30px; } .ob-sheet-sec { margin-bottom: 34px; } .ob-sheet-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ob-sheet-row.wide { gap: 18px; } .ob-sheet-row.ramp { gap: 26px; } .ob-sheet-row.ramp .amt { font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .ob-sheet-row.ramp .c1 { color: var(--ob-c1); font-weight: var(--ob-c1-w); } .ob-sheet-row.ramp .c2 { color: var(--ob-c2); font-weight: var(--ob-c2-w); } .ob-sheet-row.ramp .c3 { color: var(--ob-c3); font-weight: var(--ob-c3-w); } .ob-sheet-row.ramp .c4 { color: var(--ob-c4); font-weight: var(--ob-c4-w); } .ob-sheet-row.ramp .c5 { color: var(--ob-c5); font-weight: var(--ob-c5-w); } .ob-sheet-row.ramp .cx { color: var(--ob-cx); font-weight: var(--ob-cx-w); text-decoration: line-through; text-decoration-thickness: 1.5px; } /* every harness mark, at the two sizes that decide whether it works: the card and the rail */ .glyphs { display: flex; flex-wrap: wrap; gap: 8px; } .glyphs .one { width: 104px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px 10px; border-radius: 12px; background: var(--ob-card); border: 1px solid var(--ob-line); } .glyphs .pair { display: flex; align-items: center; gap: 7px; } .glyphs .nm { font-size: 10px; line-height: 1.3; color: var(--ob-muted); text-align: center; } .swatches { display: flex; flex-wrap: wrap; gap: 8px; } .sw { width: 84px; height: 56px; border-radius: 12px; display: flex; align-items: flex-end; padding: 6px 8px; font-size: 11px; font-weight: 700; } } body:not(.ob-app) .ob-atomsheet { min-height: 100vh; } /* * Shift Design System - Form Controls * Labels * * Requires: shift-core.css (tokens) */ /* ============================================ LABELS ============================================ */ /* Labels - Friendly */ .label { display: block; margin-bottom: var(--spacing-2); font-size: var(--font-sm); font-weight: var(--font-bold); color: var(--text-primary); } /* * Shift Design System - Cards * Use sparingly - only for truly grouped content * * Requires: shift-core.css (tokens) */ /* ============================================ CARDS - Use Sparingly! Only for truly grouped content ============================================ */ .card { position: relative; background: var(--bg-surface); border-radius: var(--radius-2xl); padding: var(--spacing-6); box-shadow: var(--shadow-md); } /* * Shift Design System - Buttons * Friendly, pill-shaped, bouncy buttons * * Requires: shift-core.css (tokens) */ /* ============================================ BUTTONS - Friendly and Bouncy ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2); height: var(--button-height-md); padding: 0 var(--spacing-6); border: none; border-radius: var(--radius-full); /* Pill shaped! */ font-family: inherit; font-size: var(--font-sm); font-weight: var(--font-semibold); line-height: 1; cursor: pointer; transition: all var(--duration-fast) var(--easing-bounce); transform: translateY(0); position: relative; overflow: hidden; } .btn:active:not(:disabled) { transform: translateY(-1px) scale(0.98); } .btn:focus-visible { outline: var(--focus-ring-width) solid var(--accent-primary); outline-offset: var(--focus-ring-offset); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-xs { height: var(--button-height-xs); padding: 0 var(--spacing-3); font-size: var(--font-xs); } .btn-sm { height: var(--button-height-sm); padding: 0 var(--spacing-4); font-size: var(--font-sm); } .btn-primary { background: var(--action-primary-bg); color: var(--action-primary-text); box-shadow: var(--shadow-sm); } .btn-primary:hover:not(:disabled) { background: var(--action-primary-bg-hover); } .btn-primary:active:not(:disabled) { background: var(--action-primary-bg-active); box-shadow: var(--shadow-xs); } .btn-secondary { background: var(--action-secondary-bg); color: var(--action-secondary-text); border: none; box-shadow: 0 0 28px var(--action-secondary-glow) inset; } .btn-secondary:hover:not(:disabled) { background: var(--action-secondary-bg-hover); } .btn-secondary:active:not(:disabled) { background: var(--action-secondary-bg-active); } .brand { display: flex; align-items: center; gap: var(--spacing-3); position: relative; z-index: 1; } /* ============================================================ Legal Long-form prose pages (/terms, /privacy) whose body is markdown rendered to HTML by the Md module. The prose itself is .ob-prose.legal, styled by element in okaybot-site.css; this is only the column's width and its foot. ============================================================ */ .legal { max-width: 46rem; padding-bottom: var(--spacing-24); } /* ============================================================ Site Footer Faint legal links pinned to the bottom of the viewport. #Main is absolutely positioned and fills the viewport, so a footer in normal flow would never be visible. This one is fixed instead, and stays click-through except on the links themselves so it can never intercept a click meant for the page underneath. ============================================================ */ .site-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; /* above body::before (0) */ display: flex; justify-content: center; align-items: center; gap: var(--spacing-2); padding: var(--spacing-4); font-size: var(--font-xs); color: var(--text-tertiary); pointer-events: none; /* the bar itself never blocks the page */ } .site-footer a { pointer-events: auto; /* but the links are still clickable */ color: inherit; text-decoration: none; opacity: 0.75; padding: var(--spacing-1) var(--spacing-1); border-radius: var(--radius-sm); transition: opacity var(--duration-fast) var(--easing-default), color var(--duration-fast) var(--easing-default); } .site-footer a:hover { opacity: 1; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; } .site-footer a:focus-visible { opacity: 1; outline: var(--focus-ring-width) solid var(--accent-500); outline-offset: 2px; } .site-footer span { opacity: 0.5; } /* * Playful Design System v2 - Core * "Delightfully Simple" - More playful, less busy * * Key Philosophy Changes from v1: * - Forms don't need cards - let them breathe on the page * - Use whitespace and typography for hierarchy, not borders * - Add personality through illustrations and micro-animations * - Warmer, softer colors with playful gradients * - More conversational, fun microcopy encouraged * - Subtle decorative elements (blobs, gradients, doodles) * * Component stylesheets (import alongside this file): * buttons.css - .btn, sizes xs and sm, primary and secondary * forms.css - .label * cards.css - .card * brand.css - .brand * * Pruned to what is drawn on 2026-09-24: the product has its own sheets (okaybot-*.css), and * what is left here is the base styles, the tokens they read, and the handful of classes the * /design test pages and a few product templates still use. */ /* ============================================ CORE TOKENS ============================================ */ :root { /* Typography - Font Family (System fonts for best cross-platform rendering) */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: 'Fira Code', JetBrains Mono, Consolas, monospace; /* Typography - Font Size (Generous, readable) */ --font-xs: 0.75rem; --font-sm: 0.875rem; --font-base: 1rem; --font-lg: 1.125rem; --font-xl: 1.25rem; --font-2xl: 1.5rem; --font-3xl: clamp(1.75rem, 1.5rem + 1vw, 2rem); --font-4xl: clamp(2rem, 1.5rem + 1.5vw, 2.5rem); /* Typography - Font Weight */ --font-regular: 400; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* Typography - Line Height */ --leading-tight: 1.2; --leading-normal: 1.6; /* Typography - Letter Spacing */ --tracking-tighter: -0.02em; --tracking-tight: -0.01em; /* Colors - Super Warm Neutrals (cream/ivory base) */ --neutral-0: #ffffff; --neutral-200: #ebe7e0; --neutral-300: #ddd7cd; --neutral-400: #b5ada1; /* Warm taupe */ --neutral-600: #635d56; --neutral-700: #4a453f; --neutral-900: #1f1c19; /* Colors - Delight (Peachy coral - super friendly!) */ --delight-50: #fff5f0; --delight-600: #e85a2a; /* Colors - Soft Status Colors (pastel-ish, friendly) */ --info-100: #e0f2fe; --info-500: #0ea5e9; /* Sky blue */ /* Spacing */ --spacing-1: 0.25rem; --spacing-2: 0.5rem; --spacing-3: 0.75rem; --spacing-4: 1rem; --spacing-6: 1.5rem; --spacing-8: 2rem; --spacing-24: 6rem; /* Radius - Super Round and Friendly */ --radius-sm: 0.5rem; /* 8px */ --radius-2xl: 2rem; /* 32px */ --radius-full: 9999px; /* Shadows - Soft, diffused, friendly */ --shadow-xs: 0 0 3px 0 rgb(31 28 25 / 0.04); --shadow-sm: 0 0 8px -2px rgb(31 28 25 / 0.08); --shadow-md: 0 0 20px -4px rgb(31 28 25 / 0.1); --shadow-lg: 0 0 25px -5px rgb(31 28 25 / 0.11); /* Motion - Bouncy and Fun */ --duration-fast: 150ms; --easing-default: cubic-bezier(0.4, 0, 0.2, 1); --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Focus */ --focus-ring-width: 3px; --focus-ring-offset: 3px; /* ============================================ ACCENT ============================================ */ /* Warm Violet - Vibrant & modern */ --accent-50: #f5f3f9; --accent-100: #ebe5f3; --accent-200: #d4c8e6; --accent-300: #b8a4d4; --accent-400: #9a7ec0; --accent-500: #7c5dac; --accent-600: #6b4d9a; /* Primary */ --accent-700: #5a4082; --accent-800: #4a3469; /* ============================================ SEMANTIC TOKENS ============================================ */ /* Background - Warmer page background */ --bg-surface: var(--neutral-0); /* Text */ --text-primary: var(--neutral-900); --text-secondary: var(--neutral-600); --text-tertiary: var(--neutral-400); --text-link: var(--accent-600); --text-link-hover: var(--accent-700); /* Accent (Semantic) */ --accent-primary: var(--accent-600); --accent-hover: var(--accent-700); --accent-active: var(--accent-800); --accent-contrast: var(--neutral-0); /* Actions (Buttons) */ --action-primary-bg: var(--accent-primary); --action-primary-bg-hover: var(--accent-hover); --action-primary-bg-active: var(--accent-active); --action-primary-text: var(--accent-contrast); --action-secondary-bg: #e7e6ea; --action-secondary-bg-hover: #d8d6de; --action-secondary-bg-active: #cbc8d3; --action-secondary-glow: #d8d5e4; --action-secondary-text: var(--neutral-700); /* Component Sizing */ --button-height-xs: 1.75rem; --button-height-sm: 2.25rem; --button-height-md: 2.75rem; /* ============================================ THEME TOKENS (formerly in _default-theme.css) ============================================ */ /* Canvas */ --canvas-bg: #f7f7f7; --table-header-border: rgba(90, 90, 180, 0.10); /* Focus & Interactive */ --interactive-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 35%, transparent); } /* ============================================ BASE STYLES ============================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--font-base); font-weight: var(--font-regular); line-height: var(--leading-normal); color: var(--text-primary); background: var(--canvas-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Soft glowing gradient background */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient( ellipse 120% 60% at 20% 95%, rgba(230, 210, 235, 0.45) 0%, transparent 60% ), radial-gradient( ellipse 100% 50% at 80% 95%, rgba(255, 220, 210, 0.40) 0%, transparent 55% ), radial-gradient( ellipse 80% 40% at 50% 95%, rgba(255, 200, 220, 0.35) 0%, transparent 50% ), linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(250, 245, 250, 0.4) 70%, rgba(245, 240, 248, 0.6) 100% ); } /* The page's one region, still under the 4rem the scaffold's top menu bar took. body.ob-app and body.ob-site each place it their own way (okaybot-page.css, okaybot-site.css), so this is only what a signed-out page outside the site sees - the /design pages. */ #Main { margin-top: 4rem; position: absolute; bottom: 0; top: 0; left: 0; right: 0; } /* ============================================ SCROLLBAR - Always visible, custom styled ============================================ */ html { overflow-y: scroll; scrollbar-color: var(--neutral-300) transparent; scrollbar-width: thin; } /* Webkit browsers (Chrome, Safari, Edge) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* ============================================ TYPOGRAPHY ============================================ */ h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--font-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text-primary); } h1 { font-size: var(--font-4xl); font-weight: var(--font-extrabold); letter-spacing: var(--tracking-tighter); } h2 { font-size: var(--font-3xl); font-weight: var(--font-bold); } h3 { font-size: var(--font-2xl); } h4 { font-size: var(--font-xl); } h5 { font-size: var(--font-lg); } h6 { font-size: var(--font-base); font-weight: var(--font-semibold); } p { margin: 0; } a { color: var(--text-link); text-decoration: none; text-underline-offset: 3px; transition: color var(--duration-fast) var(--easing-default); } a:hover { color: var(--text-link-hover); text-decoration: underline; } /* ============================================ ANIMATIONS - Playful ============================================ */ @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); } 20%, 40%, 60%, 80% { transform: translateX(4px); } } .shake { animation: shake 0.4s var(--easing-default); } /* ============================================ UTILITY CLASSES ============================================ */ /* Text Colors */ .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } /* Font Sizes */ .text-sm { font-size: var(--font-sm); } /* Layout Containers */ .page { max-width: 1000px; margin: 0 auto; padding: var(--spacing-8); } /* Flex Layouts */ .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-4); } .stack { display: flex; flex-direction: column; gap: var(--spacing-4); } /* Grid Layouts */ .grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing-6); } /* Light Label */ .label-light { font-size: var(--font-xs); font-family: var(--font-mono); color: var(--text-tertiary); } /* Cards */ .card { border-bottom-color: var(--table-header-border); } /* Focus Ring (Buttons / Interactive) */ .btn:focus-visible { outline: none; box-shadow: var(--interactive-focus-ring); } /* ============================================ OKAYBOT TOKENS Every value from design.md section 2, as custom properties. The scaffold's _shift-core.css keeps its own token set for the marketing pages; the product's screens use these and only these. Component files (okaybot-*.css) never carry a literal colour, size or radius. ============================================ */ :root { /* ---- surfaces ---- */ --ob-canvas: #f3f4f7; /* the page, the sidebar's money block, muted chips */ --ob-canvas-2: #f5f6f9; /* read tiles */ --ob-card: #ffffff; /* every card, the sidebar */ --ob-card-head: #f9fafc; /* an approval card's header: a shade off the card, well short of the canvas */ --ob-line: #e8eaf0; /* card borders, the sidebar's right edge, gridlines, the rail line, bar tracks */ --ob-line-card: #e9ebf1; /* feed cards */ --ob-line-in: #eef0f4; /* dividers inside a card */ --ob-line-chip: #eceef3; /* the rim chip's border and separator */ /* ---- ink ---- */ --ob-ink: #16181d; /* titles, body, the loudest cost, the Approvals count */ --ob-ink-2: #5f6472; /* nav labels, descriptions, quoted reasons */ --ob-muted: #9a9fad; /* meta, section labels, times, handles, inactive icons */ --ob-faint-1: #bcc1cc; /* the quietest cost */ --ob-faint-2: #c5c8d2; /* frozen bars, struck costs */ --ob-faint-3: #ccd0d9; /* chevrons */ /* ---- the one accent ---- */ --ob-accent: #4f66f0; /* primary buttons, the active nav icon, money bars with room, the logo */ --ob-accent-ink: #3547c9; /* active nav text */ --ob-accent-bg: #e9edff; /* active nav background, the lit rail child */ --ob-accent-ring: #c9d1fb; /* the border of the one card asking to be answered */ --ob-accent-lift: #6376f3; /* hovering something already selected in the accent: the same blue, a shade up */ --ob-accent-halo-0: rgba(79, 102, 240, 0); /* ...and its halo, at rest */ --ob-accent-halo-1: rgba(79, 102, 240, .13); /* ...and at the top of its breath */ /* ---- a read waiting for a person (2026-09-25) ---- THE BLUE IS FOR WRITES. Most people will ask to okay only what goes out to X, and a post among a column of reads should stand out by colour before a word is read - so a read waiting to be answered wears a muted blue: its edge, its chip and its button. A trial: these values are the whole of it (slate #3d4350 and grey #6b7080 were tried first). */ --ob-read: #64739a; /* a read's button, and its edge when it is the one breathing */ --ob-read-lift: #56648a; /* ...hovered */ --ob-read-ink: #4b5a80; /* the words on a read's chip */ --ob-read-bg: #ebeef6; /* the chip's ground */ --ob-read-ring: #d2d8e8; /* the edge of a read waiting to be answered */ --ob-read-halo-0: rgba(100, 115, 154, 0); /* its halo, at rest */ --ob-read-halo-1: rgba(100, 115, 154, .12); /* ...and at the top of its breath */ /* ---- state tints: a state tints the whole card and its chip ---- */ --ob-butter-bg: #fff3cf; --ob-butter-ink: #8a5a00; /* waiting for a person */ --ob-rose-bg: #ffe4e6; --ob-rose-ink: #b91c1c; /* destructive, blocked */ --ob-rose-halo-0: rgba(185, 28, 28, 0); /* a destructive frame's halo, at rest */ --ob-rose-halo-1: rgba(185, 28, 28, .11); /* ...and at the top of its breath */ --ob-rose-card: #fff1f2; --ob-rose-edge: #f6d7da; --ob-rose-line: #f4d9dc; --ob-rose-chip: #f5d2d6; --ob-mint-bg: #d9f5e5; --ob-mint-ink: #157347; /* done, published, active, enabled */ --ob-mint-edge: #6cc596; /* the dashed edge of a post a person posted themselves */ --ob-butter-edge: #f2e2b0; /* ...and the edge of a butter card, on the calendar */ --ob-accent-tint: #fbfbff; /* today's cell on the month grid, barely there under its ring */ --ob-cal-out: #e9ebf1; --ob-cal-out-line: #e1e4eb; /* another month's days: a plainly greyer ground, so the month has an edge */ --ob-grey-bg: #f3f4f7; --ob-grey-ink: #5f6472; /* frozen, the Posts count */ --ob-grey-edge: #d9dce4; /* the edge of a deleted post's white card: grey-bg is the canvas, so it cannot be its ground */ --ob-bar-red: #ef4444; /* a money bar past 80 percent */ --ob-chart-period: rgba(79, 102, 240, .055); /* the plan's period on the Usage chart, from the moment it started */ --ob-live: #22c55e; /* the dot beside Live */ /* ---- the cost ramp: ink and weight carry the size of the number ---- */ --ob-c1: #bcc1cc; --ob-c1-w: 600; --ob-c2: #9a9fad; --ob-c2-w: 600; --ob-c3: #6f7585; --ob-c3-w: 700; --ob-c4: #3d4350; --ob-c4-w: 800; --ob-c5: #16181d; --ob-c5-w: 800; --ob-cx: #c5c8d2; --ob-cx-w: 600; /* ---- identity tints: a slot per agent or profile, stored as a number on the row. bg is the pale ground of a circle or an untinted square, fg a letter or a mark on it, chart the colour that slot wears in a chart, solid the deep ground an agent's square stands on ---- THE CHART COLOURS ARE LIGHT AND DEEP (2026-09-25). Two charts on the Usage page carry an agent - the stacked day chart and the BY AGENT bars - and an agent keeps its colour on both, so neither needs a legend. They were a pastel wash until 2026-09-12, then strong mid-tones, and the mid-tones glared: often more saturated than the agent's own face, and all at one lightness, so a stack told its agents apart by hue alone. Green (slot 3) and red (slot 4) were then the same colour to a red-green colour-blind reader, OKLab delta E 1.5 against a target of 8. So each is worked out from the slot's own hue, read off its solid, in OKLCH: L = 0.66 + 0.12 * cos(hue - 130deg), C = 0.12 Strength is a quarter down on what it was, and the lightness follows the hue: greens, limes and ambers sit lighter, purples, reds and magentas deeper. That lightness gap is what keeps the first four agents apart for a colour-blind reader (delta E 9.1, and 15.3 in normal vision). The black person's slot is a neutral, oklch(0.56 0.03 267). The lab that chose it: https://claude.ai/artifact/TARmZyTwjpArfe8YZ5vtTr A formula on hue alone means a family's later outings land close to its first: slot 12's blue is near slot 5's. A workspace has to reach eleven agents to see it. Change a solid below and work its chart value out again from that formula. They stay louder than the charge colours: an agent is a who, a charge type is a what, and the two breakdowns sit side by side. */ --ob-t1-bg: #16181d; --ob-t1-fg: #ffffff; --ob-t1-chart: #6c7487; /* black person */ --ob-t2-bg: #e9d5ff; --ob-t2-fg: #6b21a8; --ob-t2-chart: #7e5ba7; /* purple base */ --ob-t3-bg: #bfead1; --ob-t3-fg: #076a45; --ob-t3-chart: #65ca98; /* green base */ --ob-t4-bg: #fecdd3; --ob-t4-fg: #9f1239; --ob-t4-chart: #bf616d; /* red base */ --ob-t5-bg: #b9e5fd; --ob-t5-fg: #036285; --ob-t5-chart: #2396c6; /* blue base */ --ob-t6-bg: #eddcb4; --ob-t6-fg: #6f5603; --ob-t6-chart: #cdaa4b; /* amber base */ --ob-t7-bg: #dcd9ff; --ob-t7-fg: #4338ca; --ob-t7-chart: #636cba; /* indigo base */ --ob-t8-bg: #d6e5bc; --ob-t8-fg: #4c6306; --ob-t8-chart: #a7c46c; /* lime base */ --ob-t9-bg: #f9d0ea; --ob-t9-fg: #912576; --ob-t9-chart: #a05589; /* magenta base */ --ob-t10-bg: #b6ece2; --ob-t10-fg: #0f766e; --ob-t10-chart: #27bfb2; /* teal base */ --ob-t11-bg: #fdd4bc; --ob-t11-fg: #8a4306; --ob-t11-chart: #d4844f; /* orange base */ --ob-t12-bg: #b4ddff; --ob-t12-fg: #034871; --ob-t12-chart: #388bc6; /* blue deep */ --ob-t13-bg: #e1d9a8; --ob-t13-fg: #4e4400; --ob-t13-chart: #c4b452; /* amber deep */ --ob-t14-bg: #cfd4fe; --ob-t14-fg: #3926a3; --ob-t14-chart: #666ab8; /* indigo deep */ --ob-t15-bg: #c5e2b8; --ob-t15-fg: #255003; --ob-t15-chart: #94c97a; /* lime deep */ --ob-t16-bg: #fac7dc; --ob-t16-fg: #7b044c; --ob-t16-chart: #ac577f; /* magenta deep */ --ob-t17-bg: #a5e4ed; --ob-t17-fg: #044d56; --ob-t17-chart: #0eadbf; /* teal deep */ --ob-t18-bg: #f6cfac; --ob-t18-fg: #623803; --ob-t18-chart: #d5904a; /* orange deep */ --ob-t19-bg: #e8cbf4; --ob-t19-fg: #680184; --ob-t19-chart: #8a579d; /* purple deep */ --ob-t20-bg: #ace6d2; --ob-t20-fg: #04503f; --ob-t20-chart: #4bc6a5; /* green deep */ --ob-t21-bg: #ffc8c0; --ob-t21-fg: #830206; --ob-t21-chart: #c96c61; /* red deep */ --ob-t22-bg: #e4e8c7; --ob-t22-fg: #727608; --ob-t22-chart: #b7bd5e; /* lime light */ --ob-t23-bg: #f5dbf4; --ob-t23-fg: #9a4f98; --ob-t23-chart: #955593; /* magenta light */ --ob-t24-bg: #c5efe8; --ob-t24-fg: #068276; --ob-t24-chart: #2fc0b0; /* teal light */ --ob-t25-bg: #ffdccf; --ob-t25-fg: #b04e2a; --ob-t25-chart: #d07758; /* orange light */ --ob-t26-bg: #e4e0ff; --ob-t26-fg: #735eb9; --ob-t26-chart: #7262b0; /* purple light */ --ob-t27-bg: #d1edd4; --ob-t27-fg: #26853e; --ob-t27-chart: #7ecb89; /* green light */ --ob-t28-bg: #ffd9e1; --ob-t28-fg: #af4867; --ob-t28-chart: #b75c75; /* red light */ --ob-t29-bg: #c5ecf9; --ob-t29-fg: #047d98; --ob-t29-chart: #02a2c5; /* blue light */ --ob-t30-bg: #f6e1c4; --ob-t30-fg: #966500; --ob-t30-chart: #d39c48; /* amber light */ --ob-t31-bg: #d4e6ff; --ob-t31-fg: #3370be; --ob-t31-chart: #4a7ec3; /* indigo light */ --ob-t32-bg: #eed5c4; --ob-t32-fg: #763e01; --ob-t32-chart: #d58a4c; /* orange muted */ --ob-t33-bg: #e2d4ed; --ob-t33-fg: #62397e; --ob-t33-chart: #8459a3; /* purple muted */ --ob-t34-bg: #c5e3d5; --ob-t34-fg: #045d43; --ob-t34-chart: #59c89e; /* green muted */ --ob-t35-bg: #f2d2d0; --ob-t35-fg: #832e30; --ob-t35-chart: #c56766; /* red muted */ --ob-t36-bg: #c5dff0; --ob-t36-fg: #05547b; --ob-t36-chart: #308fc6; /* blue muted */ --ob-t37-bg: #e2dbc0; --ob-t37-fg: #5e4d01; --ob-t37-chart: #c9af4e; /* amber muted */ --ob-t38-bg: #d3d9f3; --ob-t38-fg: #3c468e; --ob-t38-chart: #606ebb; /* indigo muted */ --ob-t39-bg: #d3e0c7; --ob-t39-fg: #395a01; --ob-t39-chart: #9ec773; /* lime muted */ --ob-t40-bg: #edd1e0; --ob-t40-fg: #792f5c; --ob-t40-chart: #a65684; /* magenta muted */ --ob-t41-bg: #c0e2e5; --ob-t41-fg: #005a5f; --ob-t41-chart: #07b3bc; /* teal muted */ --ob-t42-bg: #ffd5da; --ob-t42-fg: #ba024a; --ob-t42-chart: #bc5f70; /* red vivid */ --ob-t43-bg: #b9eaff; --ob-t43-fg: #0a6f8e; --ob-t43-chart: #169cc6; /* blue vivid */ --ob-t44-bg: #f9ddab; --ob-t44-fg: #825e03; --ob-t44-chart: #d0a349; /* amber vivid */ --ob-t45-bg: #d2e2ff; --ob-t45-fg: #1658d8; --ob-t45-chart: #5279c1; /* indigo vivid */ --ob-t46-bg: #dce8b2; --ob-t46-fg: #5f6d03; --ob-t46-chart: #afc165; /* lime vivid */ --ob-t47-bg: #ffd0f5; --ob-t47-fg: #a41c94; --ob-t47-chart: #9b548e; /* magenta vivid */ --ob-t48-bg: #a9f1ec; --ob-t48-fg: #067470; --ob-t48-chart: #1bbcb6; /* teal vivid */ --ob-t49-bg: #ffd8c6; --ob-t49-fg: #a24405; --ob-t49-chart: #d27d54; /* orange vivid */ --ob-t50-bg: #e5dbff; --ob-t50-fg: #773ac9; --ob-t50-chart: #785eac; /* purple vivid */ /* TEN FAMILIES, FIVE SHADE PASSES, AND THE ORDER IS THE POINT. A slot is handed out by a counter - the lowest one no live agent is wearing - so this list is the order agents come out in, and it is arranged to cross the hue wheel every step rather than walk round it. Consecutive slots are 84 degrees apart at worst and 145 on average; the palette this replaced averaged 7, which is why its slots 9 to 22 were all brown. The families sit on an even 36 degree grid: purple, green, red, blue, amber, indigo, lime, magenta, teal, orange. The brand's own blue waits until slot 5 rather than greeting you first. Four of the old hand-picked colours land within 10 degrees of a grid slot and are kept exactly - purple is the old lilac, red is rose, indigo is lavender, teal is mint. The other six families are generated at those four's lightness and chroma, which is what keeps fifty colours looking like one set. A family's later outings move 12 degrees of hue and a good deal of weight, so two purples ten slots apart never read as a pair; each pass also starts three families along, so the seam between passes is as wide a jump as every other step. MIRRORED IN code/App/Faces.cs: change a value here and change it there in the same commit, because an SVG served to an img cannot read a stylesheet. */ /* ---- and the ground an agent's face stands on ---- An agent's face is the Okaybot face in white on the agent's own colour, so it needs a ground white reads against - the pale -bg above is for a letter or a chip, not for a face. These are the deep inks of the same fifty hues: -fg for every slot but the black one, which is already its own ground. */ --ob-t1-solid: #16181d; --ob-t2-solid: #6b21a8; --ob-t3-solid: #076a45; --ob-t4-solid: #9f1239; --ob-t5-solid: #036285; --ob-t6-solid: #6f5603; --ob-t7-solid: #4338ca; --ob-t8-solid: #4c6306; --ob-t9-solid: #912576; --ob-t10-solid: #0f766e; --ob-t11-solid: #8a4306; --ob-t12-solid: #034871; --ob-t13-solid: #4e4400; --ob-t14-solid: #3926a3; --ob-t15-solid: #255003; --ob-t16-solid: #7b044c; --ob-t17-solid: #044d56; --ob-t18-solid: #623803; --ob-t19-solid: #680184; --ob-t20-solid: #04503f; --ob-t21-solid: #830206; --ob-t22-solid: #727608; --ob-t23-solid: #9a4f98; --ob-t24-solid: #068276; --ob-t25-solid: #b04e2a; --ob-t26-solid: #735eb9; --ob-t27-solid: #26853e; --ob-t28-solid: #af4867; --ob-t29-solid: #047d98; --ob-t30-solid: #966500; --ob-t31-solid: #3370be; --ob-t32-solid: #763e01; --ob-t33-solid: #62397e; --ob-t34-solid: #045d43; --ob-t35-solid: #832e30; --ob-t36-solid: #05547b; --ob-t37-solid: #5e4d01; --ob-t38-solid: #3c468e; --ob-t39-solid: #395a01; --ob-t40-solid: #792f5c; --ob-t41-solid: #005a5f; --ob-t42-solid: #ba024a; --ob-t43-solid: #0a6f8e; --ob-t44-solid: #825e03; --ob-t45-solid: #1658d8; --ob-t46-solid: #5f6d03; --ob-t47-solid: #a41c94; --ob-t48-solid: #067470; --ob-t49-solid: #a24405; --ob-t50-solid: #773ac9; /* ---- charge types: a colour means the same thing on every chart ---- PASTEL, BECAUSE THE AGENTS ARE SOLID (2026-09-12). What it was spent on sits beside by agent and under the stacked day chart, and all three used the same weight of colour - so the eye read the indigo of a charge type and the indigo of an agent as the same fact. These are the same seven hues, lightened, and they now read as the quieter half of the pair. */ --ob-charge-read_post: #9ec5fe; /* reading a post */ --ob-charge-post: #c3b5fb; /* posts */ --ob-charge-post_link: #b7bfd0; /* posts with links */ --ob-charge-read_user: #8fd9c9; /* user lookups */ --ob-charge-read_own: #f7cd93; /* your own reads */ --ob-charge-reply: #dcc6fb; /* replies, beside posts */ --ob-charge-manage: #cfd3dc; /* deleting a post: an admin act, so the quietest of them */ /* ---- type ---- */ --ob-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --ob-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace; /* ---- a machine payload, drawn (json/json.js, .ob-json in okaybot-atoms.css) ---- Quiet inks, not a code editor's. The punctuation is deliberately the faintest thing on the tile: braces and commas are structure, and the indent already says the structure, so what is left to read is the names and the values. */ --ob-json-step: 16px; /* one level of indent */ --ob-json-key: #3547c9; /* a field name: the accent's ink */ --ob-json-str: #157347; /* a value somebody wrote */ --ob-json-num: #9a3412; /* a number */ --ob-json-word: #6b21a8; /* true, false, null */ --ob-json-punc: #b4b9c5; /* braces, brackets, commas, colons */ /* ---- a block to paste, on the ink (agents/connect_block.js, .ob-connectbox .win) ---- The connect block's dark boxes: a bar saying where it goes over what goes there */ --ob-term-ink: #e8eaf1; /* what is pasted */ --ob-term-bar: #23262e; /* the bar: Terminal, or the file's path */ --ob-term-bar-ink: #a3a8b8; /* the bar's words and icon */ --ob-term-btn: #30343e; /* Copy, in the bar */ --ob-term-prompt: #6b7184; /* the `$` before a terminal line, which Copy leaves out */ --ob-term-key: #9fe3bd; /* the key in its line, or its placeholder */ /* ---- the page ---- */ /* BACK TO 236 (2026-09-16). It was 262 - 236 plus 26 - for one reason: the money block read "$0.61 of $10 this month" at the foot of the sidebar, and that line wants 194px inside 16px of padding either side. The block is gone and today's spend is a 56px line on the Usage item, so nothing in this column has to fit a sentence any more and every page body is 26px wider. */ --ob-sidebar-w: 236px; /* ONE BODY GAP, EVERY PAGE. It used to be 32 left and 28 right, and Home alone added another 22 inside its left column - a gap and then another gap, so the one screen that felt comfortable was comfortable by accident and every other screen was cramped by comparison. One number now, and a page that wants its content inset further does it with its own card's padding, never by adding a second page gap. */ --ob-body-pad-top: 26px; --ob-body-pad-right: 44px; --ob-body-pad-left: 44px; --ob-head-h: 40px; --ob-head-gap: 20px; --ob-card-gap: 14px; --ob-cap-w: 260px; /* the cap block on an Agents row: fixed, so nothing shifts it */ /* ---- the stage: the picture of what a call will do (okaybot-stage.css) ---- */ --ob-stage-gap: 18px; /* between two rows of the picture */ --ob-stage-face: 44px; /* the face column, fixed so every row starts its text in one place */ --ob-stage-av: 44px; /* the face itself, real or silhouette */ --ob-stage-row-gap: 12px; --ob-stage-spine-gap: 16px; /* under a spined row: the gap lives inside it so the line can cross it */ /* THE FRAME IS THE CARD (2026-09-24): the approval card's own radius, and a top inset deep enough to clear the half of the chip that hangs inside it */ --ob-frame-radius: 22px; --ob-frame-line: 1.5px; --ob-frame-pad-x: 20px; /* ...and the inset an unframed picture copies, so it keeps one left edge */ --ob-frame-pad-y: 26px; --ob-frame-pad-b: 16px; --ob-flabel-h: 26px; /* the chip on the top line, half above it and half inside */ --ob-strip-gap: 28px; /* between the small silhouettes of a read of many */ --ob-strip-gap-people: 24px; /* ...and between people, who are narrower */ /* THE GROUND OF THE THING BEING DECIDED (2026-09-22). A proposed post sits on the faintest blue there is - enough that the frame reads as ours and as unfinished, not enough to be a colour - and opening its words deepens it one step, with the edge going solid. That pair IS the editing state: nothing is drawn on the words themselves. */ --ob-proposed: #fbfcff; /* a proposed post, waiting to be answered */ --ob-band: #f3f5fb; /* ...and the band under its foot that offers Post it yourself (2026-10-01) */ --ob-editing: #f5f6fe; /* ...and the same frame with its words open */ --ob-editing-spine: #c8cfe4; /* ...and the line joining one open part to the next */ --ob-skel: #e4e7ee; /* a silhouette's name bar: scenery, and it must never compete */ --ob-skel-2: #edeff4; /* ...its text bars, quieter still */ --ob-skel-face: #e8eaf1; /* ...its face */ --ob-skel-face-2: #e0e4ed; /* ...a face on the read window's tinted ground */ --ob-spine: #d5d9e3; /* the line joining one post to the next: quiet, but it has to be seen */ /* ---- the home page: the decisions beside the log's panel (okaybot-home.css) ---- */ --ob-home-split: 1.5fr; /* the decisions against the log panel's 1fr: 60/40 */ --ob-home-panel: 1fr; /* ...and the panel, which is the same 40 the gap used to eat into */ /* --ob-home-gutter and --ob-home-gap went on 2026-09-18 with the panel: a white column flush to the right edge has no gap beside it and no gutter inside it, it has an edge */ --ob-home-card-gap: 16px; /* between decision cards */ /* --ob-home-avatar-w went on 2026-09-16 with the fixed avatar: the right column's head ran short of that corner to clear it, and the corner is the page's own again */ --ob-log-h: 38px; /* a log line: shorter than a feed row, because it is not a card */ --ob-log-sq: 22px; /* the agent's square on a log line */ --ob-log-gap: 11px; --ob-log-amt-w: 52px; /* the money column's floor: a status word may push it wider */ --ob-log-when-w: 34px; /* the time column, fixed so the numbers line up down the page */ /* ---- setup mode: the steps Home draws until the workspace is set up (okaybot-setup.css) ---- */ --ob-setup-w: 860px; /* the whole column, body padding included: a form's width, not a page's. 860, not 720, since 2026-10-04: the connect block's harness list and its blocks side by side want a card about 680 wide */ --ob-setup-num: 36px; /* a step's circle */ --ob-on-accent: #ffffff; /* words and faces on the accent: the plan's blue box on the last step */ --ob-glass: rgba(255, 255, 255, .15); /* ...a chip on it */ --ob-glass-edge: rgba(255, 255, 255, .24); /* ...and the chip's edge */ --ob-shadow-on-accent: 0 6px 18px rgba(22, 24, 80, .18); /* ...the white button lifted off it */ --ob-setup-col-gap: 18px; /* between the circle and what is beside it */ --ob-setup-gap: 22px; /* between steps */ --ob-setup-drop: 12px; /* the current step's circle sits this far down, level with its card's title */ --ob-setup-next-h: 64px; /* the silhouette of the step after this one */ /* ---- Activity: the log beside the panel (okaybot-activity.css) ---- */ --ob-act-panel: 1fr; /* the detail panel against the list's 1fr: 50/50 on Activity and Posts. 1.5fr (40/60) until 2026-09-23 */ --ob-act-panel-pad: 44px; /* the panel's right padding. 84 until 2026-09-16, when the account avatar left that corner for the sidebar's foot; the page's own gap now */ --ob-act-panel-top: 34px; /* more than the body's: the panel is read, not scanned */ /* THE SIDE PANEL, one width for every page that has one beside a list or a grid (2026-09-24): the calendar, Profiles, Usage and one agent. It was the calendar's, sized for the picker's seven days; Usage had 340 of its own and Profiles took 40 percent. Padding included. */ --ob-side-panel-w: 452px; /* ---- the list page: Activity's and Posts' menu and the bar of faces (okaybot-listpage.css) ---- */ --ob-listmenu-w: 176px; /* the status menu down the left of the list */ --ob-listmenu-gap: 28px; /* ...and the gap between it and the list */ --ob-face-lg: 34px; /* an account in the bar of faces */ --ob-face-sm: 28px; /* ...and an agent, a step smaller */ /* ---- the account page: the settings beside the record (okaybot-identity.css) ---- An even split, not Activity's 40/60: on that page the panel is the subject and the log is the index, and here neither half is either. The left is what this browser holds, the right is what has happened to the account. */ --ob-acct-panel: 1fr; /* ---- the detail: one call in full (okaybot-detail.css) ---- */ --ob-detail-side: 340px; /* the modal's right column: who, the reason, the facts, the timeline */ /* ---- atoms ---- */ --ob-radius: 18px; /* cards */ --ob-radius-row: 22px; /* feed rows and approval cards: half the 44px slim row, so the row is a pill */ --ob-radius-panel: 16px; /* the opened rim chip, the money block, tiles */ --ob-radius-tile: 14px; --ob-radius-sq: 10px; /* an agent square */ --ob-pill-h: 38px; --ob-chip-h: 24px; --ob-seg-h: 32px; --ob-nav-h: 42px; --ob-shadow-row: 0 0 14px 0 rgba(0, 0, 0, .02); /* a slim feed row, no border: just off the canvas */ --ob-shadow-modal: 0 24px 80px rgba(22, 24, 29, .35); /* the item modal over the shade */ --ob-shadow-menu: 0 18px 44px rgba(22, 24, 29, .14); /* a menu hung off a button, over the page: the folded bar of faces */ --ob-shade: rgba(22, 24, 29, .55); /* the page behind a modal */ } /* ---- MEDIUM: 1200 to 1599 (dev/docs/responsive.md) ---- The same three columns and the same components, tightened. Everything here is a number the sheets already read, so no page needs a query of its own for this tier: the sidebar, the gaps and the panels shrink, and the list the person is reading down gets what they give up. Narrow (1199 and below) inherits all of it and then takes the side panel away, which IS structural and lives in each page's sheet. */ @media (max-width: 1599px) { :root { --ob-sidebar-w: 200px; --ob-body-pad-right: 32px; --ob-body-pad-left: 32px; --ob-cap-w: 190px; --ob-act-panel: .82fr; /* Activity and Posts 55/45, in the list's favour */ --ob-act-panel-pad: 32px; --ob-act-panel-top: 28px; --ob-side-panel-w: 380px; /* the picker's days 45 wide, from 52 */ --ob-listmenu-w: 148px; /* "Waiting for you", the longest item, still fits */ --ob-listmenu-gap: 20px; --ob-face-lg: 30px; --ob-face-sm: 24px; --ob-detail-side: 300px; } } /* ---- the outside pages: the homepage, pricing, docs, the legal pages (okaybot-site.css) ---- One column down the middle, a top bar instead of the sidebar. The same palette and the same type as the product, because a person who clicks from the pricing page into the dashboard should feel they stayed in one place. */ :root { --ob-site-w: 1360px; /* the column, padding included. 1120 read as narrow on a big screen */ --ob-site-pad: 32px; /* its side gutter; the fold narrows it (okaybot-site.css) */ --ob-site-gap: 20px; /* between cards on an outside page: roomier than the app's 14 */ --ob-site-sect: 80px; /* between sections */ --ob-site-nav-h: 68px; /* the top bar */ --ob-site-nav-bg: rgba(243, 244, 247, .86); /* the canvas, letting the page show through under a blur */ --ob-site-prose-w: 760px; /* a docs or legal column: a reading measure, not a page */ --ob-site-docs-nav-w: 240px; /* the topic list beside the docs */ --ob-site-dark: #16181d; /* the one dark section: the closing call, on ink */ --ob-site-art-bg: #e0e8fd; /* the sign-in panel's ground: the keeper picture's own flat blue */ --ob-site-good: #f5f7ff; /* the with-Okaybot sheet on the homepage: the accent, barely there */ } /* ============================================ OKAYBOT STAGE The picture of what a call will do, as ONE CARD (2026-09-24): the act as a chip on the card's top line, the preview inside it, and a foot - the answer, the quiet links for what can be changed, and on Home the door into the detail. The markup is stage/stage.html, inside.html, foot.html and row.html; what goes in each is decided in stage/stage.js. Nothing here carries a literal colour or radius - the silhouette's greys are tokens like everything else. There used to be a card round this with a header and the agent's reason, and a frame inside it between grey silhouettes of the timeline around the post. The frame is the card now, and nothing is drawn round it. ============================================ */ /* THE STAGE IS A CONTAINER, so a narrow card can drop a silhouette from a read of many however it came to be narrow - the Home column, the modal, the Activity panel (the query at the foot). */ .ob-stage { container-type: inline-size; font-family: var(--ob-font); } /* the chip hangs half above the card's top line, so a card that wears one keeps the room above it clear - between two cards on Home, and under the switch in the detail */ .ob-stage.labelled { padding-top: calc(var(--ob-flabel-h) / 2 + 2px); } /* A post that has gone out has no card, and sits where it would inside one: the same inset, so the picture keeps one left edge whichever way it is drawn. */ .ob-stage > .subject { padding: 0 calc(var(--ob-frame-pad-x) + var(--ob-frame-line)); } /* ---- one row: the face column, then the body ---- The face column is a fixed width so every row starts its text in the same place, which is what makes a reply and the post it answers read as one conversation. */ .ob-srow { display: flex; gap: var(--ob-stage-row-gap); min-width: 0; > .col { display: flex; flex-direction: column; align-items: center; flex: 0 0 var(--ob-stage-face); align-self: stretch; } .body { min-width: 0; flex: 1 1 auto; } .who { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .name { font-size: 14.5px; font-weight: 700; color: var(--ob-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .handle { font-size: 13px; font-weight: 500; color: var(--ob-muted); } .when { font-size: 12px; font-weight: 600; color: var(--ob-faint-1); margin-left: auto; } .text { margin-top: 3px; font-size: 15.5px; line-height: 1.5; color: var(--ob-ink); white-space: pre-wrap; word-break: break-word; } .desc { margin-top: 2px; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--ob-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* the post being replied to: present, but quieter than the reply under it */ &.dim .name, &.dim .text { color: var(--ob-ink-2); } &.dim .text { font-size: 14.5px; } /* the line from one face into the next, which is what a reply and a thread look like */ .spine { width: 2px; flex: 1 1 auto; min-height: 14px; margin: 8px 0 -2px; background: var(--ob-spine); border-radius: 1px; } } /* THE PROVIDER'S BADGE on our own profile's face: a little smaller a share of the face than on a row, as on the Profiles panel's big face, or at 44px it would be a second face */ .ob-srow .ob-badged > .badge { width: 40%; height: 40%; right: -2px; bottom: -2px; } /* AN ARTICLE a read brought back: the title as X draws it, big and heavy, then its words in the post's own type. A long one shows its opening until Show more, which is a checkbox the sheet reads (row.html) */ .ob-srow .article { margin-top: 6px; } .ob-srow .article .title { display: block; font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--ob-ink); text-decoration: none; } .ob-srow .article a.title:hover { text-decoration: underline; } .ob-srow .article .words { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--ob-ink); word-break: break-word; } .ob-srow .article .words p { margin: 0; } .ob-srow .article .words p + p { margin-top: 12px; } .ob-srow .article .whole { display: none; } .ob-srow .article:has(.more input:checked) .whole { display: block; } .ob-srow .article:has(.more input:checked) .opening { display: none; } .ob-srow .article .more { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--ob-accent-ink); cursor: pointer; } .ob-srow .article .more:hover { text-decoration: underline; } .ob-srow .article .more input { display: none; } .ob-srow .article .more .hide { display: none; } .ob-srow .article .more:has(input:checked) .show { display: none; } .ob-srow .article .more:has(input:checked) .hide { display: inline; } /* a row with no name has nothing above its text, so the text lines up on the face itself */ .ob-srow.post .body > .text:first-child { margin-top: 11px; } /* A THREAD THAT STOPPED PART WAY: under each part, how far it got (row.html, Event.MarkSent) */ .ob-srow .sent { margin-top: 6px; font-size: 12.5px; font-weight: 700; display: flex; gap: 8px; align-items: baseline; } .ob-srow .sent.ok { color: var(--ob-mint-ink); } .ob-srow .sent.bad { color: var(--ob-rose-ink); } .ob-srow .sent.warn { color: var(--ob-butter-ink); } .ob-srow .sent.off { color: var(--ob-muted); } .ob-srow .sent a { color: var(--ob-accent-ink); font-weight: 600; text-decoration: none; } .ob-srow .sent a:hover { text-decoration: underline; } /* A POST NOBODY IS ATTACHED TO. A read comes back with no people in it, so the rows of a read that has run have a time and words and nothing else - and a face column standing empty beside them is 56px spent saying "we do not know". The column goes, and the words take it. */ .ob-srow.post.anon > .col { display: none; } .ob-srow.post.anon .who .when { margin-left: 0; } /* two rows sit a post apart */ .ob-srow + .ob-srow { margin-top: var(--ob-stage-gap); } /* A SPINED ROW IS JOINED TO THE NEXT ONE, NOT SPACED FROM IT. The gap goes inside the row, as padding under its body, so the face column - which stretches to the row's full height - has something to run its line down through. Put the gap between the rows instead and the line stops short of the next face and the thread comes apart. */ .ob-srow:has(.spine) + .ob-srow { margin-top: 0; } .ob-srow:has(.spine):not(:last-child) .body { padding-bottom: var(--ob-stage-spine-gap); } /* ---- the silhouette ---- Grey and wordless: what a read is about to bring back, drawn before it has. */ .ob-srow.skel { .face { width: var(--ob-stage-av); height: var(--ob-stage-av); border-radius: 50%; background: var(--ob-skel-face-2); flex: 0 0 auto; } .who { gap: 8px; padding-top: 6px; } i { display: block; height: 8px; border-radius: 4px; background: var(--ob-skel); } i.hd { background: var(--ob-skel-2); } i.ln { height: 9px; margin-top: 8px; background: var(--ob-skel); } i.ln:first-of-type { margin-top: 11px; } .spine { background: var(--ob-skel); } } /* a post about to be struck out of the world: the only silhouette that means something bad */ .ob-srow.skel.strike { .face { background: var(--ob-rose-chip); } i { background: var(--ob-rose-chip); } position: relative; &::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--ob-rose-edge); } } /* a profile card that came back from a read is a shorter row - a face, a name, a line about them - so its face is smaller and its column narrower */ .ob-srow.person { > .col { flex-basis: 30px; } .name { font-size: 14px; } & + .ob-srow.person { margin-top: 14px; } } /* ---- a read of many: a row of small silhouettes, side by side ---- Never a column of fifty. Each takes a fixed share of the row - a third for a post, a fifth for a person - so a silhouette is the same size whether the read is of two or of fifty, and the count is in the foot rather than in the picture. */ .ob-stage .rows.strip { display: flex; align-items: center; gap: var(--ob-strip-gap); > .ob-srow { margin-top: 0; flex: 0 0 calc((100% - 2 * var(--ob-strip-gap)) / 3); } > .ob-srow + .ob-srow { margin-top: 0; } &.user { gap: var(--ob-strip-gap-people); } &.user > .ob-srow { flex-basis: calc((100% - 4 * var(--ob-strip-gap-people)) / 5); } /* more than the row holds: it is a full row, so its silhouettes share it out between them */ &.many > .ob-srow { flex: 1 1 0; } /* THE ROW FADES TO THE RIGHT, a step a silhouette: the first is the thing about to arrive and the rest are more of it, so the eye reads one and a direction rather than five of equal weight. A narrow card drops the last one and the steps before it stay where they were. */ > .ob-srow:nth-child(2) { opacity: .74; } > .ob-srow:nth-child(3) { opacity: .52; } > .ob-srow:nth-child(4) { opacity: .38; } > .ob-srow:nth-child(5) { opacity: .28; } } /* a post's silhouette at two thirds: the same face, name and handle and three lines */ .ob-srow.mini { gap: 10px; > .col { flex-basis: 30px; } .face { width: 30px; height: 30px; } .who { gap: 6px; padding-top: 4px; overflow: hidden; } i { height: 7px; flex: 0 1 auto; min-width: 0; } i.ln { height: 8px; margin-top: 7px; } i.ln:first-of-type { margin-top: 10px; } } /* a person: a face, a name and a handle, and nothing under them */ .ob-srow.mini.person { align-items: center; > .col { flex-basis: 36px; align-self: auto; } .face { width: 36px; height: 36px; } i { height: 8px; } i.hd { height: 7px; margin-top: 7px; } } /* A NARROWER CARD DROPS A SILHOUETTE, never the count: a full row of three posts becomes two and one of five people becomes four. Only a full row - a read of two or three draws exactly that many, and taking one away would draw a different number than the foot says. */ @container (max-width: 600px) { .ob-stage .rows.strip.many > .ob-srow:last-child { display: none; } } /* ============================================================ THE CARD The frame is the card: everything inside it is being decided, or was. ============================================================ */ /* THE GROUND SAYS IT IS OURS AND UNFINISHED (2026-09-22). A write waiting to be answered sits on the faintest blue there is - not a colour so much as a temperature - and opening its words deepens it one step (.editing, below). The two grounds are a pair, which is what lets the change between them be the whole of the editing state: nothing is drawn on the words. */ .ob-frame { /* THE GROUND IS ONE VALUE, set by each kind of card below, because the faces in the foot cut their rings out of it and must cut the right colour */ --ob-ground: var(--ob-proposed); /* ...and the provider's badge on our own profile's face cuts its ring out of it too */ --ob-badge-ring: var(--ob-ground); position: relative; padding: var(--ob-frame-pad-y) var(--ob-frame-pad-x) var(--ob-frame-pad-b); border: var(--ob-frame-line) solid var(--ob-accent-ring); border-radius: var(--ob-frame-radius); background: var(--ob-ground); transition: background-color .18s ease, border-color .18s ease; } /* THE ACT, on the top line the way a legend sits on a fieldset: half above the card's edge and half inside it, its own edge the card's edge, so it reads as part of the frame rather than as a badge set on it. A glyph for which side of the line the call is on, then the words. */ .ob-flabel { position: absolute; top: calc(-1 * var(--ob-flabel-h) / 2); left: 18px; display: inline-flex; align-items: center; gap: 6px; height: var(--ob-flabel-h); padding: 0 11px 0 8px; border-radius: 999px; background: var(--ob-accent-bg); color: var(--ob-accent-ink); border: var(--ob-frame-line) solid var(--ob-accent-ring); font-size: 12px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; max-width: calc(100% - 36px); svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; } } /* THE SECOND CHIP: the words on this card are not the agent's, because somebody changed them. It sits at the other end of the top line, quiet - grey against the blue - because it is a footnote on what the first one says rather than a second thing to read. */ .ob-frame .ob-flabel.edited { left: auto; right: 18px; padding: 0 11px; background: var(--ob-canvas); color: var(--ob-ink-2); border-color: var(--ob-line-chip); font-weight: 600; } /* "and 36 more": the card has more behind it than it can draw */ .ob-stage > .ob-frame > .more, .ob-stage > .subject > .more { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--ob-line-in); font-size: 12.5px; font-weight: 700; color: var(--ob-faint-1); } /* a card round something destructive takes the rose edge and the rose chip - and its own pale ground, because the blue one under every other card would be two temperatures on one card */ .ob-frame.rose { --ob-ground: var(--ob-rose-card); border-color: var(--ob-rose-chip); .ob-flabel { background: var(--ob-rose-bg); color: var(--ob-rose-ink); border-color: var(--ob-rose-chip); } } /* A READ WAITING TO BE ANSWERED (2026-09-25): its own colour (the --ob-read tokens) where a write is blue - the edge, the chip and the button, and nothing else. The blue is kept for what goes out to X, so a post in a column of reads is the thing the eye lands on. Before .done, which wins once it has run. A read is fetched, not written, so it sits on the card's plain white rather than the blue. */ .ob-frame.read { --ob-ground: var(--ob-card); border-color: var(--ob-read-ring); .ob-flabel { background: var(--ob-read-bg); color: var(--ob-read-ink); border-color: var(--ob-read-ring); } .ob-sfoot .ob-pill.primary { background: var(--ob-read); } .ob-sfoot .ob-pill.primary:hover { background: var(--ob-read-lift); } } /* ANSWERED ALREADY. The detail draws a call long after it was decided, and the blue of a thing waiting for a person would be the one untrue thing on it: a call that has run is drawn in grey, on white. */ .ob-frame.done { --ob-ground: var(--ob-card); border-color: var(--ob-line); .ob-flabel { background: var(--ob-card); color: var(--ob-ink-2); border-color: var(--ob-line); } } /* The one card the eye should land on: the oldest write still waiting (or read, when no write is - home/queue.js), breathing on a slow cycle. ONE on the page and never a stack of them - a column of pulsing borders is noise, and noise is the thing this screen exists to remove. Its chip's edge goes solid with it. */ .ob-frame.now { border-color: var(--ob-accent); animation: ob-frame-attention 2.8s ease-in-out infinite; .ob-flabel { border-color: var(--ob-accent); } } @keyframes ob-frame-attention { 0%, 100% { box-shadow: 0 0 0 0 var(--ob-accent-halo-0); } 50% { box-shadow: 0 0 0 6px var(--ob-accent-halo-1); } } /* a destructive card breathes in its own colour: a blue ring round a rose card says the two halves of the same card disagree about how serious it is */ .ob-frame.rose.now { border-color: var(--ob-rose-edge); animation: ob-frame-attention-rose 2.8s ease-in-out infinite; .ob-flabel { border-color: var(--ob-rose-edge); } } @keyframes ob-frame-attention-rose { 0%, 100% { box-shadow: 0 0 0 0 var(--ob-rose-halo-0); } 50% { box-shadow: 0 0 0 6px var(--ob-rose-halo-1); } } /* ...and a read in its own: the accent's ring round a read would be the write's colour on it */ .ob-frame.read.now { border-color: var(--ob-read); animation: ob-frame-attention-read 2.8s ease-in-out infinite; .ob-flabel { border-color: var(--ob-read); } } @keyframes ob-frame-attention-read { 0%, 100% { box-shadow: 0 0 0 0 var(--ob-read-halo-0); } 50% { box-shadow: 0 0 0 6px var(--ob-read-halo-1); } } @media (prefers-reduced-motion: reduce) { .ob-frame.now, .ob-frame.rose.now, .ob-frame.read.now { animation: none; } } /* ============================================================ THE FOOT The answer on the left; a little space; the things a person can change as quiet glyph links - the words, the time, how many a read takes; and at the right, on Home, the agent and the account stacked with the price, which is the door into the detail. stage/foot.html. ============================================================ */ .ob-sfoot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; a.ob-pill { text-decoration: none; } .tools { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 18px; margin-left: 14px; } /* ...unless there is no answer before them: a read that has run has only its count */ .tools:first-child { margin-left: 0; } /* a pill is busy (2026-10-03): the words, the time and the count wait for its answer */ .tools.waiting { opacity: .45; pointer-events: none; } .tool { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 2px; border: 0; background: none; font-family: var(--ob-font); font-size: 13px; font-weight: 700; color: var(--ob-ink-2); white-space: nowrap; svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: var(--ob-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } } /* the money's warning: its month will not cover it as things stand (Caps.Uncovered) */ .tool.warn { color: var(--ob-butter-ink); } .tool.warn svg { stroke: var(--ob-butter-ink); } button.tool { cursor: pointer; } button.tool:hover { color: var(--ob-ink); } button.tool:hover svg { stroke: var(--ob-ink-2); } button.tool:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; border-radius: 6px; } /* WHO ASKED, AS WHOM, AND WHAT IT COSTS - small, quiet, and one door */ .door { display: inline-flex; align-items: center; gap: 8px; height: 32px; margin-left: auto; padding: 0 6px 0 4px; border: 0; border-radius: 999px; background: transparent; font-family: var(--ob-font); cursor: pointer; /* the two faces overlap, each ringed in the card's own ground so the edge between them is cut rather than drawn */ .faces { display: flex; } .faces .ob-circle { box-shadow: 0 0 0 2px var(--ob-ground, var(--ob-card)); } .faces > * + * { margin-left: -6px; } .ob-amt { font-size: 12px; } .chev { font-size: 15px; font-weight: 700; color: var(--ob-faint-3); line-height: 1; } &:hover { background: var(--ob-canvas); } &:hover .chev { color: var(--ob-muted); } &:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; } } /* the detail's corner: the account the read was made as, where Home puts its door */ .who { display: inline-flex; margin-left: auto; padding: 0 4px; } } /* POST IT YOURSELF (2026-10-01, Dave): a band under the foot, on a ground of its own to the card's edges, with the way out as the solid button and why at the right in the card's own blue. The card's answer above it goes hollow while it shows (DecisionCard.bar, ItemView.bar) */ .ob-sfoot.ob-band { --ob-ground: var(--ob-band); --ob-badge-ring: var(--ob-band); flex-wrap: nowrap; gap: 12px; margin: 16px calc(-1 * var(--ob-frame-pad-x)) calc(-1 * var(--ob-frame-pad-b)); padding: 10px var(--ob-frame-pad-x); background: var(--ob-band); border-top: 1px solid var(--ob-line-in); border-radius: 0 0 calc(var(--ob-frame-radius) - var(--ob-frame-line)) calc(var(--ob-frame-radius) - var(--ob-frame-line)); .tools { margin-left: auto; min-width: 0; } .tool.reason { color: var(--ob-accent-ink); white-space: normal; text-align: right; height: auto; min-height: 32px; } .tool.reason svg { stroke: var(--ob-accent-ink); } button.tool.reason:hover { color: var(--ob-accent); text-decoration: underline; text-underline-offset: 3px; } button.tool.reason:hover svg { stroke: var(--ob-accent); } } /* ...THE QUIET BAND (2026-10-01, Dave): a long post on an account that takes long posts. The same ground, a plain button, and why in the meta grey with a tick, since the network should take it */ .ob-sfoot.ob-band.quiet { .tool.reason { color: var(--ob-muted); } .tool.reason svg { stroke: var(--ob-muted); } button.tool.reason:hover { color: var(--ob-ink-2); } button.tool.reason:hover svg { stroke: var(--ob-ink-2); } } /* ...and under a post the detail draws with no card round it, a band of its own shape */ .ob-stage > .subject .ob-sfoot.ob-band { margin: 16px 0 0; border-top: 0; border-radius: var(--ob-frame-radius); } /* ============================================================ THE WORDS, OPEN Somebody pressed Edit. TWO VALUES CHANGE AND THAT IS ALL: this frame's ground and its edge. Nothing is drawn on the words - no box, no border, no ring, not even on focus - because a field inside the picture is the form this screen exists not to be, and the tinted frame around them is what says the post is open. The caret says where the typing goes. Everything a thread needs beyond that lives in the GUTTER, which is already a fixed 44px in both modes and empty below the face: the face is the grip, a badge on its corner removes that part, and a dashed circle at the foot adds one. The text column is never narrowed, so not one line rewraps at the moment a post opens - which is the whole trick. The markup is stage/stage.html and stage/row.html; the session is stage/edit.js. ============================================================ */ .ob-frame.editing { --ob-ground: var(--ob-editing); border-color: var(--ob-accent); /* the label belongs to the frame, so it takes the frame's solid edge with it */ .ob-flabel { border-color: var(--ob-accent); } /* the joins between open parts, a step firmer than the ones on a card being read */ .ob-srow .spine { background: var(--ob-editing-spine); } } /* the one element that is the same in both modes. `cursor: text` is the only thing it gains, because it is the only thing about it that is different */ .ob-srow .text.ob-ed { outline: none; cursor: text; min-height: 23px; /* an empty part is still a post: it keeps a line's worth of room */ -webkit-user-modify: read-write-plaintext-only; } /* WHAT IS LEFT OF THE 280, AND ONLY WHEN IT IS CLOSE. A counter that is always there is furniture on a screen that is mostly not about typing, so it appears at forty and turns the warning's colour past 280: X may refuse a longer post unless the account has Premium, so it is a caution rather than an error (2026-09-30). */ .ob-srow .body > .left { margin-top: 5px; font-size: 12px; font-weight: 700; color: var(--ob-faint-1); font-variant-numeric: tabular-nums; &.over { color: var(--ob-butter-ink); } } /* ---- the gutter's two controls ---- */ /* the face, as a button. It keeps every pixel of the circle it was: a grip that looked different from the face would be a second thing in a column that has room for one */ .ob-srow .ob-circle.lg.handle { padding: 0; border: 0; cursor: grab; &:active { cursor: grabbing; } &:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; } } /* ...and the badge on its corner. Quiet until it is pointed at, and gone when there is only one post left, because removing the last part of a thread is refusing the whole thing - which is what No is for. */ .ob-srow > .col > .rm { position: absolute; top: 28px; left: 28px; display: flex; align-items: center; justify-content: center; width: 19px; height: 19px; padding: 0; border: 1px solid var(--ob-line); border-radius: 50%; background: var(--ob-card); color: var(--ob-muted); cursor: pointer; box-shadow: 0 0 0 2px var(--ob-editing); transition: background .12s, color .12s, border-color .12s; svg { width: 8px; height: 8px; } &:hover { background: var(--ob-rose-bg); border-color: var(--ob-rose-chip); color: var(--ob-rose-ink); } &:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; } } /* the column has to be the badge's frame of reference, and only while there is a badge in it */ .ob-srow.open > .col { position: relative; } /* the part in the air: still in the list, still in its new place, just quieter. Lifting it out and following the cursor with it would mean the list was one row short of what it is about to be, which is the one thing a person dragging needs to see. */ .ob-srow.lifted { opacity: .4; } /* ---- the row that adds one ---- THE SAME GEOMETRY AS A POST, so the spine runs out of the last face and into the dashed circle and the foot of the frame reads as the thread carrying on. A button parked under the list would read as a toolbar, which is the thing this design does not have. The part above it is given a little more room than the parts have between themselves: the circle is a control rather than a post, and it should not crowd the words it follows. */ .ob-stage .ob-srow:has(+ .addpart) .body { padding-bottom: calc(var(--ob-stage-spine-gap) + 5px); } .ob-stage .ob-srow.addpart { display: flex; align-items: center; width: 100%; padding: 0; border: 0; background: none; font-family: var(--ob-font); text-align: left; cursor: pointer; > .col { display: flex; align-items: center; justify-content: center; flex: 0 0 var(--ob-stage-face); } .ring { display: flex; align-items: center; justify-content: center; width: var(--ob-stage-av); height: var(--ob-stage-av); border: 1.5px dashed var(--ob-faint-2); border-radius: 50%; color: var(--ob-muted); transition: border-color .12s, color .12s; } .ring svg { width: 15px; height: 15px; } .lbl { font-size: 15.5px; font-weight: 600; color: var(--ob-muted); transition: color .12s; } &:hover .ring { border-color: var(--ob-accent); color: var(--ob-accent); } &:hover .lbl { color: var(--ob-accent-ink); } &:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 3px; border-radius: 12px; } } /* NOTHING TO CARRY ON FROM YET (Dave, 2026-10-04): while the last part is empty the row is in the markup but hidden (stage.js, add_waits), and the part above it closes up as if it were the last - no line out of its face, no gap under its words. The first key shows it (edit.js, typed). */ .ob-stage .ob-srow.addpart[hidden] { display: none; } .ob-stage .ob-srow:has(+ .addpart[hidden]) .spine { display: none; } .ob-stage .ob-srow:has(+ .addpart[hidden]) .body { padding-bottom: 0; } /* the one sentence this picture is ever allowed: the server would not take the edit, and why */ .ob-frame .ob-ederr { margin-top: 14px; font-size: 12.5px; font-weight: 700; color: var(--ob-rose-ink); } /* ---- the fold ---- */ @media (max-width: 760px) { .ob-frame { padding: 24px 14px 14px; } .ob-stage > .subject { padding: 0 calc(14px + var(--ob-frame-line)); } .ob-srow .text { font-size: 15px; } .ob-srow > .col { flex-basis: 36px; } .ob-srow .ob-circle.lg { width: 36px; height: 36px; font-size: 15px; } .ob-srow.skel .face { width: 36px; height: 36px; } .ob-frame .ob-sfoot.ob-band { margin: 14px -14px -14px; padding: 10px 14px; flex-wrap: wrap; } .ob-frame .ob-sfoot.ob-band .tool.reason { text-align: left; } } /* THE CAPTION ON A CARD NO SCENE DRAWS, and the link card under a post: the decision card draws the one, the stage's rows the other */ .ob-pcap { font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--ob-muted); margin: 0 0 11px; b { color: var(--ob-ink-2); } } .ob-link { display: flex; margin-top: 12px; border: 1px solid var(--ob-line-in); border-radius: var(--ob-radius-tile); overflow: hidden; text-decoration: none; color: var(--ob-ink); .img { width: 110px; flex: 0 0 auto; background: var(--ob-canvas) center / cover no-repeat; } .meta { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; min-width: 0; } .domain { font-size: 12px; font-weight: 600; color: var(--ob-muted); } .title { font-size: 14px; font-weight: 700; line-height: 1.35; } } /* ============================================================ IMAGES ON A POST (2026-10-08): stage/images.js, stage/row.html, stage/inside.html. X's arrangement for one to four, with a gap between them so each reads as its own picture rather than one flush grid (Dave). The round x on each takes it off, in or out of edit mode; a GIF is its first frame, marked. Tiles still on their way wait in the same grid. A file held over the frame gives it the accent edge and shows the drop area; over a thread, the part under the pointer lights instead, and the drop lands on that part only. ============================================================ */ .ob-media { margin-top: 12px; display: grid; gap: 8px; } .ob-media .m { position: relative; min-height: 0; background: var(--ob-canvas); border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--ob-line-in); } .ob-media .m img { width: 100%; height: 100%; object-fit: cover; display: block; } .ob-media.n1 { grid-template-columns: minmax(0, 1fr); } .ob-media.n1 .m { border-radius: 16px; aspect-ratio: 16 / 10; } .ob-media.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 200px; } .ob-media.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); height: 230px; } .ob-media.n3 .m:first-child { grid-row: 1 / 3; } .ob-media.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); height: 250px; } /* the preview no longer kept: the thumbnail stands in at its own small size, never stretched */ .ob-media .m.small { width: 96px; height: 72px; aspect-ratio: auto; justify-self: start; align-self: start; border-radius: 10px; } .ob-media .x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 17, 22, .66); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; svg { width: 12px; height: 12px; } } .ob-media .x:hover { background: var(--ob-rose-ink); } .ob-media .x:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; } .ob-media .gif { position: absolute; left: 8px; bottom: 8px; height: 20px; padding: 0 7px; border-radius: 6px; background: rgba(15, 17, 22, .72); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; line-height: 20px; } /* ON ITS WAY (Dave, 2026-10-08): the person's own file, drawn at once and pulsing until the server has it; a tile with nothing the browser can draw (HEIC) pulses on its own */ .ob-media .m.up { animation: ob-media-up 0.9s ease-in-out infinite alternate; } @keyframes ob-media-up { from { opacity: .95; } to { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .ob-media .m.up { animation: none; opacity: .6; } } /* A FILE HELD OVER A POST THAT TAKES IMAGES (Dave, 2026-10-08): the whole of it lights - a framed card takes the accent edge and the open ground, a post drawn on its own takes an accent ring and tint - and "Drop an image" sits where the label sits, in the label's own shape. Over a thread, the part under the pointer lights as well, and the drop lands on that part only. */ .ob-dropchip { display: none; } .ob-stage.over .ob-dropchip { display: inline-flex; z-index: 2; } .ob-stage.over .ob-flabel:not(.ob-dropchip) { visibility: hidden; } .ob-dropchip svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ob-stage.over > .ob-frame { border-color: var(--ob-accent); --ob-ground: var(--ob-editing); } .ob-stage.over > .ob-frame .ob-dropchip { background: var(--ob-accent); color: #fff; border-color: var(--ob-accent); } .ob-stage > .subject { position: relative; } .ob-stage.over > .subject { border-radius: 16px; background: var(--ob-editing); box-shadow: 0 0 0 1.5px var(--ob-accent), 0 0 0 8px var(--ob-editing); } .ob-stage.over > .subject .ob-dropchip { top: calc(-8px - var(--ob-flabel-h) / 2); left: 10px; background: var(--ob-accent); color: #fff; border-color: var(--ob-accent); } .ob-stage.takes-images:focus { outline: none; } .ob-srow.target .body { background: var(--ob-accent-bg); border-radius: 12px; margin: -6px -10px; padding: 6px 10px; } /* THE FOOT'S WORDS (Dave, 2026-10-08): Edit and Image keep theirs while the foot fits on one line, and both drop to their glyphs when it would wrap (Stage.fit_feet puts .tight on). A tool with no word at all is the glyph alone */ .ob-sfoot.tight .tool.squeeze .w { display: none; } .ob-sfoot.tight .tool.squeeze, .ob-sfoot .tool.bare { padding: 0 4px; } .ob-sfoot button.tool:disabled { opacity: .4; cursor: default; } /* ============================================ OKAYBOT SITE The outside pages: the homepage, pricing, your-own-key, the docs and the two legal pages. One column down the middle of the canvas with a top bar over it, in the product's own palette and type, so that a person who clicks from the pricing page into the dashboard has stayed in one place. body.ob-site is the switch. The sidebar sets it whenever the router lands on a page whose menu is "site" (sidebar.js, select) and clears it on any other page, so it holds whether or not anybody is signed in: a signed-in person reading the docs sees the top bar and a Dashboard button, not the sidebar. It has to beat both the scaffold's chrome (an absolute #Main under a 4rem menu bar, a gradient on the body) and body.ob-app's (the fixed sidebar and the padded #Main), so its selectors carry one more level than either. ============================================ */ body.ob-site { background: var(--ob-canvas); font-family: var(--ob-font); color: var(--ob-ink); -webkit-font-smoothing: antialiased; } body.ob-site::before { display: none; } html body.ob-site #Sidebar, html body.ob-site .site-footer { display: none; } html body.ob-site #Main { position: static; margin: 0; padding: 0; min-height: 100vh; } /* The switch and the column share a name, so the body picks up the column's own max-width and side padding and every outside page ends up boxed: a full-bleed section like .ob-band cannot reach the edge of the window, and the ceremony's "full-viewport takeover" is not one. Undo the column on the body - the .ob-site divs inside each page still draw it. */ html body.ob-site { max-width: none; margin: 0; padding: 0; } /* the column every outside page lives in */ .ob-site { max-width: var(--ob-site-w); margin: 0 auto; padding: 0 var(--ob-site-pad); font-family: var(--ob-font); color: var(--ob-ink); } /* ---- the top bar ---- */ /* The bar is mounted in a
exactly its own height, and sticky only moves inside its parent, so it scrolled away with the page. Without a box of its own the mount hands the bar the whole page to stick in (found in the cross-browser pass, 2026-10-06; every engine alike) */ .ob-sitewrap > [widget="nav"] { display: contents; } .ob-sitenav { position: sticky; top: 0; z-index: 60; background: var(--ob-site-nav-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--ob-line); .inner { max-width: var(--ob-site-w); margin: 0 auto; padding: 0 var(--ob-site-pad); height: var(--ob-site-nav-h); display: flex; align-items: center; gap: 26px; } .links { display: flex; align-items: center; gap: 2px; } .links a { display: inline-flex; align-items: center; height: 36px; padding: 0 13px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ob-ink-2); text-decoration: none; } .links a:hover { background: var(--ob-card); color: var(--ob-ink); text-decoration: none; } .links a.on { background: var(--ob-accent-bg); color: var(--ob-accent-ink); font-weight: 700; } .right { margin-left: auto; display: flex; align-items: center; gap: 14px; } /* THE DASHBOARD BUTTON CARRIES THE FACE. The person's name used to sit beside it in a .who; the picture says whose dashboard it is in less room and without a second thing to read. The circle is 30px in a 38px pill, so the ground shows as an even 4px above, below and to the left, and the label keeps the pill's own 18px on the right. */ .ob-pill.face { padding-left: 4px; gap: 9px; } } /* the logo, the sidebar's own at the same size */ .ob-sitelogo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ob-ink); /* THE MARK ALONE, NOT THE TILE, the same as the sidebar's (okaybot-page.css): the bot and the tick in the accent on nothing at all, so the logo sits on the page's own ground rather than carrying a blue square around with it. No radius, because there is no ground left to round. It is a mask, the way .ob-square.bot draws the same mark, so the path stays in the stylesheet and no template carries it - and a dark ground can repaint it white with one line, since the colour is the fill and nothing else. The box is the mono file's own aspect, 376 by 456, so `contain` fills the slot top to bottom and the wordmark sits a true 10px off the ink rather than off empty space. */ .mark { display: block; width: 25px; height: 30px; background: var(--ob-accent); -webkit-mask: url(/images/logo/okaybot-mono.svg) center / contain no-repeat; mask: url(/images/logo/okaybot-mono.svg) center / contain no-repeat; } .name { font-size: 17px; font-weight: 800; letter-spacing: -.02em; } &:hover { color: var(--ob-ink); text-decoration: none; } } /* ---- type roles ---- */ .ob-eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-accent-ink); } .ob-h1 { margin: 0 0 18px; font-family: var(--ob-font); font-size: 60px; font-weight: 800; letter-spacing: -.03em; line-height: 1.02; color: var(--ob-ink); text-wrap: balance; } .ob-h2 { margin: 0 0 14px; font-family: var(--ob-font); font-size: 38px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: var(--ob-ink); text-wrap: balance; } .ob-h3 { margin: 0 0 8px; font-family: var(--ob-font); font-size: 19px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; color: var(--ob-ink); } .ob-lead { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.55; color: var(--ob-ink-2); max-width: 600px; } .ob-copy { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--ob-ink-2); } .ob-copy + .ob-copy { margin-top: 10px; } .ob-copy b, .ob-lead b { font-weight: 700; color: var(--ob-ink); } .ob-copy a, .ob-lead a { color: var(--ob-accent-ink); text-decoration: none; font-weight: 600; } .ob-copy a:hover, .ob-lead a:hover { text-decoration: underline; } /* the muted line under a section heading. Not .ob-sub, which is the page header's 13.5px line */ .ob-site-sub { margin: 0 0 40px; font-size: 17px; font-weight: 500; line-height: 1.55; color: var(--ob-ink-2); max-width: 640px; } /* ---- the hero ---- */ .ob-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 80px; align-items: center; padding: 104px 0 80px; } /* THE HERO, STACKED (the homepage, 2026-09-25): the words centred, then Home as it really is, the width of the column. A capture of a whole screen wants the whole column; beside the words it came out at half size and unreadable. Since 2026-09-29 it is Home without its log, the sidebar and what is waiting, at no more than its own width (--w on the figure) */ .ob-hero.stack { display: block; padding: 96px 0 24px; .words { max-width: 1120px; margin: 0 auto; text-align: center; } .ob-h1 { font-size: 72px; margin-bottom: 14px; } /* a short line, so it can be bigger */ .ob-subhead { margin: 0 auto; max-width: 760px; font-size: 26px; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; color: var(--ob-ink-2); } .ob-ctas, .ob-ticks { justify-content: center; } .ob-shot { max-width: min(var(--w, 1120px), 1120px); margin: 64px auto 0; } /* big, and still the height of a screen */ } .ob-ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; } .ob-ctas .ob-pill { height: 46px; padding: 0 24px; font-size: 15px; } .ob-ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: var(--ob-ink-2); li { display: inline-flex; align-items: center; gap: 7px; } svg { width: 16px; height: 16px; color: var(--ob-mint-ink); flex: 0 0 auto; } } /* ---- a section ---- */ .ob-sect { padding: var(--ob-site-sect) 0; border-top: 1px solid var(--ob-line); } .ob-sect.tight { padding: 40px 0; } .ob-sect.first { border-top: 0; } .ob-sect .head { max-width: 740px; margin-bottom: 44px; } /* ---- the belt: the runtimes, as names ---- */ .ob-belt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; /* under the hero, which is centred in the column */ gap: 10px 34px; font-size: 15px; font-weight: 700; color: var(--ob-muted); .lbl { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-faint-1); margin-right: 6px; } .name { color: var(--ob-ink-2); } .or { font-weight: 600; color: var(--ob-muted); } } /* ---- three across: the fixes, the steps, the plans ---- */ .ob-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ob-site-gap); } .ob-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ob-site-gap); } /* ---- the product, captured ---- THE PICTURES ARE SCREENSHOTS (2026-09-25). Until then the product was drawn here in markup - a decision card, cap rows, key rows, a log - so it could not go stale on a deploy. It went stale anyway, quietly, as the product moved on under the drawings. They are now captures of the real screens in images/site/, taken at twice the pixels by dev/tools/site-shots; run it again when a screen changes. .ob-shot is the frame: the capture's own corners and a lift off the page, and nothing that pretends to be a browser. The image carries the radius. */ .ob-shot { position: relative; margin: 0; max-width: var(--w, none); /* the capture's own width, set on the figure: never blown up past it */ border-radius: 14px; background: var(--ob-card); box-shadow: 0 0 0 1px rgba(22, 24, 29, .07), 0 28px 60px -24px rgba(22, 24, 29, .26), 0 10px 22px -12px rgba(22, 24, 29, .12); img { display: block; width: 100%; height: auto; border-radius: inherit; } } /* on ink the frame is the light itself, so the lift goes darker and the hairline goes */ .ob-shot.ink { box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6); } /* THE THREE ASKS (Dave, 2026-09-25): a post, a read and a delete waiting, drawn by the product's own stage in a row under a plain title - no frame round them and no picture of them. They arrive as they do on Home (.ob-decide.pop, okaybot-home.css), one after another, the first time the row is seen; until then the row is .waiting and the cards are not drawn */ .ob-asks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 40px; /* one height across the row: each card stretches to the tallest and its foot sits at the bottom, so the three answers line up */ > .ob-decide { display: flex; } > .ob-decide > .ob-stage { flex: 1 1 auto; display: flex; } > .ob-decide > .ob-stage > .ob-frame { flex: 1 1 auto; display: flex; flex-direction: column; } > .ob-decide > .ob-stage > .ob-frame > .ob-sfoot { margin-top: auto; padding-top: 18px; } /* the stage's own 18px, kept as the least */ } .ob-asks.waiting > .ob-decide { opacity: 0; } /* the delete's silhouette without the line through it: on this page the rose says enough */ .ob-asks .ob-srow.skel.strike::after { display: none; } /* A CHAPTER: the words on one side and ONE SMALL VIEW on the other - a part of one screen, never a whole one across the page (Dave, 2026-09-25: the full-width screens were overwhelming, and none of them fitted on a screen). The picture sits in the middle of its column at no more than its own size (--w on the figure). .flip puts the picture first; .below is a second row in the same band */ .ob-chapter { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; .words .ob-copy.lg { margin-top: 4px; } > .ob-shot { width: 100%; justify-self: center; } } .ob-chapter.flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .ob-chapter.below { margin-top: 96px; } .ob-h3.big { font-size: 26px; letter-spacing: -.02em; margin-bottom: 10px; } /* WHAT A CHAPTER SAYS YOU CAN DO: a tick and a few words, and no sentence under it (Dave, 2026-09-25: the bold-line-and-sentence points were far too much text - "they'll get it"). The hero's ticks, stacked beside a picture instead of in a row under the buttons */ .ob-checks { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--ob-ink); } svg { width: 18px; height: 18px; color: var(--ob-mint-ink); flex: 0 0 auto; } } .ob-band .ob-checks { li { color: #fff; } svg { color: var(--ob-accent-ring); } } /* THE BLOCK, drawn as an editor would show it (2026-09-25): a dark card with a bar across the top - what it is, and Copy - and the config under it coloured by what each part is. Its own colours, because the product's JSON ones (--ob-json-*) are for a light ground */ .ob-code { border-radius: 16px; background: var(--ob-site-dark); box-shadow: 0 30px 60px -28px rgba(22, 24, 29, .55), 0 0 0 1px rgba(22, 24, 29, .08); overflow: hidden; .bar { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, .08); } .bar .t { font-size: 13.5px; font-weight: 700; color: #fff; } pre { margin: 0; padding: 20px 22px 24px; font-family: var(--ob-mono); font-size: 13.5px; line-height: 1.75; color: #e8eaf1; white-space: pre; overflow-x: auto; } .k { color: #a9b6ff; } .s { color: #8fe3b0; } .p { color: #6b7180; } } /* ---- the plans ---- */ /* THREE PLANS, CENTRED (Dave, 2026-09-25). Agency is off the page for now (pricing.js), and the three that are left sit in the middle with the toggle over them at their width - and with nothing beside or under them: the cards that used to sit under the plans pulled the eye off the prices. It was four across until then, at a smaller padding and price. */ .ob-planset { max-width: 1080px; margin: 0 auto var(--ob-site-sect); } .ob-planfoot { margin: 18px 0 0; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ob-ink-2); } .ob-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: var(--ob-site-gap); } /* pricing's head, set like the homepage's: a short title on one line, a subheading under it (Dave, 2026-09-25) */ .ob-pagehead.mid { max-width: 1120px; margin: 0 auto; text-align: center; } .ob-pagehead.mid .ob-lead { margin-left: auto; margin-right: auto; } .ob-pagehead.mid .ob-subhead { margin: 0 auto; max-width: 900px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; color: var(--ob-ink-2); text-wrap: balance; } .ob-pagehead.mid .ob-subhead a { color: var(--ob-accent-ink); text-decoration: none; } .ob-pagehead.mid .ob-subhead a:hover { text-decoration: underline; } /* signed in, the title is the plan you are on (2026-10-02): held, at its height, until the plan is known */ .ob-pagehead.wait { visibility: hidden; } /* ...and so is each card's button, so a guest's Join the waitlist never shows first (billing/planset.js) */ .ob-plan .ob-pill.wait { visibility: hidden; } /* AN OLDER PLAN'S BOX (2026-10-02): above the cards, filled like the lit card, the plan as paid on the left and Cancel plan or Keep on the right */ .ob-older { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; padding: 20px 24px; border-radius: var(--ob-radius-card, 18px); background: linear-gradient(160deg, var(--ob-accent-lift), var(--ob-accent) 45%, var(--ob-accent-ink)); color: #fff; .w { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; } .t { font-size: 17px; font-weight: 800; letter-spacing: -.01em; } .n { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .85); } .ob-pill { flex: 0 0 auto; background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; } /* not the plan that bills next (a change waits, or it is set to end): white, like a card */ &.quiet { background: var(--ob-card); border: 1px solid var(--ob-line); color: var(--ob-ink); .n { color: var(--ob-ink-2); } .ob-pill { border-color: var(--ob-faint-2); color: var(--ob-ink); } } } /* THE HEADLINE LIMIT. One panel per card, label and figure in the same blue. */ .ob-plan .limit { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding: 13px 15px; border-radius: var(--ob-radius-tile); .lbl { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .big { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } &.ours { background: var(--ob-accent-bg); .lbl, .big { color: var(--ob-accent-ink); } } } .ob-plan { display: flex; flex-direction: column; padding: 28px 28px 26px; .tier { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-muted); margin-bottom: 14px; } .price { display: flex; align-items: baseline; gap: 6px; } .price .n { font-size: 44px; font-weight: 800; letter-spacing: -.03em; color: var(--ob-ink); font-variant-numeric: tabular-nums; line-height: 1; } .price .per { font-size: 13px; font-weight: 600; color: var(--ob-muted); } .facts { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; } .facts li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--ob-line-in); font-size: 13.5px; font-weight: 600; color: var(--ob-ink-2); } .facts li b { font-weight: 800; color: var(--ob-ink); font-variant-numeric: tabular-nums; } /* a heading inside the list, so "roughly, if you did only this" carries the either/or once instead of every row repeating it */ .facts li.head { border-top: 0; padding-bottom: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ob-muted); } .facts.rough { margin-top: 14px; } .facts.rough + .facts li:first-child { border-top: 1px solid var(--ob-line-in); } /* THE "OR" ON THE LINE between posts read and posts published (Dave, 2026-10-02): the row's own hairline drawn as two lengths with the word between them, centred, in the heading's small capitals - so it works on the lit card's gradient as on white, where a word on a filled patch would show the patch */ .facts li.or { position: relative; border-top: 0; } .facts li.or .orline { position: absolute; left: 0; right: 0; top: 0; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; letter-spacing: .06em; line-height: 1; text-transform: uppercase; color: var(--ob-muted); } .facts li.or .orline::before, .facts li.or .orline::after { content: ""; flex: 1 1 0; border-top: 1px solid var(--ob-line-in); } /* the limit this card is NOT leading with: present, quiet, and never the big number */ .facts li.other { color: #0f766e; b { color: #0f766e; } } .price .from { font-size: 17px; font-weight: 700; color: var(--ob-muted); } .ob-pill { margin-top: auto; } .facts:last-of-type { margin-bottom: 22px; } /* THE LIT CARD (Dave, 2026-10-02): the plan you are on, or Popular when you have none, filled in the accent with its chip in the corner, the way the eye is meant to land. Everything on it turns white; its primary button turns white with blue words, a ghost one an outline */ position: relative; .chip { position: absolute; top: 22px; right: 22px; height: 26px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; background: var(--ob-accent-bg); color: var(--ob-accent-ink); } &.lit { background: linear-gradient(160deg, var(--ob-accent-lift), var(--ob-accent) 45%, var(--ob-accent-ink)); border-color: var(--ob-accent); box-shadow: 0 18px 40px -18px rgba(53, 71, 201, .55); .chip { background: rgba(255, 255, 255, .2); color: #fff; } .tier { color: rgba(255, 255, 255, .78); } .price .n { color: #fff; } .price .per, .price .from { color: rgba(255, 255, 255, .72); } .limit.ours { background: rgba(255, 255, 255, .14); .lbl, .big { color: #fff; } } .facts li { color: rgba(255, 255, 255, .82); border-top-color: rgba(255, 255, 255, .2); } .facts li b { color: #fff; } .facts li.head { color: rgba(255, 255, 255, .62); } .facts.rough + .facts li:first-child { border-top-color: rgba(255, 255, 255, .2); } .facts li.or .orline { color: rgba(255, 255, 255, .62); } .facts li.or .orline::before, .facts li.or .orline::after { border-top-color: rgba(255, 255, 255, .2); } .ob-pill.primary { background: #fff; border-color: #fff; color: var(--ob-accent-ink); } .ob-pill.ghost { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; } .ob-pill:disabled { opacity: .7; } } /* AGENCY DOES NOT FLIP, because it is already own-key - that is what makes it Agency. Dark, so the row reads as three plans and a different kind of thing. */ &.custom { background: var(--ob-ink); border-color: var(--ob-ink); .tier { color: #b6ece2; } .price .n { color: #fff; } .facts li { color: var(--ob-line); border-top-color: #3d4350; } .facts li b { color: #fff; } .facts li.head { color: var(--ob-muted); } .facts li.other, .facts li.other b { color: #b6ece2; } } } /* the lines every plan shares */ .ob-every { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ob-site-gap); margin-top: var(--ob-site-gap); .ob-card { padding: 22px 24px; } .ob-card .t { font-size: 14px; font-weight: 800; color: var(--ob-ink); margin-bottom: 4px; } .ob-card .d { font-size: 13.5px; font-weight: 500; color: var(--ob-ink-2); line-height: 1.5; } } /* ---- the pricing page's questions, beside X's prices (Dave, 2026-09-25) ---- One section where there were two: the plan-and-payment questions down the left at about 60%, short answers under hairlines; X's price list down the right as a card that stays in view while the questions scroll past it. It replaced a four-column rate table with an aside of paragraphs, and a separate band of questions under it */ .ob-qaprice { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 72px; align-items: start; .qa .ob-h2 { margin-bottom: 26px; } } /* ---- the questions, on every outside page (Dave, 2026-09-25) ---- One column of questions under hairlines, each a
: the question is the row, a small arrow in front of it points down and turns up when it opens, and the answer drops under it, lined up with the question's words. In front, not at the far right, because the rows are wide and a short question would leave its arrow a page-width from where the eye is (a plus in a round chip on the right was tried first, the same day). All closed to start, and opening one leaves the others as they are. The browser's own element, so the keyboard, a screen reader and find-in-page (which opens the one it finds) all work with no script. It replaced every answer drawn open in a two-column grid, which asked a reader to take in fourteen at once to find one */ .ob-qa { max-width: 880px; border-bottom: 1px solid var(--ob-line); .q { border-top: 1px solid var(--ob-line); } summary { list-style: none; display: flex; align-items: flex-start; gap: 14px; padding: 20px 0; line-height: 1.4; cursor: pointer; user-select: none; /* a quick second click opens it, never selects a word */ font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; color: var(--ob-ink); transition: color .15s ease; } summary::-webkit-details-marker { display: none; } summary:hover { color: var(--ob-accent); } summary:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 4px; border-radius: 6px; } /* the arrow: two sides of a small square, turned to point down, and up when open. Its box is one line of the question tall, so on a question that wraps it sits by the first line */ .tog { position: relative; flex: 0 0 14px; height: 1.4em; color: var(--ob-muted); transition: color .15s ease; } .tog::before { content: ""; position: absolute; left: 2px; top: 50%; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; } summary:hover .tog { color: var(--ob-accent); } .q[open] .tog { color: var(--ob-ink); } .q[open] .tog::before { transform: translateY(-25%) rotate(225deg); } .a { padding: 0 24px 22px 28px; } /* 28: the arrow and the gap, so the words line up */ .ob-copy { font-size: 15px; max-width: 640px; } ul.ob-copy { margin: 6px 0 0; padding-left: 20px; } ul.ob-copy li { margin: 2px 0; } } /* The answer slides open where the browser can size to auto (Chrome 131 on); elsewhere it just appears. Kept out of the nest above so a browser that does not know the pseudo drops these two rules and nothing else */ .ob-qa { interpolate-size: allow-keywords; } .ob-qa .q::details-content { block-size: 0; overflow: hidden; transition: block-size .25s ease, content-visibility .25s allow-discrete; } .ob-qa .q[open]::details-content { block-size: auto; } /* the homepage's: the title on the left, staying in view while the list scrolls past it */ .ob-asked { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 72px; align-items: start; > .ob-h2 { position: sticky; top: calc(var(--ob-site-nav-h) + 24px); margin: 0; } } /* X's price list as a card: a glyph, what it is and when it is charged, and the price per one. The post with a link is the one to watch, so its glyph and price are in the rose */ .ob-xprices { position: sticky; top: calc(var(--ob-site-nav-h) + 24px); padding: 26px 26px 22px; .h { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.015em; color: var(--ob-ink); } .sub { margin: 4px 0 16px; font-size: 13.5px; font-weight: 600; color: var(--ob-muted); } ul { margin: 0; padding: 0; list-style: none; } li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--ob-line-in); } .ic { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; background: var(--ob-accent-bg); color: var(--ob-accent-ink); } .ic svg { width: 19px; height: 19px; } .what { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .what b { font-size: 14.5px; font-weight: 800; color: var(--ob-ink); } .what span { font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--ob-muted); } .usd { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; } .usd b { font-size: 15px; font-weight: 800; color: var(--ob-ink); font-variant-numeric: tabular-nums; } .usd span { font-size: 12px; font-weight: 600; color: var(--ob-muted); } li.loud .ic { background: var(--ob-rose-chip); color: var(--ob-rose-ink); } li.loud .usd b { color: var(--ob-rose-ink); } .more { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--ob-accent-ink); text-decoration: none; } .more:hover { text-decoration: underline; } } /* two columns of a table's worth of words: the table, and the sentence beside it */ .ob-beside { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; } /* ---- the two modes, side by side ---- */ .ob-mode { padding: 28px; .head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .head .ob-h3 { margin: 0; } .ob-copy { font-size: 14px; } .rows { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; } .rows li { display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid var(--ob-line-in); font-size: 13.5px; font-weight: 600; color: var(--ob-ink-2); } .rows li .k { flex: 0 0 150px; color: var(--ob-muted); } .rows li .v { color: var(--ob-ink); font-weight: 700; } } /* ---- the closing call, on ink ---- */ .ob-close { margin: 32px 0 48px; padding: 72px 56px; border-radius: var(--ob-radius); background: var(--ob-site-dark); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; .ob-h2 { color: #fff; margin-bottom: 10px; } .ob-copy { color: var(--ob-faint-1); font-size: 16px; max-width: 520px; } .ob-ctas { margin-top: 22px; } .ob-pill.primary { background: #fff; color: var(--ob-ink); } .ob-pill.primary:hover { background: var(--ob-canvas); } } /* ---- the footer ---- */ .ob-sitefoot { border-top: 1px solid var(--ob-line); margin-top: 24px; padding: 36px 0 48px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 26px; font-size: 13px; font-weight: 600; color: var(--ob-muted); .links { display: flex; flex-wrap: wrap; gap: 4px 20px; } .links a { color: var(--ob-ink-2); text-decoration: none; } .links a:hover { color: var(--ob-ink); text-decoration: none; } .co { margin-left: auto; font-weight: 500; font-size: 12px; color: var(--ob-muted-2); } .ob-sitelogo .name { font-size: 15px; } .ob-sitelogo .mark { width: 20px; height: 24px; } } /* ---- a page of prose: the docs and the legal pages ---- */ .ob-pagehead { padding: 64px 0 36px; max-width: 960px; /* wider than the prose: a title wants to land in two lines, not three */ } .ob-pagehead .ob-lead { margin-top: 12px; } .ob-docs { display: grid; grid-template-columns: var(--ob-site-docs-nav-w) minmax(0, 1fr); gap: 72px; align-items: start; padding-bottom: 40px; } /* An operation's page has a third column: the summary card. The prose gives up the width, because a docs column at 720px is still a reading measure and the card is what a person came to check. Placed explicitly rather than by source order, so the card can sit before the body in the DOM and read first when the columns collapse on a phone. */ .ob-docs.railed { grid-template-columns: var(--ob-site-docs-nav-w) minmax(0, 1fr) 260px; gap: 40px; .ob-docsnav { grid-area: 1 / 1; } .ob-docbody { grid-area: 1 / 2; } .ob-docrail { grid-area: 1 / 3; } } .ob-docrail { position: sticky; top: calc(var(--ob-site-nav-h) + 24px); } /* THE CONNECT BLOCK IN THE PROSE (docs.js cuts the prose around it): Setup's block, which frames itself, the prose's width, with the two halves of the prose closing up to it */ .ob-docconnect { container-type: inline-size; max-width: var(--ob-site-prose-w); margin: 6px 0 18px; /* on the page's grey, not inside a card, so its edge is a card's edge */ .ob-connectbox .split { border-color: var(--ob-line); } } /* wide, the list of harnesses is drawn on the canvas, which is this page's own ground, so here it takes a shade off the card instead and the box lifts a little: otherwise the list read as part of the page and only the right half as a box (Dave, 2026-10-05). The same width the block folds at, where it has no frame to lift */ @container (min-width: 560px) { .ob-docconnect .ob-connectbox .split { box-shadow: 0 1px 2px rgba(22, 24, 29, .04), 0 8px 24px rgba(22, 24, 29, .05); } .ob-docconnect .ob-connectbox .side { background: var(--ob-card-head); } } /* narrow, the block folds to its row of marks and loses its frame - the same width its own container query folds at - so the docs give it a card */ @container (max-width: 559px) { .ob-docconnect > div { padding: 14px; background: var(--ob-card); border: 1px solid var(--ob-line); border-radius: var(--ob-radius-panel); } } .ob-prose:has(+ .ob-docconnect) { padding-bottom: 0; } .ob-docconnect + .ob-prose > h2:first-child { margin-top: 24px; } .ob-doccard { padding: 16px 18px 18px; background: var(--ob-card); border: 1px solid var(--ob-line); border-radius: var(--ob-radius-panel); > *:first-child { margin-top: 0; } h3 { margin: 18px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-muted); } p { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ob-ink-2); } /* the endpoints, one per line, each on the card's full width: a path like /2/users/{id}/timelines/reverse_chronological does not fit a table cell at this size and broke mid-word when it tried */ ul { margin: 0 0 14px; padding: 0; list-style: none; } li + li { margin-top: 6px; } p:has(> code:only-child) { margin: 0 0 14px; } li code, p > code:only-child { display: block; padding: 7px 9px; background: var(--ob-line-in); border-radius: 8px; line-height: 1.5; word-break: break-word; } li em { display: block; margin-top: 3px; font-size: 11.5px; font-style: normal; font-weight: 600; color: var(--ob-muted); } /* the card is one two-column table, label then value, and its header row says nothing */ table { width: 100%; border-collapse: collapse; } thead { display: none; } td { padding: 7px 0; font-size: 13px; line-height: 1.45; color: var(--ob-ink); vertical-align: top; border-bottom: 1px solid var(--ob-line-in); } tr:last-child td { border-bottom: 0; } td:first-child { width: 40%; padding-right: 10px; color: var(--ob-muted); font-weight: 600; } code { font-family: var(--ob-mono); font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; color: var(--ob-ink); } a { color: var(--ob-accent-ink); text-decoration: none; font-weight: 600; } a:hover { text-decoration: underline; } } /* the note under the card (docs.js, data-note): what the call cannot do yet, on the accent's tint */ .ob-docnote { margin-top: 12px; padding: 14px 18px 16px; background: var(--ob-accent-bg); border: 1px solid var(--ob-accent-ring); border-radius: var(--ob-radius-panel); h3 { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-accent-ink); } p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ob-ink-2); } p + p { margin-top: 8px; } } .ob-docsnav { position: sticky; top: calc(var(--ob-site-nav-h) + 24px); display: flex; flex-direction: column; gap: 2px; .ob-lbl { padding: 0 12px; margin-bottom: 8px; } a { display: block; padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ob-ink-2); text-decoration: none; } a:hover { background: var(--ob-card); color: var(--ob-ink); text-decoration: none; } a.on { background: var(--ob-accent-bg); color: var(--ob-accent-ink); font-weight: 700; } /* The second level: the operations, under Operations, only while you are in them. They are spelled the way an agent spells them, so they are set in the mono face and hang off a rule that says which parent they belong to. */ .kids { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 10px 12px; padding-left: 10px; border-left: 1px solid var(--ob-line); } .kids a { padding: 5px 10px; font-family: var(--ob-mono); font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; } } /* Everything under .ob-prose is rendered from markdown, so it is styled by element. */ .ob-prose { max-width: var(--ob-site-prose-w); font-size: 16px; font-weight: 500; line-height: 1.65; color: var(--ob-ink-2); padding-bottom: 40px; > *:first-child { margin-top: 0; } h1 { font-size: 34px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: var(--ob-ink); margin: 0 0 18px; } h2 { font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--ob-ink); margin: 40px 0 12px; } h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ob-ink); margin: 28px 0 8px; } p { margin: 0 0 14px; } ul, ol { margin: 0 0 14px; padding-left: 22px; } li { margin-bottom: 6px; } li::marker { color: var(--ob-muted); } strong { font-weight: 700; color: var(--ob-ink); } a { color: var(--ob-accent-ink); text-decoration: none; font-weight: 600; } a:hover { text-decoration: underline; } /* a link whose whole label is code - every operation in the docs index - or the code would take the ink colour off the rule below and the link would not look like one */ a code { color: inherit; } hr { border: 0; border-top: 1px solid var(--ob-line); margin: 34px 0; } blockquote { margin: 0 0 14px; padding: 2px 0 2px 16px; border-left: 3px solid var(--ob-accent-ring); color: var(--ob-ink-2); } /* a screenshot of the product (docs.js gives it its 2x). Markdown puts it in a paragraph of its own; {.half} and {.tall} after it, in the markdown, draw a close-up or a tall one at a size that is not the whole column. ON A WHITE MAT (2026-10-05, Dave): most of a shot is the app's canvas, which is this page's own grey, so with only a rim Home's middle column ran straight into the page. The mat and the lift are the connect block's (.ob-docconnect), so the two read as one kind of thing */ img { display: block; width: auto; /* its own size (the 2x is density-corrected), never blown up */ max-width: 100%; height: auto; margin: 8px 0 26px; padding: 6px; background: var(--ob-card); border-radius: 16px; box-shadow: 0 0 0 1px var(--ob-line), 0 1px 2px rgba(22, 24, 29, .04), 0 8px 24px rgba(22, 24, 29, .05); } img.half { max-width: min(520px, 100%); } /* never past the column: a tall one at 400 widened a phone's page */ img.tall { max-width: min(400px, 100%); } /* a white chip with a rim, since the prose sits on the canvas and a grey chip vanished into it; a link's chip is the accent's, so an operation reads as a link at a glance */ code { font-family: var(--ob-mono); font-size: .84em; font-weight: 500; background: var(--ob-card); box-shadow: inset 0 0 0 1px var(--ob-line); border-radius: 6px; padding: .12em .42em; color: var(--ob-ink); } a code { background: var(--ob-accent-bg); box-shadow: none; } pre { margin: 0 0 16px; padding: 14px 16px; border-radius: var(--ob-radius-tile); background: var(--ob-ink); color: #e8eaf1; font-family: var(--ob-mono); font-size: 12.5px; line-height: 1.55; overflow-x: auto; } pre code { background: none; box-shadow: none; padding: 0; color: inherit; font-size: inherit; } table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; } th { text-align: left; padding: 0 12px 8px 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-muted); border-bottom: 1px solid var(--ob-line); } td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--ob-line-in); vertical-align: top; } tr:last-child td { border-bottom: 0; } td:first-child { color: var(--ob-ink); font-weight: 700; white-space: nowrap; } /* A DOCS TABLE SITS IN A BOX THAT SCROLLS SIDEWAYS (docs.js, tables). On a phone a wide one - the plans, an operation's statuses - is wider than the column, and on its own it widened the whole page, which then panned. The box takes the table's margin; the table keeps its full width, so nothing changes where it fits */ .ob-tablewrap { overflow-x: auto; margin: 0 0 18px; } .ob-tablewrap > table { margin: 0; } /* A first column that holds a LABEL must not wrap - "Billing records", "Page size", "X's charge" - which is what the nowrap above is for, and it is right for every table in md/docs. The legal pages are the exception: their first column holds a sentence ("The full content of a call: the request, and X's response", every purpose in the lawful basis table), and nowrap put that sentence on one line, took the whole table's width for it and left the second column a word wide. So the legal prose wraps its first column and carries the emphasis at 600 rather than 700, because a bold sentence is a lot of bold. .ob-prose.legal is set in apps/frontend/legal/legal.html. */ &.legal td:first-child { white-space: normal; font-weight: 600; } /* the legal pages' "Last updated" line: markdown emits it as a lone emphasised paragraph, and it is always the first one. Scoped to :first-child because :only-child counts elements and not text, so without it every sentence with one italic in it - "Press Rotate the key" - came out grey and a size small. */ > p:first-child > em:only-child { color: var(--ob-muted); font-size: 13.5px; font-style: normal; font-weight: 600; } } .ob-prose-loading { padding: 20px 0; font-size: 14px; font-weight: 600; color: var(--ob-muted); } .ob-prose-error { padding: 20px 0; font-size: 14px; font-weight: 600; color: var(--ob-rose-ink); } /* ---- the fold ---- Up: past 1800px the column grows once more and the type with it, so a big monitor is not a narrow strip with the same page on it. Down: the tablet, then the phone. */ @media (min-width: 1800px) { :root { --ob-site-w: 1520px; --ob-site-sect: 96px; --ob-site-prose-w: 840px; --ob-site-docs-nav-w: 260px; } .ob-h1 { font-size: 68px; } .ob-h2 { font-size: 42px; } .ob-lead { font-size: 20px; max-width: 640px; } .ob-hero { padding: 128px 0 96px; gap: 96px; } } /* Between the phone and a wide screen the three columns stop fitting, so the card goes above the prose instead of beside it. */ @media (max-width: 1280px) and (min-width: 961px) { .ob-docs.railed { grid-template-columns: var(--ob-site-docs-nav-w) minmax(0, 1fr); gap: 48px 56px; } .ob-docs.railed .ob-docrail { grid-area: 1 / 2; } .ob-docs.railed .ob-docbody { grid-area: 2 / 2; } .ob-docrail { position: static; } } @media (max-width: 960px) { :root { --ob-site-pad: 24px; --ob-site-sect: 56px; } .ob-hero { grid-template-columns: 1fr; gap: 36px; padding: 48px 0 40px; } .ob-h1 { font-size: 42px; } .ob-three, .ob-every { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ob-plans { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-left: auto; margin-right: auto; } .ob-beside { grid-template-columns: minmax(0, 1fr); } /* not 1fr: the config block's long lines would widen the page */ .ob-close { grid-template-columns: 1fr; padding: 40px 28px; } .ob-docs, .ob-docs.railed { grid-template-columns: minmax(0, 1fr); gap: 20px; } /* not 1fr, as .ob-beside: a long line in a pre widened the page */ .ob-docs.railed .ob-docsnav, .ob-docs.railed .ob-docbody, .ob-docs.railed .ob-docrail { grid-area: auto; } .ob-docrail { position: static; } .ob-docsnav { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; } .ob-docsnav .ob-lbl { display: none; } .ob-docsnav .kids { flex-direction: row; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; border-left: 0; } } @media (max-width: 640px) { :root { --ob-site-pad: 18px; --ob-site-gap: 14px; --ob-site-sect: 44px; } .ob-h1 { font-size: 36px; } .ob-h2 { font-size: 28px; } .ob-hero { padding: 36px 0 32px; } .ob-sect { padding: 40px 0; } .ob-three, .ob-two, .ob-every { grid-template-columns: 1fr; } .ob-sitenav .inner { gap: 12px; } .ob-sitenav .links a { height: 40px; padding: 0 9px; font-size: 13px; } /* Terms and Privacy leave the bar on a phone: with them the row ran past the screen and took Sign in with it. The footer carries both */ .ob-sitenav .links a.legal { display: none; } .ob-sitenav .right .ob-pill { height: 40px; } .ob-sitenav .ob-pill.face { padding-left: 5px; } .ob-sitelogo .name { display: none; } .ob-sitefoot .co { margin-left: 0; } /* A THUMB'S WORTH (40px) for every link a phone taps out here, in padding rather than type: the footer's row and the docs' topics and operations */ .ob-sitefoot .links { gap: 0 8px; margin: 0 -6px; } .ob-sitefoot .links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; } .ob-docsnav a { display: flex; align-items: center; min-height: 40px; } /* the logos, the mark alone here, get the same: padding out and margin back, so the mark does not move */ .ob-sitenav .ob-sitelogo { min-height: 40px; padding: 0 8px; margin: 0 -8px; } .ob-sitefoot .ob-sitelogo { min-height: 40px; padding: 0 10px; margin: 0 -10px; } .ob-mode .rows li .k { flex-basis: 110px; } } /* A SIGNED-IN PHONE KEEPS THE FACE AND DROPS THE WORD (2026-10-05): with "Dashboard" in it the bar was 408px wide and ran past every phone, the button flush to the edge at 390 and off it at 360. The face alone is still the way back, and the link keeps its name for a screen reader */ @media (max-width: 440px) { .ob-sitenav .ob-pill.face > span:not(.ob-circle) { display: none; } .ob-sitenav .ob-pill.face { padding: 0 4px; } } /* ---- the waitlist: /waitlist (marketing/waitlist*.js, dev/docs/waitlist.md) ---- The pitch on the left of the hero, the card that takes the address on the right; under it the three selling points on a band of ink with the product's drawings on white, then why there is a list beside the two keys. The card's steps reuse the ceremony's .ob-cstep (okaybot-identity.css): a title, a line under it, the controls, the fine print. */ .ob-wlhero { padding: 96px 0 72px; } .ob-wlhero .ob-h1 { font-size: 56px; } .ob-joincard { width: 100%; max-width: 460px; justify-self: end; padding: 34px 34px 30px; box-shadow: 0 20px 60px rgba(22, 24, 29, .10); .ob-cstep .title { font-size: 30px; } .ob-cstep .controls { margin-top: 24px; } } /* the action row under the questions, on the card and on the ceremony's refusal step alike */ .ob-cstep .acts { display: flex; align-items: center; gap: 8px; margin-top: 24px; } .ob-cstep .acts .ob-pill.primary { flex: 1 1 auto; } /* the two optional questions, one row of choices each (waitlist_questions.js). Not .ob-ask: that is the atoms' in-place confirmation. The choice is a hairline pill, the accent when chosen; a second tap on it clears it */ .ob-wlq { display: flex; flex-direction: column; gap: 8px; } .ob-wlq + .ob-wlq { margin-top: 18px; } .ob-wlq .q { font-size: 13.5px; font-weight: 700; color: var(--ob-ink); } .ob-wlq .q .u { font-weight: 600; color: var(--ob-muted); margin-left: 4px; } .ob-wlq .opts { display: flex; flex-wrap: wrap; gap: 8px; } .ob-wlopt { display: inline-flex; align-items: center; height: var(--ob-seg-h); padding: 0 13px; border: 1px solid var(--ob-line); border-radius: 999px; background: var(--ob-card); font-family: var(--ob-font); font-size: 12.5px; font-weight: 700; color: var(--ob-ink); cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .ob-wlopt:hover { background: var(--ob-canvas); } .ob-wlopt.on { background: var(--ob-accent-bg); border-color: var(--ob-accent-ring); color: var(--ob-accent-ink); } .ob-wlopt:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; } /* the band: the section on ink, full width, its column inside it. The drawings sit on white cards with no hairline - the ink is the edge - and the words go white and faint under them. Chosen over three white cards with grey figure areas, which vanished into the grey page */ .ob-band { background: var(--ob-site-dark); padding: 72px 0 76px; .head { max-width: 740px; margin-bottom: 44px; } .ob-eyebrow { color: var(--ob-accent-ring); } .ob-h2 { color: #fff; } .ob-h3 { color: #fff; margin: 22px 0 6px; } .ob-copy { color: var(--ob-faint-1); font-size: 14.5px; } .fig { background: var(--ob-card); border-radius: var(--ob-radius); padding: 24px 24px 22px; min-height: 204px; display: flex; flex-direction: column; justify-content: center; gap: 10px; } /* a capture in a figure (the waitlist's three): one height for all three, so the headings under them line up, and each picture as large as fits it */ .fig.shot { height: 262px; min-height: 0; padding: 18px; align-items: center; background: var(--ob-canvas); } .fig.shot img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 12px; } } /* why there's a list */ .ob-copy.lg { font-size: 16px; max-width: 560px; } .ob-copy.lg.wide { max-width: 760px; } /* one line under a heading that runs the width of the page */ @media (max-width: 960px) { .ob-wlhero { padding: 48px 0 40px; } .ob-wlhero .ob-h1 { font-size: 40px; } .ob-joincard { max-width: none; justify-self: stretch; padding: 26px 22px 22px; box-shadow: none; } .ob-band { padding: 48px 0 52px; } .ob-band .head { margin-bottom: 28px; } } /* ---- contact: /contact (marketing/contact*.js) ---- The waitlist's hero again: the ways to reach us on the left, the card that takes a message on the right (.ob-joincard, its steps .ob-cstep). What it is about is a button that opens a menu of four, each with its icon, because a select can draw no icon. */ .ob-contacthero { padding: 96px 0 88px; align-items: start; } /* top, so the words stay put when the card shrinks to Message sent */ .ob-contacthero .ob-h1 { font-size: 56px; } /* the address, and the docs: two tiles under the lead */ .ob-ways { margin-top: 36px; max-width: 460px; display: flex; flex-direction: column; gap: 10px; .way { display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; border: 1px solid var(--ob-line); border-radius: var(--ob-radius-tile); background: var(--ob-card); color: var(--ob-ink); text-decoration: none; } a.way { padding-right: 16px; transition: border-color .12s; } a.way:hover { border-color: var(--ob-accent-ring); text-decoration: none; } .ic { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ob-accent-bg); color: var(--ob-accent-ink); } .ic.quiet { background: var(--ob-canvas); color: var(--ob-ink-2); } .ic svg { width: 18px; height: 18px; } .w { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .n { font-size: 12.5px; font-weight: 600; color: var(--ob-ink-2); } .t { font-size: 16px; font-weight: 700; color: var(--ob-ink); text-decoration: none; overflow-wrap: anywhere; } a.t:hover { text-decoration: underline; } .ob-pill { flex: 0 0 auto; height: 34px; padding: 0 14px; font-size: 13px; } .go { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ob-faint-3); } } /* the card: a label over each field, the message a taller field */ .ob-contactcard { .ob-cstep .controls { gap: 18px; } .field { display: flex; flex-direction: column; gap: 8px; } .lbl { font-size: 13px; font-weight: 700; color: var(--ob-ink-2); } /* .lg as well, to outrank .ob-cstep .ob-input.lg (okaybot-identity.css), whose 0 18px padding and 50px height are a one-line field's */ textarea.ob-input.lg { height: auto; min-height: 150px; padding: 14px 18px; font-weight: 600; line-height: 1.55; resize: vertical; } } /* sent: the tick over the title */ .ob-sentmark { width: 48px; height: 48px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ob-mint-bg); color: var(--ob-mint-ink); svg { width: 22px; height: 22px; } } /* what it is about: the button, the field's height, and the menu hung under it */ .ob-topic { position: relative; .pick { width: 100%; height: 50px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 10px; border: 1px solid var(--ob-line); border-radius: var(--ob-radius-tile); background: var(--ob-card); font-family: var(--ob-font); font-size: 15px; font-weight: 700; color: var(--ob-ink); text-align: left; cursor: pointer; outline: none; transition: border-color .12s, box-shadow .12s; } .pick.none { padding-left: 18px; font-weight: 600; color: var(--ob-muted); } .pick:focus-visible, &.open .pick { border-color: var(--ob-accent); box-shadow: 0 0 0 3px var(--ob-accent-bg); } .now { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; } .chev { flex: 0 0 auto; width: 18px; height: 18px; color: var(--ob-muted); transition: transform .12s; } &.open .chev { transform: rotate(180deg); } .ic { flex: 0 0 auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ob-accent-bg); color: var(--ob-accent-ink); } .ic svg { width: 16px; height: 16px; } .menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--ob-card); border-radius: var(--ob-radius-tile); box-shadow: 0 0 0 1px var(--ob-line), var(--ob-shadow-menu); } .menu button { width: 100%; min-height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 8px; border: 0; border-radius: 10px; background: transparent; font-family: var(--ob-font); font-size: 14.5px; font-weight: 700; color: var(--ob-ink); text-align: left; cursor: pointer; outline: none; } .menu button:hover, .menu button:focus-visible { background: var(--ob-canvas); } .menu button.on { background: var(--ob-site-good); } .menu .w { flex: 1 1 auto; min-width: 0; } .menu .tick { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ob-accent); } } @media (max-width: 960px) { .ob-contacthero { padding: 48px 0 40px; } .ob-contacthero .ob-h1 { font-size: 40px; } .ob-ways { max-width: none; } } /* ═══════════════════════════════════════════════════════════════════════════════════════════ THE HOMEPAGE, 2026-09-18, rebuilt around screenshots 2026-09-25 ELEVEN BANDS, AND THE GROUND IS WHAT SEPARATES THEM. The page used to be one canvas with a hairline between every section and a white card around every thought - about twenty of them, which is the same as none: a card is the loudest separator there is (a ground change, a border, a radius and a shadow at once), so using it everywhere leaves nothing emphasised. The order of grounds is fixed and alternates: 1 hero canvas 6 every post canvas 2 belt canvas 7 your costs INK (the price line closes it) 3 problem WHITE 8 how it works WHITE 4 your posts canvas 9 questions canvas 5 your calendar WHITE 10 the close INK From 3 down it is a plain alternation, and that is the whole of the separating. Four of the bands are the product's four chapters - the posts, the calendar, every post, the costs - and each is words beside one small view of the real screen (.ob-chapter, .ob-shot, above) - never a whole screen across the page, which only the hero is. The wire and the guards went on 2026-09-25 (Dave): the page is for the person, not their agent. TWO INK BANDS, NO MORE. The costs and the close; a third and none of them mean anything. The ink used to hold "the fix" as three drawn cards; the chapters replaced it, and the costs took the ink because money is the claim a reader should not miss. NO RULE DOES A GROUND'S JOB. The only hairlines left are inside a list (the questions, the night sheets, the ledger, the points' accent rule), where they separate rows of one kind rather than sections. The one exception is the price line's rule inside the costs band. ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* the band on white: the same shape as .ob-band, the other ground */ .ob-bandw { background: var(--ob-card); padding: 76px 0 80px; } .ob-bandw.tight { padding: 56px 0 60px; } .ob-bandw .head { max-width: 740px; margin-bottom: 44px; } /* a centred chapter head. Every other head on the page is left-aligned, so centring one says "new chapter" without a line or a box */ .head.mid, .ob-band .head.mid, .ob-bandw .head.mid { max-width: 820px; margin-left: auto; margin-right: auto; text-align: center; } .head.mid .ob-site-sub { margin-left: auto; margin-right: auto; margin-bottom: 0; } .ob-ctas.mid { justify-content: center; margin-top: 38px; } /* .ob-band recolours .ob-h2 and .ob-copy for ink and always has; .ob-site-sub is the line under a centred head and was never in that list, so it kept its --ob-ink-2 and went near-invisible on the two ink bands */ .ob-band .ob-site-sub { color: var(--ob-faint-1); } .ob-eyebrow.rose { color: var(--ob-rose-ink); } /* ---- the harness marks on the belt ---- THE VENDORS' OWN MARKS (2026-09-25), in images/site/harness/, each in its own colours: Claude Code's mascot, Cursor's cube, OpenAI's knot for Codex, OpenClaw's lobster, Hermes Agent's icon and Windsurf's wave. Where they came from is images/site/harness/README.md. They replaced monograms on tiles in our own tints, which were placeholders and said so. A mark is 20 pixels square and sits on the name's line; the word is still the name. */ .ob-belt .glyph { display: block; width: 20px; height: 20px; margin-right: 9px; flex: 0 0 auto; object-fit: contain; } /* the belt's own rows have to stop being baseline-aligned once they carry a mark */ .ob-belt { align-items: center; } .ob-belt .name { display: inline-flex; align-items: center; } /* ---- 3. the night: the same six requests, twice ---- The counts and every price beside them come from the server (marketing.js, figures), so the story cannot state a rate that is not X's. */ .ob-night { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 22px; align-items: stretch; margin-top: 40px; } .ob-night .arrow { align-self: center; color: var(--ob-faint-2); } .ob-night .arrow svg { display: block; width: 28px; height: 28px; } .ob-side { display: flex; flex-direction: column; min-width: 0; } .ob-side > .lbl { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .ob-side > .lbl { margin-bottom: 11px; display: flex; align-items: center; justify-content: center; gap: 8px; } /* the face in front of each side's label: 😱 without, 😁 with (Dave, 2026-09-25; tried after "You woke up" and moved back) */ .ob-side > .lbl .face { font-size: 20px; line-height: 1; letter-spacing: 0; } .ob-side.bad > .lbl { color: var(--ob-rose-ink); } .ob-side.good > .lbl { color: var(--ob-accent-ink); } .ob-sheet { flex: 1 1 auto; border-radius: var(--ob-radius); padding: 2px 22px 18px; } .ob-side.bad .ob-sheet { background: var(--ob-rose-card); border: 1px solid var(--ob-rose-edge); } .ob-side.good .ob-sheet { background: var(--ob-site-good); border: 2px solid var(--ob-accent); } .ob-nrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ob-line-in); .t { flex: 0 0 42px; font-family: var(--ob-mono); font-size: 12px; color: var(--ob-ink-2); } .w { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--ob-ink-2); } .w b { font-weight: 800; color: var(--ob-ink); } .w b.wait { color: var(--ob-butter-ink); } .w b.stop { color: var(--ob-rose-ink); } .w .sub { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--ob-ink-2); } .c { flex: 0 0 78px; text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ob-rose-ink); } .c.big { font-size: 18px; font-weight: 800; } .c.none { color: var(--ob-ink-2); font-weight: 600; } .c.spent { color: var(--ob-ink); } /* money the good side did spend, on purpose: not damage */ } .ob-side.bad .ob-nrow { border-bottom-color: var(--ob-rose-line); } .ob-nrow.hd { padding: 12px 0 8px; .t, .w, .c { font-family: var(--ob-font); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ob-ink-2); } } .ob-side.bad .ob-nrow.hd .t, .ob-side.bad .ob-nrow.hd .w, .ob-side.bad .ob-nrow.hd .c { color: var(--ob-rose-ink); } /* the pivot: the same moment closes both columns */ .ob-nrow.woke { border-bottom: 2px solid var(--ob-ink); .t { color: var(--ob-ink); } .w { color: var(--ob-ink); font-size: 14px; } .c { color: var(--ob-ink); } } .ob-ntot { display: flex; align-items: baseline; gap: 12px; padding: 15px 0 0; .k { flex: 1 1 auto; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ob-rose-ink); } .v { font-size: 26px; font-weight: 800; color: var(--ob-ink); font-variant-numeric: tabular-nums; } } .ob-side.good .ob-ntot .k { color: var(--ob-accent-ink); } .ob-nnote { margin: 2px 0 0; text-align: right; font-size: 13.5px; font-weight: 600; color: var(--ob-rose-ink); } .ob-nnote.good { color: var(--ob-accent-ink); } /* the placeholder the agent never filled in. It is one token, so it wraps before itself and never down the middle - which it did, in the narrow card on the ink band */ .ob-ph { white-space: nowrap; font-style: normal; font-weight: 700; background: var(--ob-rose-chip); color: var(--ob-rose-ink); padding: 1px 6px; border-radius: 5px; } /* ---- 7. how it works: three ledger rows, not three cards. A third of the furniture, and the stack reads as a sequence in a way three cards in a row never do. The block is half the height of the ledger beside it, so its column centres rather than leaving the bottom two thirds of the page empty ---- */ .ob-beside.mid { align-items: center; } /* THE STEPS WITHOUT RULES (Dave, 2026-09-25): the heavy ink lines above and below went. Each number sits in a soft round badge, and a thin line joins the badges down the left, so the three read as a sequence with nothing boxing them in */ .ob-ledger { position: relative; margin-top: 32px; display: flex; flex-direction: column; gap: 26px; .r { position: relative; display: flex; align-items: flex-start; gap: 18px; } /* the thread from each badge down to the next, so it stops at the last one however tall a step's words wrap */ .r:not(:last-child)::after { content: ''; position: absolute; left: 17px; top: 36px; bottom: -26px; width: 2px; background: var(--ob-accent-bg); } .n { flex: 0 0 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--ob-accent-bg); color: var(--ob-accent-ink); font-size: 15px; font-weight: 800; line-height: 1; } .r > div { padding-top: 6px; } .ob-h3 { margin: 0 0 4px; } .ob-copy { font-size: 14.5px; } } /* ---- what it costs: one centred line, and no furniture at all. The seven X rates and the four plans live on /pricing, one click away in the nav; a per-call rate card on our own homepage is the most reseller-shaped thing we could publish (dev/docs/x-risk.md). Since 2026-09-25 it closes the costs chapter on ink (.ink) rather than being a band of its own ---- */ .ob-price1 { padding: var(--ob-site-sect) 0; text-align: center; .n { margin: 0 0 12px; font-size: 38px; font-weight: 800; letter-spacing: -.028em; color: var(--ob-ink); } .ob-copy { max-width: 560px; margin: 0 auto; } .ob-ctas { margin-top: 26px; } } .ob-price1.ink { padding: 72px 0 0; margin-top: 64px; border-top: 1px solid rgba(255, 255, 255, .1); .n { color: #fff; } .ob-pill.primary { background: var(--ob-accent); color: #fff; } .ob-pill.primary:hover { background: var(--ob-accent-lift); } .ob-pill.text { color: var(--ob-faint-1); } } /* the costs chapter on ink: the band's usual padding, a little more at the foot */ .ob-band.costs { padding: 80px 0 84px; } /* ---- 11. the close, on ink, centred ---- */ .ob-band.closer { padding: 84px 0 88px; .ob-h2 { font-size: 44px; } .ob-pill.primary { background: var(--ob-accent); color: #fff; } .ob-pill.primary:hover { background: var(--ob-accent-lift); } } @media (max-width: 1280px) { .ob-chapter { gap: 48px; } } @media (max-width: 960px) { .ob-bandw { padding: 52px 0 56px; } .ob-bandw.tight { padding: 44px 0 48px; } .ob-band.closer { padding: 56px 0 60px; } .ob-band.closer .ob-h2 { font-size: 32px; } .ob-band.costs { padding: 52px 0 56px; } .ob-night { grid-template-columns: 1fr; gap: 28px; } .ob-night .arrow { display: none; } .ob-price1 .n { font-size: 30px; } .ob-price1.ink { padding-top: 48px; margin-top: 44px; } .ob-chapter, .ob-chapter.flip { grid-template-columns: minmax(0, 1fr); gap: 32px; } .ob-asks { grid-template-columns: minmax(0, 1fr); max-width: 560px; } .ob-qaprice { grid-template-columns: minmax(0, 1fr); gap: 40px; } .ob-asked { grid-template-columns: minmax(0, 1fr); gap: 20px; } .ob-asked > .ob-h2 { position: static; } .ob-xprices { position: static; } .ob-chapter.below { margin-top: 48px; } .ob-chapter.flip > .ob-shot { order: 2; } /* stacked, the words come first either way */ .ob-hero.stack { padding: 48px 0 16px; } .ob-hero.stack .ob-h1 { font-size: 46px; } .ob-hero.stack .ob-subhead { font-size: 21px; } .ob-hero.stack .ob-shot { margin-top: 36px; } } @media (max-width: 640px) { .ob-sheet { padding: 2px 16px 16px; } .ob-nrow .t { flex-basis: 38px; } .ob-nrow .c { flex-basis: 64px; } .ob-hero.stack { padding: 36px 0 12px; } .ob-hero.stack .ob-h1 { font-size: 38px; } .ob-hero.stack .ob-subhead { font-size: 19px; } .ob-pagehead.mid .ob-subhead { font-size: 18px; } .ob-shot { border-radius: 10px; } .ob-h3.big { font-size: 22px; } } /* ============================================ OKAYBOT SETUP MODE What Home draws while the workspace is not set up (setup/flow.js): numbered circles down the left, joined by a line, and beside each the one thing to do. The current step is the only card; the ones before it have folded to a tick and their answer, the one after it is a silhouette with a faint title. The line is what says these are steps rather than cards. No rail and no second column: the body's own padding, and a width a form is comfortable at. Colours, radii and type off the tokens; nothing literal here. ============================================ */ .ob-setup { max-width: var(--ob-setup-w); min-height: 100vh; padding: var(--ob-body-pad-top) var(--ob-body-pad-right) 60px var(--ob-body-pad-left); font-family: var(--ob-font); color: var(--ob-ink); } .ob-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ob-setup-gap); } /* ---- one step: the circle in a fixed column, the thing beside it ---- THE LINE IS DRAWN BY THE STEP ABOVE. Each step draws from the centre of its own circle down past its foot and into the next step, and the next circle paints over the end of it. The current step's circle sits a little lower (--drop), level with its card's title rather than its top edge, and the line above it runs on into the drop so the two meet. */ .ob-step { position: relative; display: grid; grid-template-columns: var(--ob-setup-num) minmax(0, 1fr); gap: var(--ob-setup-col-gap); align-items: start; &::before { content: ""; position: absolute; left: calc(var(--ob-setup-num) / 2 - 1px); top: calc(var(--ob-setup-num) / 2 + var(--drop, 0px)); bottom: calc(-1 * (var(--ob-setup-gap) + var(--ob-setup-drop))); width: 2px; background: var(--ob-line); } &:last-child::before { display: none; } &.now { --drop: var(--ob-setup-drop); } /* a step with no card of its own (the free post's, holding Home's card): its title sits on the line where a card's top edge would be, so the circle is level with it, not dropped */ &.now.flat { --drop: 0px; } > .n { position: relative; z-index: 1; display: grid; place-items: center; width: var(--ob-setup-num); height: var(--ob-setup-num); margin-top: var(--drop, 0px); border-radius: 50%; background: var(--ob-accent); color: #fff; font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; svg { width: 18px; height: 18px; } } /* A DONE STEP'S TICK IS BLUE (2026-10-04, Dave): the accent's pale ground and its ink. It was mint, the only green on a screen that is otherwise all the one blue */ &.done > .n { background: var(--ob-accent-bg); color: var(--ob-accent); } &.next > .n { background: var(--ob-card); border: 2px solid var(--ob-line); color: var(--ob-faint-1); } > .b { min-width: 0; } } /* an answered step: the title and the answer on one line, level with the tick */ .ob-stepline { display: flex; align-items: baseline; gap: 10px; min-height: var(--ob-setup-num); padding-top: 8px; .t { font-size: 14.5px; font-weight: 800; color: var(--ob-ink); } .a { font-size: 13.5px; font-weight: 600; color: var(--ob-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* the step after this one: the shape of a card and its title, and nothing in it */ .ob-stepnext { display: flex; align-items: center; min-height: var(--ob-setup-next-h); padding: 0 22px; border: 1.5px dashed var(--ob-line); border-radius: var(--ob-radius); font-size: 15px; font-weight: 800; color: var(--ob-faint-1); } /* ---- the current step's card ---- */ .ob-stepcard { padding: 18px 22px 20px; h2 { margin: 0 0 6px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; } p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--ob-ink-2); } .ob-config { margin: 0; } .ob-note { margin-top: 12px; } .acts { margin-top: 14px; } } /* the one-line form: a field or two and Okay, on one row */ .ob-stepform { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; .ob-input { width: auto; flex: 1 1 160px; max-width: 280px; } .money, .at { position: relative; display: block; flex: 0 1 150px; } .money .sym, .at .sym { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 700; color: var(--ob-muted); } .money .ob-input, .at .ob-input { width: 100%; max-width: none; padding-left: 27px; } } /* waiting on the agent: the one moving thing on the screen */ .ob-wait { display: flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--ob-ink-2); .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ob-accent); flex: 0 0 auto; animation: ob-wait-pulse 1.6s ease-in-out infinite; } } @keyframes ob-wait-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--ob-accent-halo-1); opacity: 1; } 50% { box-shadow: 0 0 0 7px var(--ob-accent-halo-0); opacity: .65; } } @media (prefers-reduced-motion: reduce) { .ob-wait .dot { animation: none; } } /* the example prompt on the last step: what a person types into their harness */ .ob-prompt { margin: 0 0 14px; padding: 12px 16px; border-radius: var(--ob-radius-tile); background: var(--ob-canvas); font-family: var(--ob-mono); font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--ob-ink); display: flex; align-items: flex-start; gap: 12px; } .ob-prompt .t { flex: 1; min-width: 0; } .ob-prompt .copy { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: -3px -6px -3px 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ob-muted); cursor: pointer; } .ob-prompt .copy:hover { background: var(--ob-card); color: var(--ob-ink); } .ob-prompt .copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .ob-prompt .copy .i-done { display: none; } .ob-prompt .copy.done .i-copy { display: none; } .ob-prompt .copy.done .i-done { display: block; } /* step 1: how to connect the agent, under the title (agents/connect_block.js) */ .ob-stepcard .ob-connectbox:has(.split) { margin-top: 14px; } /* ---- the free tries (steps 3 and 4, code/Setup/FreeTry.cs) ---- */ /* a step's title: inside a card, or on the page where the tried post's card stands. The FREE chip beside it went on 2026-10-05 (Dave): trying is real usage before a plan, not something free */ .ob-stephead { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; } } .ob-step.flat .ob-stephead { min-height: var(--ob-setup-num); margin-bottom: 0; } /* ...and its one line, on the page. Under it is Home's own card (home/queue.js), whose chip hangs over its top edge and brings its own room for it */ .ob-stepsub { margin: 0 0 6px; font-size: 13.5px; line-height: 1.55; color: var(--ob-ink-2); } /* ---- step 5: the plan, a blue box (option C, Dave 2026-10-04) ---- What is ready as chips on the accent, a line, and one white button to /billing. Stars twinkle in the right-hand side, behind the words. */ .ob-setupplan { position: relative; overflow: hidden; padding: 27px 32px 30px; /* a little less over the title than under the button */ border-radius: var(--ob-radius-row); background: var(--ob-accent); color: var(--ob-on-accent); .words { position: relative; z-index: 1; } h2 { margin: 0; color: var(--ob-on-accent); /* the page's h2 is ink */ font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1.12; } p { margin: 0 0 22px; max-width: 470px; font-size: 15px; font-weight: 500; line-height: 1.55; } .ready { display: flex; flex-wrap: wrap; gap: 8px; margin: 21px 0 18px; } .ready .r { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 8px; border-radius: 999px; background: var(--ob-glass); border: 1px solid var(--ob-glass-edge); font-size: 13.5px; font-weight: 700; } .ready .ob-circle { background: var(--ob-on-accent); } .ready .ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ob-on-accent); color: var(--ob-accent); svg { width: 13px; height: 13px; } } .ob-pill.go { height: 46px; padding: 0 22px; font-size: 14.5px; font-weight: 800; background: var(--ob-on-accent); color: var(--ob-accent-ink); box-shadow: var(--ob-shadow-on-accent); svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } } .ob-pill.go:hover { background: var(--ob-accent-bg); } .star { position: absolute; color: var(--ob-on-accent); animation: ob-setup-twinkle 2.6s ease-in-out infinite; svg { display: block; width: 100%; height: 100%; fill: currentColor; } } .star.s1 { right: 48px; top: 30px; width: 34px; height: 34px; } .star.s2 { right: 104px; top: 92px; width: 18px; height: 18px; animation-delay: .8s; } .star.s3 { right: 40px; top: 150px; width: 22px; height: 22px; animation-delay: 1.5s; } .star.s4 { right: 150px; top: 36px; width: 12px; height: 12px; animation-delay: 2s; } .star.s5 { right: 120px; top: 210px; width: 14px; height: 14px; animation-delay: .4s; } } @keyframes ob-setup-twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: .95; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .ob-setupplan .star { animation: none; opacity: .6; } } /* ============================================ OKAYBOT - POSTS The reading list (posts/posts.js): one list of posts, a menu on the left saying which posts they are, and a bar of faces over the list saying whose. The layout, the menu and the faces are the list page's, shared with Activity (okaybot-listpage.css); this sheet is the list of post cards. The cards themselves are the one card's post preset (cards/postcard_card.html, okaybot-postcard.css, since 2026-09-25). The calendar's own sheet is okaybot-calendar.css. ONE COLUMN SINCE 2026-09-23. This was three columns, each its own scroll inside a page the height of the viewport. One list is one scroll, the page's own, so the page is an ordinary page again and the menu is sticky beside it: the list can be read a long way down with the menu still under the hand. THE POST IN FULL IS BESIDE IT (2026-09-23): the page is Activity's split, .ob-act with its .ob-panel (okaybot-activity.css), so the detail is exactly as wide here as there. EVERYTHING IS ON THE GREY. The menu is the sidebar's own kind of item - no panel, no card around it - and only the posts are white, so the one white thing on the page is what you came to read. ============================================ */ /* ---- the list, and the day heading that rides on the first card of each day ---- */ .ob-pstack { display: flex; flex-direction: column; gap: 12px; } .ob-pday { display: flex; align-items: baseline; gap: 8px; margin: 14px 4px 0; font-family: var(--ob-font); b { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ob-ink-2); } span { font-size: 12.5px; font-weight: 600; color: var(--ob-muted); } } .ob-pstack .ob-slot > .ob-pc-item:first-child .ob-pday { margin-top: 0; } .ob-posts-more { height: 1px; } .ob-empty-col { font-family: var(--ob-font); font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--ob-faint-2); padding: 6px 4px; } /* ============================================ OKAYBOT - THE POST CARD (2026-09-25) cards/postcard_card.html: every post card in the product - the calendar's chip and its bigger card, the Held list, Posts - as one drawing and one style. It replaced four (the month's .ob-ev, the rail's .rchip, the tall chip and the Posts card, .ob-postrow). Where a card SITS - placed down the rail, carried in a drag, stepped along a stack - is the calendar's sheet; what a card IS is this one. /design/post-cards draws every switch in every state. ONE SET OF RULES, THREE SIZES. Everything a size changes - the padding, the corner, the face, the type, the gap under the words - is a custom property the size sets and the rules read, so a rule is written once and holds at every size. md is the post, sm the tall chip, xs the chip. TWO WAYS TO COLOUR IT, and the difference is the one real split between today's cards: fill the chips: the whole card is the state's colour and so are its words quiet the post: a white card with a hairline, the status word in the state's colour, and the card tinted only when it waits for you or was stopped Held takes each mode's colour as it is today - the rail's blue when filled, butter's word when quiet - because which colour held is has not been decided. THE EDGE IS A SHADOW, NOT A BORDER, so the hairline, the going ring and the hover ring are the same property and none of them moves what is inside the card by a pixel. ============================================ */ /* the day heading's ride: the wrapper draws nothing, and the button is what is laid out */ .ob-pc-item { display: contents; } .ob-pc { /* md, the post. The sizes below override these */ --pc-face: 30px; --pc-gap: 10px; --pc-pad: 14px 16px; /* the post's 13 and 15 inside its 1px border, which is a shadow here */ --pc-radius: var(--ob-radius); --pc-fs: 14px; --pc-lh: 21px; --pc-fw: 400; --pc-nm: 14px; --pc-nw: 700; --pc-hn: 12.5px; --pc-lift: -2px; /* the first line's letters start just below the face's top edge */ --pc-foot-gap: 9px; --pc-agent: 18px; --pc-st: 11.5px; --pc-tm-h: 20px; /* the time's tab (with_time): its height, its type, and the room */ --pc-tm-fs: 10.5px; /* the first line of the words leaves it */ --pc-tm-room: 36px; display: flex; align-items: flex-start; gap: var(--pc-gap); width: 100%; min-width: 0; padding: var(--pc-pad); border: 0; border-radius: var(--pc-radius); background: var(--ob-card); /* THE PROVIDER'S BADGE on the face (with_provider, the post only) cuts its ring out of the card's own ground, which each tone below sets beside its background */ --ob-badge-ring: var(--ob-card); color: var(--ob-ink); font-family: var(--ob-font); text-align: left; cursor: pointer; transition: box-shadow .12s ease; .face { width: var(--pc-face); height: var(--pc-face); flex: 0 0 auto; font-size: 9px; } .post { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; margin-top: var(--pc-lift); } /* the height is set as well as the leading: the handle's smaller type on the same baseline otherwise stretches the line by a pixel */ .who { display: flex; align-items: baseline; gap: 6px; min-width: 0; height: calc(var(--pc-nm) + 6px); line-height: calc(var(--pc-nm) + 6px); } .nm { font-size: var(--pc-nm); font-weight: var(--pc-nw); white-space: nowrap; flex: 0 0 auto; } .hn { font-size: var(--pc-hn); font-weight: 500; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* a hair more under the name than the words' own leading, so the two read as two things */ .who + .tx { margin-top: 2px; } .tx { font-size: var(--pc-fs); line-height: var(--pc-lh); font-weight: var(--pc-fw); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; } /* ONE LINE RUNS TO THE EDGE AND IS CUT THERE, as the chip always was. A one-line clamp breaks at the last whole word and leaves the rest of the line empty */ &.l1 .tx { display: block; white-space: nowrap; text-overflow: ellipsis; } &.l2 .tx { -webkit-line-clamp: 2; } &.l3 .tx { -webkit-line-clamp: 3; } .foot { display: flex; align-items: center; gap: 7px; margin-top: var(--pc-foot-gap); min-width: 0; } .agent { width: var(--pc-agent); height: var(--pc-agent); flex: 0 0 auto; } .st { font-size: var(--pc-st); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } &:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 1px; } &.movable { cursor: grab; } } /* sm, the tall chip: a line or three of the words beside a small face */ .ob-pc.sm { --pc-face: 20px; --pc-gap: 7px; --pc-pad: 6px 8px 7px 6px; --pc-radius: 9px; --pc-fs: 11.5px; --pc-lh: 16px; --pc-fw: 600; --pc-nm: 11.5px; --pc-nw: 800; --pc-hn: 11px; --pc-lift: 0px; --pc-foot-gap: 6px; --pc-agent: 14px; --pc-st: 10.5px; --pc-tm-h: 16px; --pc-tm-fs: 9.5px; --pc-tm-room: 36px; } /* xs, the chip: one line, 22px tall, the face the height of the line */ .ob-pc.xs { --pc-face: 14px; --pc-gap: 5px; --pc-pad: 4px 7px 4px 4px; --pc-radius: 7px; --pc-fs: 11.5px; --pc-lh: 14px; --pc-fw: 700; --pc-nm: 11.5px; --pc-nw: 800; --pc-hn: 11px; --pc-lift: 0px; --pc-foot-gap: 3px; --pc-agent: 12px; --pc-st: 10.5px; --pc-tm-fs: 9.5px; --pc-tm-room: 38px; .face { font-size: 7px; } } /* ---- fill: the whole card in the state's colours, as the chips are today ---- */ .ob-pc { &.went { background: var(--ob-mint-bg); --ob-badge-ring: var(--ob-mint-bg); color: var(--ob-mint-ink); } &.going, &.held { background: var(--ob-card); --ob-badge-ring: var(--ob-card); color: var(--ob-accent-ink); box-shadow: inset 0 0 0 1.5px var(--ob-accent-ring); } &.wait { background: var(--ob-butter-bg); --ob-badge-ring: var(--ob-butter-bg); color: var(--ob-butter-ink); } &.stop { background: var(--ob-rose-bg); --ob-badge-ring: var(--ob-rose-bg); color: var(--ob-rose-ink); } /* GONE IS A WHITE CARD WITH A GREY EDGE (2026-10-03). It was filled grey-bg, which is the canvas, so on the week and the list it vanished into the page; white with an edge reads on the canvas, on the month's white cells and on today's tint alike */ &.gone { background: var(--ob-card); --ob-badge-ring: var(--ob-card); color: var(--ob-grey-ink); box-shadow: inset 0 0 0 1px var(--ob-grey-edge); } /* ONLY GONE IS STRUCK (2026-10-03): it went out and has been taken back, so its words are crossed out. A stopped post never went out and has nothing to cross out - red says it was refused, failed or expired. Both struck, red read as a second kind of deleted */ &.gone .tx { text-decoration: line-through; } } /* ---- quiet: a white card, the status word coloured, as the post is today ---- */ .ob-pc.quiet { background: var(--ob-card); --ob-badge-ring: var(--ob-card); color: var(--ob-ink); box-shadow: inset 0 0 0 1px var(--ob-line-card); .hn { color: var(--ob-muted); opacity: 1; } .st { color: var(--ob-muted); } &.went .st { color: var(--ob-mint-ink); } &.going .st { color: var(--ob-accent-ink); } &.held .st { color: var(--ob-butter-ink); } &.gone .st { color: var(--ob-grey-ink); } &.wait { background: var(--ob-butter-bg); --ob-badge-ring: var(--ob-butter-bg); box-shadow: inset 0 0 0 1px var(--ob-butter-edge); } &.wait .st, &.wait .hn { color: var(--ob-butter-ink); } &.stop { background: var(--ob-rose-card); --ob-badge-ring: var(--ob-rose-card); box-shadow: inset 0 0 0 1px var(--ob-rose-edge); } &.stop .st { color: var(--ob-rose-ink); } &.stop .tx, &.gone .tx { color: var(--ob-muted); } } /* A PERSON POSTED IT THEMSELVES (2026-09-30, Dave: the hollow one): out, so mint, but not by us, so no ground and a dashed edge - the same dash that says "not quite" on a post its month will not cover. On every size, fill or quiet */ .ob-pc.went.self_published, .ob-pc.quiet.went.self_published { background: var(--ob-card); --ob-badge-ring: var(--ob-card); color: var(--ob-mint-ink); box-shadow: none; outline: 1.5px dashed var(--ob-mint-edge); outline-offset: -1.5px; .st { color: var(--ob-mint-ink); } } /* A WARNING ON THE CARD, the server's words (a reply X may refuse): a dashed amber edge on any size, so a calendar chip too small for words still says it, and the words in the foot where there is one. Never money: the page says that once, above its posts (Caps.PlanWarning, 2026-10-02) */ .ob-pc.warned { outline: 1.5px dashed var(--ob-butter-ink); outline-offset: -2px; } .ob-pc .foot .warn { font-size: var(--pc-st); font-weight: 700; color: var(--ob-butter-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- THE TIME, in a tab in the top-right corner (with_time, 2026-09-29) ---- The calendar's list mode, where a card's place in its day says the order and not the hour, so the card says it. The tab is tucked into the card's corner, a shade deeper than its ground: the card's own ink at a low strength, so every tone gets its shade without a colour of its own. ONLY THE FIRST LINE GIVES WAY TO IT: a float as wide as the tab stands at the head of the words (.tm-room), and the lines under it run the card's whole width. The chip has one line and no second to give back, so there the words stop short of it and the tab is the card's height. */ .ob-pc.timed { position: relative; } .ob-pc .tm { position: absolute; top: 0; right: 0; height: var(--pc-tm-h); padding: 0 6px 0 7px; border-radius: 0 var(--pc-radius) 0 8px; background: color-mix(in srgb, currentColor 13%, transparent); font-size: var(--pc-tm-fs); font-weight: 800; line-height: var(--pc-tm-h); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; } .ob-pc .tm-room { float: right; width: var(--pc-tm-room); height: 1px; } .ob-pc.l1 .tm-room { display: none; } .ob-pc.timed.l1 .tx { padding-right: var(--pc-tm-room); } .ob-pc.xs .tm { bottom: 0; height: auto; display: flex; align-items: center; border-radius: 0 var(--pc-radius) var(--pc-radius) 0; } /* a quiet card's ink is the page's, so its tab is the page's grey rather than a shade of black */ .ob-pc.quiet .tm { background: var(--ob-canvas); } /* ---- THE ONE HOVER, after every tone so none of their edges wins over it. The post's size takes the halo round it as well, as the post does today; at chip size a halo is most of the chip, so it gets the ring and a short drop ---- */ .ob-pc:hover, .ob-pc.quiet:hover { box-shadow: inset 0 0 0 1.5px var(--ob-accent), 0 2px 8px rgba(79, 102, 240, .22); } .ob-pc.md:hover, .ob-pc.md.quiet:hover { box-shadow: inset 0 0 0 1px var(--ob-accent), 0 0 0 3px var(--ob-accent-halo-1), 0 4px 14px rgba(79, 102, 240, .18); } /* the card the panel beside the list is drawing: the accent edge, held */ .ob-pc.sel, .ob-pc.quiet.sel { box-shadow: inset 0 0 0 1px var(--ob-accent), 0 0 0 3px var(--ob-accent-halo-1); } /* ITS IMAGES (2026-10-08): the first at a chip's end, a row of up to four under a taller card's words. The 160 px thumbnail, which is kept for the life of the post */ .ob-pc .pic { flex: 0 0 auto; align-self: center; width: 16px; height: 16px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); } /* a chip with the time in its corner: the thumbnail stands just left of the tab, and the words stop at the thumbnail rather than leaving the tab's room as well */ .ob-pc.timed .pic { margin-right: var(--pc-tm-room); } .ob-pc.timed.l1:has(> .pic) .tx { padding-right: 0; } .ob-pc .pic img, .ob-pc .pics img { width: 100%; height: 100%; object-fit: cover; display: block; } .ob-pc .pics { display: flex; gap: 4px; margin-top: 6px; } .ob-pc .pics span { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 6px; overflow: hidden; background: var(--ob-canvas); } .ob-pc.md .pics span { width: 44px; height: 44px; border-radius: 8px; } /* A FILE HELD OVER THE CARD (2026-10-08): it lights in the accent and takes the drop on its first part; while a dropped image is on its way it breathes */ .ob-pc.over { box-shadow: inset 0 0 0 2px var(--ob-accent), 0 0 0 3px var(--ob-accent-bg); background: var(--ob-accent-bg); color: var(--ob-accent-ink); } .ob-pc.adding { animation: ob-pc-adding 1s ease-in-out infinite alternate; } @keyframes ob-pc-adding { from { opacity: 1; } to { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .ob-pc.adding { animation: none; opacity: .7; } } /* ============================================ OKAYBOT PAGE The three columns: sidebar 236, body, rail 300. The header row and its arithmetic, the two page families (feed, cards), the row cards on Agents and Profiles, the Setup steps and the Spend tiles. design.md sections 3 and 4. The scaffold positions #Main absolutely under a top menu bar and paints a warm gradient on the body; the product has neither. body.ob-app (set by the sidebar when someone is signed in) is the switch, and its selectors outrank the scaffold's by specificity, so no scaffold file is edited. ============================================ */ body.ob-app { background: var(--ob-canvas); font-family: var(--ob-font); color: var(--ob-ink); -webkit-font-smoothing: antialiased; } body.ob-app::before { display: none; } body.ob-app .site-footer { display: none; } body.ob-app #Main { position: static; margin: 0; padding-left: var(--ob-sidebar-w); min-height: 100vh; } /* ---- the sidebar: white, fixed, the only navigation ---- */ body.ob-app #Sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: var(--ob-sidebar-w); z-index: 40; } .ob-sidebar { height: 100%; display: flex; flex-direction: column; padding: 22px 16px 18px; background: var(--ob-card); border-right: 1px solid var(--ob-line); font-family: var(--ob-font); overflow-y: auto; } .ob-logo { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; text-decoration: none; color: var(--ob-ink); /* THE MARK ALONE, NOT THE TILE. The sidebar is the one place the logo stands on the product's own card rather than on a ground of its own, so it drops the blue square and draws the bot and the tick in the accent on nothing at all - which is also why there is no radius here any more: there is no ground left to round. It is a mask, the way .ob-square.bot draws the same mark, so the file's path stays in the stylesheet and the template carries none of it. The box is the mono file's own aspect - 376 by 456 - so `contain` fills the 30px slot top to bottom and the wordmark sits a true 10px off the ink rather than off a column of empty space. */ .mark { display: block; width: 25px; height: 30px; background: var(--ob-accent); -webkit-mask: url(/images/logo/okaybot-mono.svg) center / contain no-repeat; mask: url(/images/logo/okaybot-mono.svg) center / contain no-repeat; } .name { font-size: 17px; font-weight: 800; letter-spacing: -.02em; } &:hover { color: var(--ob-ink); text-decoration: none; } } /* NEW POST (2026-10-03, Dave): the composer's way in (popups/compose.js), under Docs on every page since 2026-10-04 (it sat under the logo before). HOLLOW - the accent's outline, never its fill - and small, its plus on the line of the glyphs above it: easy to find, and never louder than the page beside it. It is not a section, so it never lights */ .ob-newpost { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 34px; margin: 12px 0 0 2px; padding: 0 15px 0 11px; border: 1.5px solid var(--ob-accent); border-radius: 999px; background: var(--ob-card); color: var(--ob-accent-ink); font-family: var(--ob-font); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .12s; svg { width: 14px; height: 14px; flex: 0 0 auto; } &:hover { background: var(--ob-accent-bg); } &:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; } } .ob-nav { display: flex; flex-direction: column; gap: 2px; } .ob-navitem { display: flex; align-items: center; gap: 12px; height: var(--ob-nav-h); padding: 0 12px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--ob-ink-2); text-decoration: none; svg { width: 18px; height: 18px; color: var(--ob-muted); flex: 0 0 auto; } /* never on two lines: in the medium tier's 200px sidebar "Profiles & Agents" is 2px over, and runs into the item's own right padding rather than wrapping (2026-10-05) */ .grow { flex: 1 1 auto; white-space: nowrap; } &:hover { background: var(--ob-canvas); color: var(--ob-ink-2); text-decoration: none; } &.on { background: var(--ob-accent-bg); color: var(--ob-accent-ink); font-weight: 700; } &.on svg { color: var(--ob-accent); } } /* A LINK THAT LEAVES. Docs is not a section of the product - it opens an outside page and the sidebar goes with it - so it is drawn a step back from the six that are: the label a shade lighter and a shade less bold, the glyph lighter again, and a gap above it that takes it out of the run. Lighter, not illegible: --ob-c3 still clears 4.5:1 on the canvas, which --ob-muted does not, and a nav label is text however quiet it is meant to look. */ .ob-navitem.quiet { margin-top: 10px; color: var(--ob-c3); font-weight: 500; svg { color: var(--ob-faint-1); } &:hover { color: var(--ob-ink-2); } &:hover svg { color: var(--ob-muted); } } /* THE FOOT: one line, and it is a nav item (2026-09-16). It held a bare avatar and the three outside links until then - four targets on one 236px row, three of them 30px wide - and the links went to the foot of every page's left column, and then went altogether (2026-09-19): Docs is a nav item in this list now and the logo above is the way back out. What is left is the person, drawn the way the six sections above are drawn: grey under the pointer, the accent when it is the page you are on. That is the whole reason it reads as navigation now - it IS navigation, to /account, and it used to open a menu instead. The money block that used to sit above this is gone (2026-09-16) - today's spend is a line on the Usage item now (sidebar.js). This row is what is left below the nav, which is why it carries the margin-top: auto that pushed the block down. */ .ob-sidefoot { margin-top: auto; padding-top: 18px; } /* The account's own nav item. It differs from the six above it in two numbers and nothing else: the row is 48 rather than 42, because a 30px face wants more than 6px of air above and below it, and the left padding is 8 rather than 12, which puts the face on 24px - the logo mark's edge at the top of the column, so the two 30px faces bookend it. The label lands 6px right of the section labels as a result; the face is the thing the eye lines up here, not the text. */ .ob-navitem.me { height: 48px; padding: 0 8px; gap: 10px; .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ---- the header: title, chip, muted line, the one control, the avatar ---- */ /* IT WRAPS RATHER THAN RUNS OVER (2026-09-24): a long title beside a wide control - the calendar's week title beside its faces and its four views, at the foot of medium - puts the control on a line of its own, still at the right, instead of pushing it off the page */ .ob-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: var(--ob-head-h); margin-bottom: var(--ob-head-gap); } .ob-title { margin: 0; font-family: var(--ob-font); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--ob-ink); } .ob-control { margin-left: auto; } /* the title's row inside the header: the title, and on narrow the glyph and the steps around it */ .ob-headrow { display: flex; align-items: center; gap: 12px; } /* ---- the title as the way to the panel, on narrow (PageHead `nav` and `sheet`) ---- Two ways a page reaches the panel it has lost (dev/docs/responsive.md). NAV makes the title itself the door - the calendar's "September 2026" opens the picker - with the calendar's glyph before it and the two steps after it. SHEET is a pill on the title's row, just left of the control, for a panel that is not about where you are - Usage's "X's prices", the calendar's Held. Above narrow the panel is on the screen, so the title is only a title and neither the glyph, the steps nor the pill is drawn. */ .ob-titlebtn { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; pointer-events: none; } .ob-titlebtn .glyph, .ob-titlesteps, .ob-head .ob-sheetbtn { display: none; } @media (max-width: 1199px) { .ob-titlebtn { pointer-events: auto; cursor: pointer; } .ob-titlebtn:hover { color: var(--ob-accent-ink); } .ob-titlebtn:hover .glyph { color: var(--ob-accent); } .ob-titlebtn:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 4px; border-radius: 6px; } .ob-titlebtn .glyph { display: block; flex: 0 0 auto; width: 20px; height: 20px; color: var(--ob-muted); } .ob-titlesteps { display: inline-flex; gap: 2px; margin-left: -4px; } .ob-titlesteps .b { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--ob-ink-2); cursor: pointer; } .ob-titlesteps .b svg { width: 15px; height: 15px; } .ob-titlesteps .b:hover { background: var(--ob-line); color: var(--ob-ink); } .ob-titlesteps .b:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 1px; } .ob-head .ob-sheetbtn { display: inline-flex; gap: 8px; margin-left: auto; } .ob-head .ob-sheetbtn + .ob-control { margin-left: 0; } } .ob-halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ob-card-gap); } /* TWO SUBJECTS, NOT TWO PARTS OF ONE. 14px is the distance between two cards in the same stack, and it is too close when each column is about something different - the account page's accounts beside its passkeys read as one card cut in half at that gap. This is the money card's column gap, the only other place two columns of unrelated things sit level. */ .ob-halves.wide { gap: 40px; } .ob-chart-empty { padding: 34px 0 20px; font-size: 13px; font-weight: 600; color: var(--ob-muted); } /* ---- the object card: one per agent, one per profile, and the calls to action ---- Collapsed it is a line you can click; open it is everything that can be done to that one object. The head is a real