/* @foundation/ui design tokens — CSS custom-property mirror of tokens.js. COMBINATION B "Ivory Study" — The Study's ceremonial structure in the Broadsheet's warm cream + gold palette; Playfair Display type. */ :root { --bbl-bg: #f4f1e9; --bbl-bg-soft: #ece7d9; --bbl-bg-deep: #e3dcc9; --bbl-bg-handoff: #f1ead7; --bbl-card: #fbfaf4; --bbl-navy: #171410; --bbl-navy-soft: #272219; --bbl-navy-medium: #332c20; --bbl-navy-deep: #0d0b07; --bbl-gold: #b07a24; --bbl-gold-bold: #8f5f14; --bbl-gold-soft: #a67c2e; --bbl-gold-tint: #f1e7d3; --bbl-gold-pale: #f1e7d3; --bbl-gold-faint: rgba(176, 122, 36, 0.32); /* RGB triplet form of the accent, for rgba(var(--bbl-gold-rgb), a) literals (masthead rules, borders) that need theme-aware alpha. Light = brass. */ --bbl-gold-rgb: 176, 122, 36; /* Interaction-layer accents (hover text, hover borders, hover tints) — kept as their own vars so interactions.css hovers turn orange in dark alongside the base accent. Light values = the original brass hover palette. */ --bbl-accent-hi: #d8bf85; --bbl-accent-line: #c2a35d; --bbl-accent-line-2: #a98b4f; --bbl-accent-tint-rgb: 169, 139, 79; --bbl-ink: #171410; --bbl-ink-2: #57534a; --bbl-ink-3: #8a867a; --bbl-ink-4: #b0ab9b; --bbl-line: #e2dccb; --bbl-line-2: #ece7d9; --bbl-green: #4d7c54; --bbl-amber: #b5791f; --bbl-red: #b0483e; --bbl-font-sans: 'Public Sans', system-ui, sans-serif; --bbl-font-display: 'Playfair Display', Georgia, serif; --bbl-font-display-soft: 'Playfair Display', Georgia, serif; --bbl-font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace; --bbl-shadow-card: 0 1px 2px rgba(23, 20, 16, 0.05), 0 10px 30px rgba(23, 20, 16, 0.05); --bbl-radius: 6px; --bbl-radius-sm: 4px; /* Semantic chrome surfaces — the masthead band and the header button/pill "face". Broken out as their own tokens so dark mode can retune them without touching the components that consume them. */ --bbl-masthead: #f1ece0; --bbl-btn-face: rgba(23, 20, 16, 0.03); /* Scrollbar + text selection — retuned per theme below. */ --bbl-scrollbar: #d4cdbc; --bbl-scrollbar-hover: #c3bba6; --bbl-selection: rgba(176, 122, 36, 0.20); /* Legacy-compat aliases — federation-remote agents (e.g. Oracle) reference these older var names; defined here so they resolve to Ivory values when an agent renders IN-SHELL (the agent's own :root only applies standalone). */ --bbl-cloud: var(--bbl-bg); --bbl-white: var(--bbl-card); --bbl-cream: var(--bbl-gold-tint); --bbl-muted: var(--bbl-ink-2); --bbl-serif: var(--bbl-font-display); /* Native controls (time picker, checkbox, default scrollbar) follow this. */ color-scheme: light; } /* --------------------------------------------------------------------------- DARK MODE — "Ivory Study, after hours". The same warm cream + brass system relit on a warm near-black ground (browns, not cold grays) so the palette still reads as ivory paper turned down for the evening. Activated by data-theme="dark" on (set pre-paint from localStorage in index.html; toggled at runtime by shell/theme.js). The saturated brass accents (--bbl-gold / --bbl-gold-soft) are deliberately NOT overridden — they read on both grounds and back the SVG icon strokes that consume the literal token values. Only --bbl-gold-bold (text/links) brightens. ------------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --bbl-bg: #14120d; --bbl-bg-soft: #1b1811; --bbl-bg-deep: #201c14; --bbl-bg-handoff: #1d1912; --bbl-card: #1e1a13; /* "navy" is the raised-fill role (buttons, pills, icon squares, stat bands), always paired with light content — so in dark mode it inverts to a warm surface that sits ABOVE the card, not below it. Navy-as-text was migrated to --bbl-ink so this inversion is safe. */ --bbl-navy: #423a29; --bbl-navy-soft: #4d4432; --bbl-navy-medium: #574d39; --bbl-navy-deep: #383021; /* Dark mode trades the ivory brass for a warm ORANGE accent — it contrasts harder against the warm-brown ground and reads more vividly than gold did. The base drives the agent-medallion rings/glyphs (via currentColor) and every gold fill/border; -bold is the brighter text/link/active tone. */ --bbl-gold: #e07d33; --bbl-gold-bold: #f39a4d; --bbl-gold-soft: #cf7330; --bbl-gold-tint: #2c1c0f; --bbl-gold-pale: #2c1c0f; --bbl-gold-faint: rgba(224, 125, 51, 0.30); --bbl-gold-rgb: 224, 125, 51; --bbl-accent-hi: #f6a860; --bbl-accent-line: #e5893f; --bbl-accent-line-2: #cf7734; --bbl-accent-tint-rgb: 224, 125, 51; --bbl-ink: #f2ede1; --bbl-ink-2: #c4bca9; --bbl-ink-3: #948c7b; --bbl-ink-4: #6c6555; --bbl-line: #322c20; --bbl-line-2: #2a251b; --bbl-green: #6bb07a; --bbl-amber: #d4972f; --bbl-red: #d9695f; --bbl-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5); --bbl-masthead: #1a1610; --bbl-btn-face: rgba(255, 255, 255, 0.05); --bbl-scrollbar: #3a3428; --bbl-scrollbar-hover: #4a4334; --bbl-selection: rgba(215, 165, 63, 0.28); } *, *::before, *::after { box-sizing: border-box; } html, body { background: var(--bbl-bg); color: var(--bbl-ink); font-family: var(--bbl-font-sans); font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: var(--bbl-selection); } * { scrollbar-color: var(--bbl-scrollbar) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--bbl-scrollbar); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--bbl-scrollbar-hover); border: 3px solid transparent; background-clip: content-box; } /* Tasks page — hover/focus affordances for the task rows. Colors come from the themeable --bbl-* vars so dark mode is automatic. */ .bbl-task-id:hover, .bbl-task-id:focus-visible { text-decoration: underline; text-underline-offset: 2px; } .bbl-task-detail:hover, .bbl-task-detail:focus-visible { color: var(--bbl-accent-strong, var(--bbl-gold-bold)); text-decoration: underline; } .bbl-task-clear:hover, .bbl-task-clear:focus-visible { text-decoration: underline; } /* The description cell carries overflow-wrap inline (DESC_CELL_STYLE): the row wrapper is display:contents at desktop width and so cannot style anything. */ /* Time tab — the chart layer. Everything else on this page is inline-styled from tokens.js; the marks live here because they need pseudo-elements, keyframes and a dark-mode override that inline styles cannot express. COLOR: two categorical hues, one per PARTNER. Color encodes identity (whose timer is this), never rank — a filter that changes the row count must not repaint the survivors, which is exactly what the old index-keyed palette did. Projects are identified by their direct lane label instead. Both pairs were machine-checked against the card surface they sit on (light #fbfaf4, dark #1e1a13) for the OKLCH lightness band, the chroma floor, adjacent- pair CVD separation (protan/deutan/tritan) and >= 3:1 contrast. Do not hand-tune these values — re-run the validator. */ .time-viz { --time-author-1: #b07a24; /* Maxim — brass, the brand accent */ --time-author-2: #2166a4; /* Jackson — cool blue; CVD dE 64.7 vs brass */ --time-author-x: var(--bbl-ink-3); /* unknown author — recessive, never a 3rd hue */ --time-grid: rgba(23, 20, 16, 0.07); --time-track: rgba(23, 20, 16, 0.05); /* The ring that separates two overlapping blocks must be the surface they sit on. */ --time-surface: var(--bbl-card); } :root[data-theme='dark'] .time-viz { --time-author-1: #cf7330; --time-author-2: #3f9fd0; --time-grid: rgba(242, 237, 225, 0.1); --time-track: rgba(242, 237, 225, 0.06); } /* --- day timeline ---------------------------------------------------------- */ .time-lane { position: relative; height: 20px; } /* Recessive track behind each lane, so an empty stretch still reads as a lane. */ .time-lane::before { content: ''; position: absolute; inset: 8px 0; background: var(--time-track); border-radius: 999px; } .time-block { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; /* rounded data-ends */ box-shadow: 0 0 0 2px var(--time-surface); /* 2px surface ring where blocks abut */ cursor: pointer; border: none; padding: 0; } .time-block:hover, .time-block:focus-visible { filter: brightness(1.08); outline: none; box-shadow: 0 0 0 2px var(--time-surface), 0 0 0 3px var(--bbl-ink-3); } /* A running block has no right edge — it is still being written. */ .time-block--running { border-top-right-radius: 1px; border-bottom-right-radius: 1px; } .time-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--time-grid); } /* --- running indicator ------------------------------------------------------ */ /* Status is never color alone: this dot always ships beside the word "running". */ .time-running-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--bbl-amber); animation: time-pulse 1.8s ease-in-out infinite; } @keyframes time-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .time-running-dot { animation: none; } } /* --- tooltip ---------------------------------------------------------------- */ .time-tooltip { position: fixed; z-index: 40; pointer-events: none; transform: translate(-50%, -110%); background: var(--bbl-ink); color: var(--bbl-card); border-radius: var(--bbl-radius-sm); padding: 6px 9px; font-size: 11.5px; line-height: 1.45; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); } /* --- forced-colors / print: identity must survive losing color --------------- */ @media (forced-colors: active) { .time-block { forced-color-adjust: none; background: ButtonText !important; } .time-block--author-2 { background: Highlight !important; } } /* BBL Command Center — interaction layer. * * DESIGN SAMPLE 3 — "The Study" (executive briefing-room dark theme). * Hover/motion retuned to the dark charcoal + brass palette; structure and * class names unchanged. * * Scoped TIGHTLY to what inline styles cannot express: :hover states, * transitions, and @keyframes. Imported once from src/main.jsx. */ /* -------------------------------------------------------------------------- * Keyframes — live status dots * ------------------------------------------------------------------------ */ @keyframes bbl-pulse-dot { 0%, 100% { box-shadow: 0 0 0 3px rgba(95, 158, 125, 0.22); } 50% { box-shadow: 0 0 0 5px rgba(95, 158, 125, 0.1); } } .bbl-live-dot { animation: bbl-pulse-dot 2s ease-in-out infinite; } .bbl-live-pulse { animation: bbl-pulse-dot 1.8s ease-in-out infinite; } /* -------------------------------------------------------------------------- * Masthead nav links + roster medallions * ------------------------------------------------------------------------ */ .bbl-masthead-link { transition: color 0.15s, border-color 0.15s; } .bbl-masthead-link:hover { color: var(--bbl-accent-hi); } .bbl-medallion { transition: transform 0.18s, filter 0.18s; } .bbl-medallion:hover { transform: translateY(-3px); filter: drop-shadow(0 6px 14px rgba(var(--bbl-accent-tint-rgb), 0.25)); } .bbl-medallion:hover span:first-of-type { color: var(--bbl-accent-hi); } /* -------------------------------------------------------------------------- * Top bar buttons + partner pill * ------------------------------------------------------------------------ */ .bbl-top-btn, .bbl-partner-pill { transition: background 0.15s, border-color 0.15s; } .bbl-top-btn:hover, .bbl-partner-pill:hover { border-color: var(--bbl-accent-line); background: rgba(var(--bbl-accent-tint-rgb), 0.14); } /* -------------------------------------------------------------------------- * Sticky agent ribbon — slide-in + the 5 ribbon buttons * ------------------------------------------------------------------------ */ .bbl-sticky-ribbon { transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform 0.25s ease, opacity 0.2s ease; } .bbl-sticky-ribbon.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } .bbl-ribbon-btn { transition: background 0.15s, border-color 0.15s, color 0.15s; } .bbl-ribbon-btn:hover { background: rgba(var(--bbl-accent-tint-rgb), 0.16); border-color: var(--bbl-accent-line); color: var(--bbl-accent-hi); } /* Six labelled chips stop fitting well before the emblems do. Below this the chips go icon-only; the accessible name still rides on the button title. */ @media (max-width: 700px) { .bbl-ribbon-label { display: none; } } /* -------------------------------------------------------------------------- * Agents grid — tile hover lift + brass top-border scaleX reveal * ------------------------------------------------------------------------ */ .bbl-agent-tile { transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s, color 0.18s; } .bbl-agent-tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--bbl-accent-line); transform: scaleX(0); transform-origin: left; transition: transform 0.18s; } .bbl-agent-item:hover .bbl-agent-tile { border-color: var(--bbl-accent-line-2); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); color: var(--bbl-accent-hi); } .bbl-agent-item:hover .bbl-agent-tile::before { transform: scaleX(1); } /* -------------------------------------------------------------------------- * Quick Actions — primary + secondary button hovers * ------------------------------------------------------------------------ */ .bbl-qa-primary { transition: background 0.15s, border-color 0.15s; } .bbl-qa-primary:hover { background: #33466a; border-color: var(--bbl-accent-line); } .bbl-qa-btn { transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; } .bbl-qa-btn:hover { background: #33466a; border-color: var(--bbl-accent-line); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); } .bbl-qa-arrow { transition: transform 0.15s, color 0.15s; } .bbl-qa-btn:hover .bbl-qa-arrow { color: var(--bbl-accent-hi); transform: translateX(2px); } /* -------------------------------------------------------------------------- * Handoff Notes — add-note pill * ------------------------------------------------------------------------ */ .bbl-handoff-add { transition: background 0.15s, transform 0.15s, box-shadow 0.15s; } .bbl-handoff-add:hover { background: #33466a; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); } /* -------------------------------------------------------------------------- * Sign-offs — approve / reject buttons * ------------------------------------------------------------------------ */ .bbl-signoff-btn { transition: background 0.15s, border-color 0.15s, color 0.15s; } .bbl-signoff-btn-approve:hover { background: #4c8467; } .bbl-signoff-btn-reject:hover { border-color: #b0413e; color: #cd6a63; } /* -------------------------------------------------------------------------- * Needs Attention — item row hover * ------------------------------------------------------------------------ */ .bbl-attn-item { transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .bbl-attn-item:hover { transform: translateX(2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); border-color: var(--bbl-accent-line-2); } /* -------------------------------------------------------------------------- * Live Activity — event row hover * ------------------------------------------------------------------------ */ .bbl-activity-row { transition: background 0.12s; } .bbl-activity-row:hover { background: rgba(var(--bbl-accent-tint-rgb), 0.06); } /* -------------------------------------------------------------------------- * Week Calendar — day cell hover (today cell keeps its slate fill) * ------------------------------------------------------------------------ */ .bbl-week-day { transition: border-color 0.15s, background 0.15s; } .bbl-week-day:hover { border-color: var(--bbl-accent-line); background: #1c2532; } .bbl-week-day.is-today, .bbl-week-day.is-today:hover { background: #2a3a58; border-color: var(--bbl-accent-line-2); } /* -------------------------------------------------------------------------- * Generic agent-tile / cost-row / signoff-item — subtle shared hovers * ------------------------------------------------------------------------ */ .bbl-hoverable { transition: background 0.15s, border-color 0.15s; } /* -------------------------------------------------------------------------- * Masthead BB monogram — the asset is a black-on-transparent PNG, invisible on * the dark masthead. In dark mode recolor it to white (brightness(0) forces the * silhouette solid black preserving alpha, invert(1) flips black -> white). * Light mode leaves the original black lockup on the cream masthead untouched. * ------------------------------------------------------------------------ */ :root[data-theme="dark"] [data-testid="header-home-logo"] img { filter: brightness(0) invert(1); } /* -------------------------------------------------------------------------- * Header focus rings — dark surfaces take a brass ring * ------------------------------------------------------------------------ */ [data-testid="header-home-logo"]:focus-visible, [data-testid="header-home-title"]:focus-visible, [data-testid="header-claude-btn"]:focus-visible, [data-testid="feedback-button"]:focus-visible, [data-testid="header-notif-btn"]:focus-visible, [data-testid="partner-switcher"]:focus-visible { outline: 2px solid var(--bbl-gold-bold, var(--bbl-accent-line)); outline-offset: 2px; } /* -------------------------------------------------------------------------- * Skip-link + surface focus rings * ------------------------------------------------------------------------ */ .bbl-skip-link { position: absolute; top: -40px; left: 8px; padding: 8px 16px; background: var(--bbl-navy, #2a3a58); color: #ece7dc; border-radius: 4px; z-index: 10000; text-decoration: none; font-family: var(--bbl-font-sans, system-ui); font-size: 13px; } .bbl-skip-link:focus, .bbl-skip-link:focus-visible { top: 8px; outline: 2px solid var(--bbl-gold-bold, var(--bbl-accent-line)); outline-offset: 2px; } [data-testid^="goal-row-"]:focus-visible, [data-testid^="feedback-row-"]:focus-visible, [data-testid^="feedback-bucket-header-"]:focus-visible, [role="menuitem"]:focus-visible { outline: 2px solid var(--bbl-gold-bold, var(--bbl-accent-line)); outline-offset: 2px; } /*$vite$:1*/