/* ========================================================================== Certra — base: tokens, reset, layout, primitives Design system: "Instrument" (see design/DESIGN.md) ========================================================================== */ :root { /* ---- surfaces (dark = default) ---- Navy rather than neutral black: the mark sits on this family, and a brand-tinted ground makes the teal read as the same colour it is in the logo instead of drifting green against a grey. */ --bg: #0b0f1e; --surface-1: #10152a; --surface-2: #161c36; --surface-3: #1d2542; --surface-hover: #161c36; --inset: #0d1223; --border: #232b47; --border-strong: #313b5c; /* ---- text ---- */ --text: #e6e9f2; --text-2: #9aa1b4; --text-3: #697084; /* ---- accent: the mark's teal, exactly ---- */ --accent: #22c7b0; --accent-hover: #35dcc4; --accent-press: #17a992; --on-accent: #08101f; --accent-soft: rgba(34, 199, 176, 0.10); --accent-ring: rgba(34, 199, 176, 0.35); /* primary button */ --btn-bg: var(--accent); --btn-bg-hover: var(--accent-hover); --btn-fg: var(--on-accent); /* ---- secondary data series: the mark's violet ---- Lifted from the logo's #6c63f0, which measures 4.0:1 on surface-1 and so is not legible enough for small text. The mark keeps the original; a token that labels a chart series has to clear 4.5. */ --accent-2: #8b84ff; --violet-soft: rgba(139, 132, 255, 0.12); /* ---- semantic ---- */ --success: #3dd68c; --success-soft: rgba(61, 214, 140, 0.12); --warning: #ffb224; --warning-soft: rgba(255, 178, 36, 0.12); --danger: #ff5c5c; --danger-soft: rgba(255, 92, 92, 0.12); --info: #5b8cff; --info-soft: rgba(91, 140, 255, 0.12); --orange: #ff8a4c; --orange-soft: rgba(255, 138, 76, 0.12); /* ---- elevation: layout surfaces are flat; overlays only ---- */ --shadow-1: none; --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.45); /* ---- radii ---- */ --r-lg: 12px; --r-md: 10px; --r-sm: 8px; --r-xs: 6px; /* ---- metrics ---- */ --topbar-h: 48px; /* The nav is two fixed rows: sections, then that section's sub-tabs. Fixed, because a nav that grows with its contents pushes the work off screen. */ --nav-sections-h: 40px; --nav-sub-h: 40px; --nav-h: 80px; --ai-w: 400px; --ctl-h: 32px; --ctl-h-sm: 26px; --ctl-h-lg: 40px; /* ---- motion ---- */ --ease: cubic-bezier(0.2, 0, 0, 1); --t-fast: 120ms var(--ease); --t-med: 160ms var(--ease); /* ---- type ---- Three faces, three jobs. Geist is the instrument: every control, label and line of body copy. Geist Mono carries every figure. The serif is the display face — section titles, document headings, the report — and appears nowhere a number or a control does, so it reads as the voice of the document rather than decoration on the tool. */ --font: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "Geist Mono", "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; --display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif; color-scheme: dark; } /* The display face runs large and low-contrast at small sizes, so it is only ever used above 18px and always with its own tighter leading. */ .display { font-family: var(--display); font-weight: 400; letter-spacing: -0.005em; line-height: 1.15; } /* Dark only. Certra is read in control rooms and planning offices against projected schedules; a light variant was maintained for a while and never used, so the tokens above are the whole palette and `data-theme` is fixed to "dark" on . */ /* ---- reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 14px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: 13px; background: var(--bg); color: var(--text); line-height: 1.5; height: 100vh; overflow: hidden; -webkit-font-smoothing: antialiased; transition: background var(--t-med), color var(--t-med); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } button:disabled { cursor: not-allowed; } a { color: var(--accent); text-decoration: none; } svg.i { width: 1.15em; height: 1.15em; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; } [hidden] { display: none !important; } ::selection { background: var(--accent-soft); } /* every number, date, id and file name is mono with tabular figures */ .mono, .num, .kpi-value, .audit-detail, .table .num, code { font-variant-numeric: tabular-nums; } /* subtle scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; } *::-webkit-scrollbar-track { background: transparent; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; } /* ---- app shell --------------------------------------------------------- */ .app { display: grid; grid-template-rows: var(--topbar-h) var(--nav-h) 1fr; height: 100vh; } .workspace { display: grid; grid-template-columns: minmax(0, 1fr) var(--ai-w); min-height: 0; overflow: hidden; transition: grid-template-columns 180ms var(--ease); } .app[data-ai="closed"] .workspace { grid-template-columns: minmax(0, 1fr) 0px; } .ai-panel { min-width: 0; overflow: hidden; } .app[data-ai="closed"] .ai-panel { border-left-color: transparent; } .main { min-width: 0; overflow-y: auto; overflow-x: hidden; } /* ---- topbar ------------------------------------------------------------ */ .topbar { display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--surface-1); border-bottom: 1px solid var(--border); z-index: 40; } .brand { display: flex; align-items: center; gap: 8px; min-width: 0; } /* The mark is two overlapping distribution curves crossing into an A. It keeps its own teal and violet; only the wordmark follows --text. */ .brand-mark { width: 30px; height: 20px; flex: none; overflow: visible; } .brand-name { font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .brand-sub { color: var(--text-3); font-size: 12px; white-space: nowrap; } .topbar-sep { width: 1px; height: 20px; background: var(--border); } .status-pill { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--surface-2); color: var(--text-2); font-size: 12px; min-width: 0; max-width: 48vw; } .status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex: none; } .status-pill.ok .dot { background: var(--accent); } .status-pill .name { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .status-pill .meta { white-space: nowrap; font-family: var(--mono); font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; } .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; } /* ---- buttons ----------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--ctl-h); padding: 0 12px; border-radius: var(--r-xs); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-weight: 500; font-size: 13px; white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .btn:hover:not(:disabled) { background: var(--surface-3); border-color: var(--border-strong); } .btn:disabled { opacity: 0.45; } .btn.primary { background: var(--btn-bg); border-color: transparent; color: var(--btn-fg); } .btn.primary:hover:not(:disabled) { background: var(--btn-bg-hover); } .btn.primary:active:not(:disabled) { background: var(--accent-press); } .btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); } .btn.ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); border-color: var(--border); } .btn.soft { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--accent); } .btn.soft:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); } .btn.danger-ghost { background: transparent; border-color: transparent; color: var(--danger); } .btn.danger-ghost:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); } .btn.sm { height: var(--ctl-h-sm); padding: 0 9px; font-size: 12px; } .btn.lg { height: var(--ctl-h-lg); font-size: 13px; } .btn.icon { width: var(--ctl-h); padding: 0; } .btn.icon.sm { width: var(--ctl-h-sm); } .btn.block { width: 100%; } .btn.is-active { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--accent); } .btn .spinner { display: none; } .btn.loading .spinner { display: inline-block; } .btn.loading .label-idle { display: none; } .btn .label-busy { display: none; } .btn.loading .label-busy { display: inline; } .spinner { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(0, 0, 0, 0.25); border-top-color: currentColor; animation: spin 0.7s linear infinite; } .spinner.dark { border-color: var(--border-strong); border-top-color: var(--accent); } @keyframes spin { to { transform: rotate(360deg); } } .kbd { display: inline-grid; place-items: center; height: 20px; min-width: 20px; padding: 0 5px; border: 1px solid var(--border); border-radius: 4px; font-family: var(--mono); font-size: 10.5px; color: var(--text-2); background: var(--inset); } /* ---- micro label ------------------------------------------------------- */ .micro { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } /* ---- form controls ----------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); display: flex; justify-content: space-between; align-items: center; } .field-hint { font-size: 11px; color: var(--text-3); } .input, .select { height: var(--ctl-h); padding: 0 10px; background: var(--inset); border: 1px solid var(--border); border-radius: var(--r-xs); color: var(--text); font-size: 13px; outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); width: 100%; } .input::placeholder, textarea::placeholder { color: var(--text-3); } .input:hover, .select:hover { border-color: var(--border-strong); } .input:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); } .input.err { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-soft); } .select { cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666b76' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 28px; } .select.sm { height: var(--ctl-h-sm); font-size: 12px; padding: 0 24px 0 8px; background-position: right 6px center; } .input.mono, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* joined segmented control — no inner pills, no shadow */ .segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: var(--ctl-h); border: 1px solid var(--border); border-radius: var(--r-xs); overflow: hidden; background: var(--inset); } .segmented button { font-size: 12px; font-weight: 500; color: var(--text-3); border-right: 1px solid var(--border); transition: background var(--t-fast), color var(--t-fast); } .segmented button:last-child { border-right: none; } .segmented button:hover { color: var(--text-2); } .segmented button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); } /* ---- toast ------------------------------------------------------------- */ .toast-stack { position: fixed; right: 16px; bottom: 16px; left: auto; transform: none; display: flex; flex-direction: column; gap: 8px; z-index: 200; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 11px; background: var(--surface-2); border: 1px solid var(--border-strong); border-left: 3px solid var(--text-3); border-radius: var(--r-sm); box-shadow: var(--shadow-2); font-size: 13px; max-width: 420px; animation: toast-in 0.16s var(--ease); pointer-events: auto; } .toast .bar { display: none; } .toast.success { border-left-color: var(--success); } .toast.error { border-left-color: var(--danger); } .toast.leaving { animation: toast-out 0.12s var(--ease) forwards; } @keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateY(4px); } } @keyframes fade-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* ---- backdrop for overlay panels (narrow viewports) --------------------- */ .backdrop { position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(0, 0, 0, 0.6); z-index: 30; opacity: 0; pointer-events: none; transition: opacity var(--t-med); } .backdrop.show { opacity: 1; pointer-events: auto; } /* ---- utilities --------------------------------------------------------- */ .muted { color: var(--text-2); } .dim { color: var(--text-3); } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row { display: flex; align-items: center; gap: 8px; } .grow { flex: 1; min-width: 0; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }