/* Handoff design tokens — the Blueprint identity (picked by Michael 2026-07-24, superseding the paper language on product surfaces; see docs/design.md addendum). Light mode is drafting paper, dark mode is the night board. Theme is set as data-theme="light|dark" on before paint (see the bootstrap snippet in each page head). Every hex in the product lives in this file. */ /* ---------- fonts (self-hosted, latin subset; no Google Fonts request in product) ---------- */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/lato-400.woff2') format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/lato-700.woff2') format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/lato-900.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/plexmono-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/plexmono-500.woff2') format('woff2'); } /* ---------- palette ---------- */ :root { /* light — drafting paper */ --bg: #F5F8FC; --rail: #FFFFFF; --panel: #FFFFFF; --panel2: #EFF3F9; --edge: #D9E1EC; --edge2: #C2CEDF; --text: #16233A; --muted: #5E6B85; --faint: #7189B0; /* grid-adjacent labels: nav sections, row meta, live status */ --accent: #E4572E; /* stamp orange survives the rebrand — the mark's leg */ --accent-soft: rgba(228, 87, 46, .09); --hover: #F0F3F8; --active: #E6ECF5; --grid: rgba(22, 35, 58, .06); --scrim: rgba(22, 35, 58, .45); /* behind modal sheets: ink over the board */ --font-sans: 'Lato', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', monospace; } [data-theme="dark"] { /* dark — the night board */ --bg: #0D1420; --rail: #0A101A; --panel: #121B2B; --panel2: #16202F; --edge: #20304A; --edge2: #2A3C5A; --text: #EAF0F8; --muted: #7E8CA3; --faint: #5E80B8; --accent: #E4572E; --accent-soft: rgba(228, 87, 46, .14); --hover: #111927; --active: #182338; --grid: rgba(139, 163, 204, .055); --scrim: rgba(4, 9, 16, .62); } /* ---------- base ---------- */ * { box-sizing: border-box; } html { background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-weight: 400; line-height: 1.5; } /* the drafting grid — apply to the surface that represents the board */ .gridded { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 36px 36px; } /* ---------- type ---------- */ /* screen titles are drawing labels: mono, upper, tight */ .drawtitle { font-family: var(--font-mono); font-weight: 500; font-size: 1.4rem; letter-spacing: -.01em; text-transform: uppercase; margin: 0; } .deck { font-size: 1rem; color: var(--muted); margin: 0; max-width: 60ch; } /* mono furniture */ .mono { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; } .navlab { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); } /* ---------- buttons & inputs ---------- */ .btn { display: inline-block; border-radius: 999px; padding: .42rem 1.05rem; font-family: var(--font-sans); font-weight: 700; font-size: .82rem; white-space: nowrap; text-decoration: none; cursor: pointer; border: 0; } .btn-primary { background: var(--accent); color: #FFFFFF; } .btn-secondary { background: transparent; color: var(--text); border: 1.5px solid var(--muted); padding: .38rem 1.05rem; } .btn.quiet { background: transparent; color: var(--muted); border: 1px solid var(--edge2); font-weight: 700; font-size: .76rem; padding: .32rem .9rem; } .btn.quiet:hover { color: var(--text); border-color: var(--muted); } .btn.big { padding: .6rem 1.5rem; font-size: .95rem; } .input { font: inherit; padding: .48rem .8rem; border: 1px solid var(--edge); border-radius: 8px; background: var(--panel2); color: var(--text); min-width: 0; } .input::placeholder { color: var(--muted); } .input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } /* ---------- app chrome ---------- */ .rail { background: var(--rail); color: var(--text); border-right: 1px solid var(--edge); display: flex; flex-direction: column; padding: 14px 12px; } .rail .nav a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .88rem; } /* nested one level under a hub row: text aligns with the hub NAME (badge 18px + 9px gap + 10px pad), not with the badge — the tree reads as a tree */ .rail .nav a.sub { padding-left: 37px; font-size: .85rem; color: var(--muted); } .rail .nav a.on { background: var(--active); color: var(--text); font-weight: 700; } .rail .nav a.sub.on { color: var(--text); } .rail .nav a:hover { background: var(--hover); } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; } .dot.warn { box-shadow: 0 0 0 3px var(--accent-soft); } .dot.idle { background: var(--muted); opacity: .5; } .crumb { display: flex; align-items: center; gap: 12px; padding: 13px 26px; border-bottom: 1px solid var(--edge); background: var(--bg); } .crumb .path { font-size: .85rem; color: var(--muted); min-width: 0; } .crumb .path b { color: var(--text); font-weight: 700; } .live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); } /* ---------- cards, rows, tabs ---------- */ .panelcard { background: var(--panel); border: 1px solid var(--edge); border-radius: 10px; } .rowitem { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 14px; background: var(--panel); border: 1px solid var(--edge); border-radius: 10px; margin-bottom: 8px; } .rowmain { flex: 1; min-width: 160px; } .rowmain b { display: block; font-weight: 700; font-size: .9rem; } .rowmeta { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin-top: 3px; } .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--edge); } .tab { padding: .5rem .9rem; font-family: var(--font-sans); font-size: .85rem; font-weight: 700; color: var(--muted); border: 0; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab.on { color: var(--text); border-bottom-color: var(--accent); } /* tinted note — attention without alarm (attribution, hints, flashes) */ .note-tint { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 10px; padding: 12px 15px; font-size: .88rem; } .note-tint .detail { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); word-break: break-word; margin-top: 4px; } /* numbered steps (the connect card) */ .steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .steps li { display: flex; gap: 10px; align-items: baseline; font-size: .9rem; } .steps .stepnum { font-weight: 900; color: var(--accent); font-size: .95rem; min-width: 1.1em; text-align: right; } /* quiet mono disclosure */ details.quiet > summary { cursor: pointer; list-style: none; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: .6rem; color: var(--faint); } details.quiet > summary::-webkit-details-marker { display: none; } details.quiet > summary::before { content: "▸ "; } details.quiet[open] > summary::before { content: "▾ "; } details.quiet > summary:hover { color: var(--text); } /* hub badge: hairline circle + owner initial in stamp orange (brand carry-over) */ .hubbadge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--muted); color: var(--accent); font-weight: 900; font-size: 1rem; line-height: 1; flex: none; } .hubbadge.mini { width: 18px; height: 18px; font-size: .6rem; border-color: var(--faint); } /* type-only credit for mono/uppercase furniture — the ensō never enters mono capitals */ .credit-mono { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }