/* Cyclone landing — Vaisala design tokens. Pulled from compass-common-ai-agent/web-ui/frontend/src/index.css. */ :root { /* Typography */ --vai-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --vai-ex-font-size-base: 16px; --vai-ex-font-size-xs: 10px; --vai-ex-font-size-s: 14px; --vai-ex-font-size-m: 16px; --vai-ex-font-size-l: 18px; --vai-ex-font-size-xl: 20px; --vai-font-size-tiny: 11px; /* Vaisala dark navy base */ --vai-color-base: #0A2A3D; --vai-color-fg: #FFFFFF; --vai-color-fg-disabled: #94A3B8; --vai-ex-color-fg-secondary: #94A3B8; --vai-color-bg: #1E293B; --vai-color-bg-selected-disabled: #334155; --vai-color-tone-light: #334155; --vai-color-tone-light-40: #0F172A; --vai-color-border: #475569; --vai-color-divider: #475569; /* Signal colors */ --vai-color-signal-blue: #3B82F6; --vai-color-signal-blue-dark: #1E40AF; --vai-color-signal-green: #10B981; --vai-color-signal-yellow: #F59E0B; --vai-color-signal-red: #EF4444; --vai-color-signal-red-dark: #B91C1C; /* Spacing */ --vai-ex-spacing-xs: 4px; --vai-ex-spacing-s: 8px; --vai-spacing-s-m: 12px; --vai-ex-spacing-m: 16px; --vai-ex-spacing-l: 24px; --vai-ex-spacing-xl: 32px; --vai-ex-spacing-xxl: 48px; /* REC surface aliases */ --rec-surface-sunken: var(--vai-color-tone-light-40); /* #0F172A */ --rec-surface-default: var(--vai-color-bg); /* #1E293B */ --rec-surface-elevated: var(--vai-color-tone-light); /* #334155 */ color-scheme: dark; font-family: var(--vai-font-family); font-size: var(--vai-ex-font-size-base); color: var(--vai-color-fg); } * { box-sizing: border-box; } html { margin: 0; padding: 0; background: var(--rec-surface-sunken); min-height: 100vh; } body { margin: 0; padding: 0; /* Transparent so the WebGL canvas at z-index:-2 isn't painted over by the body background (fixed children below z-index 0 sit behind an opaque body fill). Background lives on instead. */ background: transparent; color: var(--vai-color-fg); font-family: var(--vai-font-family); font-size: 14px; line-height: 1.5; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Background WebGL canvas — mirrors the .cosmos-backdrop pattern from common-ai-agent (video pinned at z-index:-2, content overlays). */ #bg-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; pointer-events: none; background: var(--rec-surface-sunken); } #bg-fade { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 35%, rgba(59, 130, 246, 0.08) 0%, transparent 60%), linear-gradient(180deg, rgba(15, 23, 42, 0.10) 0%, rgba(15, 23, 42, 0.05) 30%, rgba(15, 23, 42, 0.55) 80%, rgba(15, 23, 42, 0.88) 100%); } /* ---------- Top bar ---------- */ .topbar { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: var(--vai-ex-spacing-m) var(--vai-ex-spacing-l); z-index: 10; pointer-events: none; } .topbar > * { pointer-events: auto; } .topbar-left { display: flex; align-items: center; gap: var(--vai-ex-spacing-s); } .topbar-brand { font-family: var(--vai-font-family); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--vai-color-fg); text-transform: uppercase; } .topbar-brand-sub { color: var(--vai-ex-color-fg-secondary); font-weight: 400; margin-left: 6px; } .topbar-right { display: flex; gap: var(--vai-ex-spacing-s); align-items: center; } .pill { display: inline-flex; align-items: center; gap: var(--vai-ex-spacing-s); padding: 6px 12px; border-radius: 4px; background: var(--rec-surface-default); border: 1px solid var(--vai-color-border); color: var(--vai-color-fg); font-size: 13px; font-weight: 500; cursor: default; } .pill-ghost { cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .pill-ghost:hover { background: var(--rec-surface-elevated); border-color: var(--vai-color-signal-blue); } .pill-dim { color: var(--vai-ex-color-fg-secondary); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vai-color-signal-green); box-shadow: 0 0 6px rgba(16, 185, 129, 0.6); } .dot-dim { background: var(--vai-ex-color-fg-secondary); box-shadow: none; } .dot-red { background: var(--vai-color-signal-red); box-shadow: 0 0 6px rgba(239, 68, 68, 0.6); } .caret { color: var(--vai-ex-color-fg-secondary); font-size: 10px; } .board-picker { position: relative; } .board-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 260px; max-height: 60vh; overflow-y: auto; background: var(--rec-surface-default); border: 1px solid var(--vai-color-border); border-radius: 4px; padding: var(--vai-ex-spacing-xs); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); } .board-menu button { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; background: transparent; border: 0; color: var(--vai-color-fg); font-family: inherit; font-size: 13px; padding: 8px 12px; border-radius: 3px; cursor: pointer; } .board-menu button:hover { background: var(--rec-surface-elevated); } .board-menu button.active { background: rgba(59, 130, 246, 0.16); color: var(--vai-color-signal-blue); } .board-menu .meta { color: var(--vai-ex-color-fg-secondary); font-size: 12px; font-variant-numeric: tabular-nums; } /* ---------- Main + hero ---------- */ main { max-width: 1280px; margin: 0 auto; padding: 96px var(--vai-ex-spacing-l) var(--vai-ex-spacing-xl); } .hero { text-align: center; padding: var(--vai-ex-spacing-xl) 0; } .kicker { font-family: var(--vai-font-family); font-size: 11px; letter-spacing: 0.22em; color: var(--vai-ex-color-fg-secondary); margin: 0 0 var(--vai-ex-spacing-s); text-transform: uppercase; } .title { font-family: var(--vai-font-family); font-weight: 300; font-size: clamp(40px, 6vw, 64px); letter-spacing: 0.02em; margin: 0; line-height: 1.1; color: var(--vai-color-fg); } .title strong { font-weight: 600; color: var(--vai-color-signal-blue); } .lede { margin: var(--vai-ex-spacing-m) auto 0; max-width: 540px; color: var(--vai-ex-color-fg-secondary); font-size: var(--vai-ex-font-size-s); } /* ---------- Kanban ---------- */ .kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vai-ex-spacing-m); margin-top: var(--vai-ex-spacing-l); } .column { background: rgba(30, 41, 59, 0.72); border: 1px solid var(--vai-color-border); border-radius: 6px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; min-height: 360px; max-height: calc(100vh - 260px); overflow: hidden; } .column > header { padding: 12px var(--vai-ex-spacing-m) 10px; border-bottom: 1px solid var(--vai-color-border); display: flex; justify-content: space-between; align-items: center; font-family: var(--vai-font-family); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vai-ex-color-fg-secondary); } .column .count { background: var(--rec-surface-elevated); color: var(--vai-color-fg); border-radius: 3px; padding: 2px var(--vai-ex-spacing-s); font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: 0; } .cards { flex: 1 1 auto; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: var(--vai-ex-spacing-s); scrollbar-width: thin; scrollbar-color: var(--vai-color-border) transparent; } .cards::-webkit-scrollbar { width: 6px; } .cards::-webkit-scrollbar-thumb { background: var(--vai-color-border); border-radius: 3px; } /* Cards */ .card { background: var(--rec-surface-default); border: 1px solid var(--vai-color-border); border-radius: 4px; padding: 10px 12px; font-size: 13px; color: var(--vai-color-fg); line-height: 1.45; transition: border-color 120ms ease, background 120ms ease; cursor: default; } .card:hover { background: var(--rec-surface-elevated); border-color: var(--vai-color-signal-blue); } .card .title { font-family: var(--vai-font-family); font-size: 13px; font-weight: 500; color: var(--vai-color-fg); margin: 0 0 6px; word-break: break-word; letter-spacing: 0; } .card .meta { display: flex; gap: var(--vai-ex-spacing-s); flex-wrap: wrap; align-items: center; font-size: 11px; color: var(--vai-ex-color-fg-secondary); font-variant-numeric: tabular-nums; } .card .meta .sep { color: var(--vai-color-border); } .card .meta .id { color: var(--vai-ex-color-fg-secondary); } .card .priority { display: inline-block; padding: 1px var(--vai-ex-spacing-s); border-radius: 3px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; border: 1px solid currentColor; } .priority.p-0 { color: var(--vai-color-signal-red); } .priority.p-1 { color: var(--vai-color-signal-yellow); } .priority.p-2 { color: var(--vai-color-signal-blue); } .priority.p-3 { color: var(--vai-ex-color-fg-secondary); } .priority.p-4 { color: var(--vai-color-fg-disabled); } .empty { color: var(--vai-ex-color-fg-secondary); font-size: 12px; padding: var(--vai-ex-spacing-l); text-align: center; } /* ---------- Fleet (project sidebar) ---------- */ .fleet { position: fixed; bottom: var(--vai-ex-spacing-l); right: var(--vai-ex-spacing-l); width: 280px; background: rgba(30, 41, 59, 0.85); border: 1px solid var(--vai-color-border); border-radius: 6px; padding: 12px var(--vai-ex-spacing-m); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 5; } .fleet header { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vai-ex-color-fg-secondary); margin-bottom: var(--vai-ex-spacing-s); } .fleet ul { list-style: none; padding: 0; margin: 0; max-height: 220px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--vai-color-border) transparent; } .fleet li { font-size: 12.5px; color: var(--vai-color-fg); padding: 6px 0; border-bottom: 1px solid rgba(71, 85, 105, 0.4); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .fleet li:last-child { border-bottom: none; } .fleet li:hover { color: var(--vai-color-signal-blue); } .fleet li .meta { color: var(--vai-ex-color-fg-secondary); font-variant-numeric: tabular-nums; font-size: 11px; } .fleet li.active { color: var(--vai-color-signal-blue); } @media (max-width: 900px) { .kanban { grid-template-columns: 1fr; } .fleet { position: static; width: auto; margin: var(--vai-ex-spacing-l); } main { padding-top: 80px; } }