/* building — design tokens & base styles (SPEC.md §12). Aesthetic: OpenAI / Notion / Vercel — monochrome, whitespace, subtle borders. */ :root { --bg: #ffffff; --sidebar: #f7f7f8; --fg: #0a0a0a; --muted: #6b7280; --border: #e5e7eb; --accent: #111827; --accent-fg: #ffffff; --link: #2563eb; --radius: 8px; --space: 8px; --green: #047857; --green-bg: #ecfdf5; --amber: #b45309; --amber-bg: #fffbeb; --blue: #1d4ed8; --blue-bg: #eff6ff; --grey: #374151; --grey-bg: #f3f4f6; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { color: var(--fg); background: var(--bg); font-size: 14px; line-height: 1.5; } /* Links: navigation/brand/buttons are neutral (set below); content links (in page content, footers, cards) are a consistent colour + underlined. */ a { color: inherit; text-decoration: none; } .site-main a:not(.btn), .site-footer a:not(.btn), .auth-card a:not(.btn), .main a:not(.btn):not(.subnav-link) { color: var(--link); text-decoration: underline; } .btn { text-decoration: none; } /* The app/dashboard shell locks the viewport (only the main panel scrolls). Marketing and auth shells scroll normally. */ body.app-shell { overflow: hidden; overscroll-behavior: none; display: flex; flex-direction: column; } /* --- Icons --------------------------------------------------------------- */ .icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* --- App shell: full-viewport, only the main panel scrolls --------------- */ /* Mobile top bar (hidden on desktop) */ .topbar { display: none; } .icon-btn { border: none; background: none; cursor: pointer; color: var(--fg); padding: 6px; border-radius: 6px; display: flex; } .icon-btn:hover { background: #ececee; } .backdrop { display: none; } .app { flex: 1 1 auto; min-height: 0; /* fill remaining viewport height */ display: grid; grid-template-columns: var(--sidebar-w, 248px) 1fr; transition: grid-template-columns 0.15s ease; } .sidebar { background: var(--sidebar); border-right: 1px solid var(--border); padding: 12px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; /* its own scroll if nav grows */ } .brand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; } .brand-icon { width: 22px; height: 22px; } .collapse-btn { border: none; background: none; cursor: pointer; color: var(--muted); padding: 4px; border-radius: 6px; display: flex; } .collapse-btn:hover { background: #ececee; color: var(--fg); } .chev-expand { display: none; } /* only shown when collapsed (re-open affordance) */ .switcher { color: var(--muted); font-size: 13px; padding: 0 2px; } .switcher-current { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--fg); margin-bottom: 6px; } .switcher-select { width: 100%; font-size: 12px; } .nav { display: flex; flex-direction: column; gap: 2px; } .nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); color: var(--fg); white-space: nowrap; } .nav a:hover { background: #ececee; } .nav a.active { background: #e6e6e9; font-weight: 600; } /* indented sub-items (rooms under Requirements, phases under Build) */ .nav a.nav-sub { padding: 4px 10px 4px 24px; font-size: 13px; color: var(--muted); gap: 8px; } .nav a.nav-sub .icon { width: 15px; height: 15px; } .nav a.nav-sub:hover { color: var(--fg); } .sidebar .spacer { flex: 1; } .sidebar hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; } /* Collapsed state (desktop only): icon-only rail, centred. Class lives on and is applied before first paint, so navigating never flashes. */ @media (min-width: 769px) { .nav-collapsed { --sidebar-w: 60px; } .nav-collapsed .nav-label, .nav-collapsed .nav a.nav-sub, .nav-collapsed .switcher { display: none; } .nav-collapsed .sidebar { padding-left: 8px; padding-right: 8px; } .nav-collapsed .brand-row { flex-direction: column; gap: 8px; } /* brand + re-open btn stacked */ .nav-collapsed .brand { justify-content: center; gap: 0; } .nav-collapsed .nav a { justify-content: center; gap: 0; padding: 8px 0; } .nav-collapsed .chev-collapse { display: none; } .nav-collapsed .chev-expand { display: inline; } } .main { padding: calc(var(--space) * 4); overflow-y: auto; min-height: 0; } .page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; } .page-sub { color: var(--muted); margin: 0 0 24px; } /* --- Components ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-fg); border-radius: var(--radius); padding: 8px 14px; font-size: 14px; cursor: pointer; } .btn:hover { opacity: 0.92; } .btn.secondary { background: var(--bg); color: var(--fg); border-color: var(--border); } .btn.secondary:hover { background: var(--grey-bg); } .btn.small { padding: 5px 10px; font-size: 13px; } .card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); padding: 16px; } .card h3 { margin: 0 0 6px; font-size: 15px; } .card p { margin: 0; color: var(--muted); } .input, textarea.input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; font: inherit; background: var(--bg); color: var(--fg); } .input:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; } .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--grey-bg); color: var(--grey); } .badge.needed { background: var(--grey-bg); color: var(--grey); } .badge.quoted { background: var(--blue-bg); color: var(--blue); } .badge.ordered { background: var(--amber-bg); color: var(--amber); } .badge.purchased{ background: var(--green-bg); color: var(--green); } /* variant statuses (§16.3) */ .badge.draft { background: var(--grey-bg); color: var(--grey); } .badge.under_review { background: var(--amber-bg); color: var(--amber); } .badge.chosen { background: var(--green-bg); color: var(--green); } .badge.archived { background: var(--grey-bg); color: var(--grey); } /* phase statuses (§16.3) */ .badge.planned { background: var(--grey-bg); color: var(--grey); } .badge.in_progress { background: var(--blue-bg); color: var(--blue); } .badge.done { background: var(--green-bg); color: var(--green); } /* item kinds + sourcing route kinds (§16.4) */ .badge.material { background: var(--grey-bg); color: var(--grey); } .badge.labour { background: var(--blue-bg); color: var(--blue); } .badge.self { background: var(--grey-bg); color: var(--grey); } .badge.quoted { background: var(--blue-bg); color: var(--blue); } .grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } /* §12.1 comparison — plain tables */ .table-wrap { overflow-x: auto; } .compare { border-collapse: collapse; width: 100%; font-size: 14px; } .compare th, .compare td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; } .compare thead th { background: var(--grey-bg); } .compare tbody th { background: var(--grey-bg); font-weight: 600; white-space: nowrap; } .compare td.na { color: var(--muted); } .compare tr.selected { background: var(--green-bg); } /* room board (Phase 6) */ .items { width: 100%; border-collapse: collapse; margin-bottom: 12px; } .items td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; } .items td:last-child { text-align: right; white-space: nowrap; } /* media thumbnails + rendered-asset grids (SPEC §7) */ .opt-thumb { display: inline-block; width: 28px; height: 28px; border-radius: 4px; background-size: cover; background-position: center; background-color: var(--grey-bg); vertical-align: middle; margin-right: 6px; } .doc-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--grey-bg); display: block; } .doc-thumb.placeholder { display: grid; place-items: center; color: var(--muted); aspect-ratio: 4/3; } .doc-cover { display: block; background-repeat: no-repeat; background-color: var(--grey-bg); border: 1px solid var(--border); border-radius: 8px; } /* page grid: tiles cropped out of the one sprite via background-position */ .page-grid { display: flex; flex-wrap: wrap; gap: 12px; } .page-cell { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; } .page-cell figcaption { font-size: 12px; } .btn.danger { background: #b3261e; border-color: #b3261e; color: #fff; } .btn.danger:hover { background: #8f1d17; } .linklike { background: none; border: none; padding: 0 4px; color: var(--muted); font-size: 12px; cursor: pointer; text-decoration: underline; } .linklike:hover { color: var(--fg); } .page-tile { display: block; background-repeat: no-repeat; background-color: var(--grey-bg); border: 1px solid var(--border); border-radius: 6px; } a.page-tile { cursor: zoom-in; transition: border-color 0.1s ease; } a.page-tile:hover { border-color: var(--muted); } .page-tile.placeholder { opacity: 0.55; } /* Comments (threaded; SPEC §16.6) */ .comments { max-width: 640px; } .comment { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; background: var(--bg); } .comment.resolved { opacity: 0.6; } .comment-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 4px; } .comment p { margin: 0; white-space: normal; } .comment .reply { margin: 8px 0 0 16px; background: var(--grey-bg); } .comment .reply-form { margin-top: 8px; } .stack { display: flex; flex-direction: column; gap: 16px; } .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .muted { color: var(--muted); } /* --- Marketing shell (public pages: landing, /ui, legal) ----------------- */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--bg); } .site-header .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; } .site-header nav { display: flex; align-items: center; gap: 16px; } .site-main { max-width: 920px; margin: 0 auto; padding: 32px 24px; } .site-footer { max-width: 920px; margin: 0 auto; padding: 24px; color: var(--muted); border-top: 1px solid var(--border); display: flex; gap: 14px; flex-wrap: wrap; } .hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 24px 0; } .hero-copy h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 14px; } .hero-copy p { font-size: 16px; color: var(--muted); margin: 0; max-width: 46ch; } .hero-art { color: var(--fg); } .hero-art svg { width: 100%; height: auto; } @media (max-width: 768px) { .hero { grid-template-columns: 1fr; gap: 24px; } .hero-copy h1 { font-size: 30px; } } /* --- Auth shell (login/signup/reset/verify) — no sidebar ----------------- */ .auth-shell { background: var(--sidebar); } .auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; } .auth-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; } .auth-wrap .auth-card { width: 100%; } .auth-card { max-width: 420px; margin: 24px auto; } /* --- Forms (allauth, via our fields.html override) ----------------------- */ /* Placeholder style: inputs show a placeholder hint; labels are sr-only (a11y). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .form-field { margin-bottom: 16px; } .form-field .input { width: 100%; } .form-field label.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--fg); } .form-field label.check span a { white-space: normal; } .form-field .field-error, ul.errorlist { color: #991b1b; font-size: 12.5px; margin-top: 4px; list-style: none; padding: 0; } .form-field .help { font-size: 12px; margin-top: 4px; } /* --- Flash messages ------------------------------------------------------ */ .messages { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; } /* The #messages container is always in the DOM (htmx OOB target); collapse it when empty. */ .messages:empty { margin: 0; } .msg-flash { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; background: var(--grey-bg); } .msg-flash.error { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .msg-flash.success { background: var(--green-bg); border-color: #a7f3d0; color: var(--green); } /* --- Agent chat (append-only; errors & tool events retained) ------------- */ .chat { display: flex; flex-direction: column; gap: 10px; } .msg { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; } .msg .who { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; } .msg.user { background: var(--grey-bg); } .msg.assistant { background: var(--bg); } .msg.tool { background: #fafafa; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; } .msg.error { /* errors stay in the chat, never auto-dismissed */ background: #fef2f2; border-color: #fecaca; color: #991b1b; } .msg pre { margin: 0; white-space: pre-wrap; word-break: break-word; } /* --- Mobile: off-canvas drawer + top bar --------------------------------- */ @media (max-width: 768px) { .topbar { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: 8px 12px; background: var(--sidebar); border-bottom: 1px solid var(--border); } .app { grid-template-columns: 1fr; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 248px; z-index: 50; transform: translateX(-100%); transition: transform 0.18s ease; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12); } body.nav-open .sidebar { transform: none; } body.nav-open .backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.35); } /* The drawer always shows full labels; desktop collapse is irrelevant here. */ .sidebar .nav-label, .sidebar .switcher { display: revert; } .collapse-btn { display: none; } } /* --- Badge: test statuses (staff gallery, SPEC §12.5) ----------------------- */ .badge.passed { background: var(--green-bg); color: var(--green); } .badge.failed { background: #fef2f2; color: #b91c1c; } .badge.skipped { background: var(--grey-bg); color: var(--grey); } /* --- Secondary nav component (components/subnav.html, §12.6) ---------------- */ /* Tab row: the bar sits on a grey baseline; the active section is underlined black. */ .subnav { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 22px; border-bottom: 1px solid var(--border); } .subnav-link { padding: 8px 12px; margin-bottom: -1px; color: var(--muted); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; } .subnav-link:hover { color: var(--fg); } .subnav-link.active { color: var(--fg); border-bottom-color: var(--fg); } /* --- Screenshot gallery (/staff/test) -------------------------------------- */ .shot-feature { margin-top: 28px; } .shot-feature-title { font-size: 16px; margin: 0 0 10px; } .shot-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } .shot { margin: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .shot-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 13px; border-bottom: 1px solid var(--border); } .shot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shot img { width: 100%; display: block; }