/* Avablue Desk — operator console stylesheet. Tokens adopted from docs/BRAND.md (MoneySeed v4), both theme sets. LIGHT is the default (CLAUDE.md UI amendment 2026-08-07, DECISIONS #5); dark applies via html[data-theme="dark"], chosen by the persistent toggle and stamped on before first paint by the inline script in base.html. House rules embodied here: - Fraunces for headings, Archivo for UI, JetBrains Mono for EVERY number. - Sprout green means gain/positive only; red means loss/destructive; amber is the attention state; interactive color is purple. - One hero element per screen carries the seed gradient. - Craft over cramming (DECISIONS #2): generous spacing where it aids scanning; clarity still beats decoration. */ /* ---------- fonts (self-hosted; the console never phones out) ---------- */ @font-face { font-family: "Fraunces"; src: url("../fonts/fraunces.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* ---------- tokens: LIGHT (default) ---------- */ :root { --seed-900:#1c1033; --seed-800:#2a1850; --seed-700:#3d1f78; --seed-600:#522b9c; --seed-500:#6c3fc4; --seed-400:#8a63dd; --seed-300:#b298ec; --seed-200:#d7c9f6; --seed-100:#ece4fb; --seed-050:#f6f2fd; --bg:#fcfbfe; --bg-2:#ffffff; --surface:#ffffff; --surface-2:#f5f2fc; --hair:rgba(82,43,156,.10); --hair-2:rgba(82,43,156,.64); --txt:#1c1033; --txt-2:#514a67; --txt-3:#6c6483; --gain:#107353; --gain-soft:rgba(16,115,83,.12); --loss:#be2d31; --loss-soft:rgba(190,45,49,.10); --warn:#8a6008; --warn-soft:rgba(138,96,8,.12); --mint:#107353; --brand-ix:#522b9c; --accent-txt:#6c3fc4; --ix-soft:rgba(82,43,156,.10); --hero-glow:rgba(138,99,221,.16); --hero-glow-2:rgba(39,201,143,.09); --shadow-strong:0 40px 90px -46px rgba(82,43,156,.32); --shadow-soft:0 14px 34px -18px rgba(82,43,156,.24); --banner-standby-a:var(--seed-100); --banner-standby-b:#ffffff; --input-bg:#ffffff; --font-display:"Fraunces", Georgia, serif; --font-ui:"Archivo", system-ui, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, monospace; --dur-instant:90ms; --dur-fast:140ms; --dur-base:200ms; --ease-standard:cubic-bezier(.2,0,.2,1); --radius:16px; } /* ---------- tokens: DARK (via the persistent toggle) ---------- */ html[data-theme="dark"] { --bg:#0b0717; --bg-2:#110a24; --surface:#170d2e; --surface-2:#1f1340; --hair:rgba(178,152,236,.14); --hair-2:rgba(178,152,236,.62); --txt:#f3effb; --txt-2:#b9b0d4; --txt-3:#8f87a7; --gain:#27c98f; --gain-soft:rgba(39,201,143,.14); --loss:#e96569; --loss-soft:rgba(233,101,105,.14); --warn:#e7b740; --warn-soft:rgba(231,183,64,.12); --mint:#5fe0ad; --brand-ix:#6c3fc4; --accent-txt:#b298ec; --ix-soft:rgba(108,63,196,.16); --hero-glow:rgba(108,63,196,.5); --hero-glow-2:rgba(39,201,143,.12); --shadow-strong:0 40px 100px -40px rgba(0,0,0,.8); --shadow-soft:0 14px 34px -12px rgba(0,0,0,.7); --banner-standby-a:var(--seed-800); --banner-standby-b:var(--surface); --input-bg:var(--bg-2); } @media (prefers-reduced-motion: reduce) { :root { --dur-instant:1ms; --dur-fast:1ms; --dur-base:1ms; } } /* ---------- base ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; } body { min-height: 100%; background: radial-gradient(1100px 500px at 80% -10%, var(--hero-glow) 0%, transparent 60%), radial-gradient(900px 420px at -10% 110%, var(--hero-glow-2) 0%, transparent 55%), var(--bg); background-attachment: fixed; color: var(--txt); font-family: var(--font-ui); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* No transition on theme switch: every token flips in the same frame. A staggered fade (text instant, background 200ms) is a visible mixed-theme state — the thing DECISIONS #5 forbids at first paint, and no better mid-session. */ } a { color: var(--accent-txt); } h1, h2 { font-family: var(--font-display); font-weight: 550; letter-spacing: -0.01em; } .mono, time, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ---------- wordmark ---------- */ /* Logo slot: the Avablue mark goes beside this wordmark when the asset exists; until then the wordmark alone carries identity (approved 2026-08-06). */ .wordmark { font-family: var(--font-ui); font-weight: 600; font-size: 17px; letter-spacing: .01em; } .wordmark .avablue { color: var(--txt); } .wordmark .desk { color: var(--mint); } .wordmark .domain { display: block; color: var(--txt-3); font-weight: 400; font-size: 12px; letter-spacing: .04em; } /* ---------- theme toggle ---------- */ .btn-theme { background: none; border: 1px solid var(--hair-2); border-radius: 9px; color: var(--txt-2); font-size: 14px; line-height: 1; padding: 8px 11px; cursor: pointer; transition: color var(--dur-instant) var(--ease-standard), border-color var(--dur-instant) var(--ease-standard); } .btn-theme:hover { color: var(--txt); border-color: var(--seed-300); } /* show the glyph for the theme you would SWITCH TO */ .btn-theme .to-light { display: none; } html[data-theme="dark"] .btn-theme .to-light { display: inline; } html[data-theme="dark"] .btn-theme .to-dark { display: none; } /* ---------- login ---------- */ .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px; } .login-card { position: relative; width: min(400px, 100%); background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); box-shadow: var(--shadow-strong); padding: 44px 40px 40px; } .login-card .btn-theme { position: absolute; top: 20px; right: 20px; } .login-card .wordmark { font-size: 22px; } .login-card .lede { color: var(--txt-3); font-size: 13px; margin-top: 6px; margin-bottom: 34px; } .field { margin-bottom: 22px; } .field label { display: block; color: var(--txt-2); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; } .field input { width: 100%; background: var(--input-bg); border: 1px solid var(--hair-2); border-radius: 10px; color: var(--txt); font-family: var(--font-ui); font-size: 15px; padding: 12px 14px; transition: border-color var(--dur-instant) var(--ease-standard), box-shadow var(--dur-instant) var(--ease-standard); } .field input.mono { font-family: var(--font-mono); letter-spacing: .35em; } .field input:focus { outline: none; border-color: var(--seed-400); box-shadow: 0 0 0 3px rgba(138, 99, 221, .25); } .btn { display: inline-block; width: 100%; background: linear-gradient(135deg, var(--seed-600), var(--seed-500)); border: none; border-radius: 10px; color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 15px; letter-spacing: .02em; padding: 13px 16px; cursor: pointer; transition: filter var(--dur-instant) var(--ease-standard); } .btn:hover { filter: brightness(1.12); } .errors { background: var(--loss-soft); border: 1px solid var(--loss); border-radius: 10px; color: var(--txt); font-size: 13.5px; padding: 12px 14px; margin-bottom: 22px; } /* ---------- console frame ---------- */ .console { max-width: 1200px; margin: 0 auto; padding: 28px 36px 72px; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 26px; border-bottom: 1px solid var(--hair); margin-bottom: 30px; } .topbar .right { display: flex; align-items: center; gap: 14px; } .session-note { color: var(--txt-3); font-size: 12.5px; margin-right: 6px; } .btn-logout { background: none; border: 1px solid var(--hair-2); border-radius: 9px; color: var(--txt-2); font-family: var(--font-ui); font-size: 13px; font-weight: 600; padding: 8px 16px; cursor: pointer; transition: color var(--dur-instant) var(--ease-standard), border-color var(--dur-instant) var(--ease-standard); } .btn-logout:hover { color: var(--txt); border-color: var(--seed-300); } /* ---------- engine banner (the screen's one hero element) ---------- */ .banner { border-radius: var(--radius); padding: 30px 34px; margin-bottom: 34px; border: 1px solid var(--hair); box-shadow: var(--shadow-soft); } .banner .state-row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } .banner h1 { font-size: 30px; } .banner .explain { color: var(--txt-2); margin-top: 10px; max-width: 62ch; } .banner .meta { color: var(--txt-3); font-size: 13px; margin-top: 14px; } .banner--standby { background: radial-gradient(600px 220px at 90% 0%, var(--hero-glow-2) 0%, transparent 60%), linear-gradient(135deg, var(--banner-standby-a), var(--banner-standby-b) 65%); } .banner--killed { background: linear-gradient(135deg, var(--loss-soft), var(--surface) 70%); border-color: var(--loss); } .chip { display: inline-block; font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; border-radius: 999px; padding: 4px 13px; } .chip--clear { color: var(--gain); background: var(--gain-soft); } .chip--tripped { color: var(--loss); background: var(--loss-soft); } .chip--phase { color: var(--accent-txt); background: var(--ix-soft); font-weight: 500; letter-spacing: .05em; } .chip--paper { color: var(--warn); background: var(--warn-soft); } /* ---------- card grid ---------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 26px; } .card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 26px 28px; } .card h2 { font-size: 19px; margin-bottom: 4px; } .card .sub { color: var(--txt-3); font-size: 13px; margin-bottom: 18px; } .card--wide { grid-column: 1 / -1; } /* kill-switch + allocation rows */ .row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--hair); } .row:first-of-type { border-top: none; } .row .label { color: var(--txt); font-weight: 600; } .row .detail { color: var(--txt-3); font-size: 12.5px; } .shell-hint { margin-top: 18px; color: var(--txt-3); font-size: 12.5px; } .shell-hint code { font-family: var(--font-mono); color: var(--accent-txt); font-size: 12px; white-space: nowrap; } table.allocs { width: 100%; border-collapse: collapse; } table.allocs th { text-align: left; color: var(--txt-3); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 0 0 10px; } table.allocs td { padding: 10px 0; border-top: 1px solid var(--hair); } table.allocs td.num { text-align: right; } table.allocs tr.total td { color: var(--txt-2); font-weight: 600; } /* ---------- empty regions: what later phases fill ---------- */ .card--empty { border-style: dashed; background: transparent; box-shadow: none; } .card--empty h2 { color: var(--txt-2); } .card--empty .fills { color: var(--txt-3); font-size: 13.5px; max-width: 48ch; } .card--empty .chip { margin-bottom: 14px; }