/* Vendored from face/packages/design/design.css — the single source of truth for this design system lives THERE; edit it there and re-copy. Copied (not fetched) so port3000 stays zero-dependency and boots offline. Byte-faithful to the source apart from this provenance header. Served at GET /design.css. */ /* tidyduck design system. Extracted from apps/web/src/app/dashboard/dashboard.css — same visual design, de-prefixed (.dash → .design, .dash-* → .*) and tokenized. Apply .design to a root element (e.g. ) to opt a page in; overlay pieces (.modal, .modal-card, .input, .menu, .art-drag-chip) work anywhere because the tokens live on :root. dashboard.css has no dark mode, so neither does this. */ @import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap'); /* --------------------------------------------------------------------------- Tokens -------------------------------------------------------------------------- */ :root { /* color — surfaces & ink */ --bg: #ebf2fa; --bg-2: #d8e6f5; --ink: #0d121f; --ink-2: #3a4358; --ink-3: #7a8298; --ink-inverse: #f0f5fc; --card: #f6faff; --rule: #c8d8ec; --highlight: #c5e0ff; /* color — accent & status */ --accent: #4f7eff; --accent-soft: #dbeafe; --ok: #10b981; --ok-deep: #047857; --warn: #f59e0b; --warn-deep: #92400e; --danger: #c81d41; --red: #ef4444; --purple: #7c3aed; --pink: #db2777; --orange-deep: #9a3412; /* color — RGB channels, for alpha washes: rgba(var(--x-rgb), a) */ --ink-rgb: 13, 18, 31; --ink-inverse-rgb: 240, 245, 252; --accent-rgb: 79, 126, 255; --ok-rgb: 16, 185, 129; --warn-rgb: 245, 158, 11; --danger-rgb: 200, 29, 65; /* font */ --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; /* radius */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 14px; --radius-3xl: 16px; --radius-pill: 999px; --radius-round: 50%; /* space — 4px rhythm; off-grid nudges stay literal in component rules */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; /* shadow */ --ring-ok: 0 0 0 3px rgba(16, 185, 129, 0.18); --ring-danger: 0 0 0 3px rgba(200, 29, 65, 0.18); --ring-focus: 0 0 0 3px rgba(79, 126, 255, 0.12); --shadow-drag: 0 6px 20px -4px rgba(13, 18, 31, 0.18); --shadow-menu: 0 12px 28px -6px rgba(13, 18, 31, 0.15); --shadow-modal: 0 24px 48px -16px rgba(13, 18, 31, 0.25); --shadow-badge: 0 2px 6px -1px rgba(79, 126, 255, 0.4); } /* --------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ .design { min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--font-sans); line-height: 1.5; -webkit-font-smoothing: antialiased; } .design *::selection { background: var(--highlight); color: var(--ink); } .design a { color: inherit; text-decoration: none; } .design button { font-family: inherit; cursor: pointer; } /* App shell */ .design .app { display: grid; grid-template-columns: 320px 1fr; min-height: 100vh; } .design .side { background: var(--card); border-right: 1px solid var(--rule); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .design .side-brand { padding: var(--space-6) 22px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; } .design .side-brand img { height: 38px; width: auto; display: block; } .design .side-brand .wordmark { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); } .design .side-scroll { flex: 1; overflow-y: auto; padding: 18px 14px; } /* Sidebar nav */ .design .nav-group { display: flex; flex-direction: column; gap: 3px; } .design .nav-link { display: flex; align-items: center; gap: var(--space-3); padding: 11px 14px; border-radius: 9px; font-size: 15px; color: var(--ink-2); transition: background .12s, color .12s; } .design .nav-link:hover { background: rgba(var(--ink-rgb), 0.04); color: var(--ink); } .design .nav-link.active { background: var(--ink); color: var(--bg); } .design .nav-link .ico { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.8; } .design .nav-link.active .ico { opacity: 1; } .design .nav-link .count { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); } .design .nav-link.active .count { color: rgba(var(--ink-inverse-rgb), 0.6); } .design .nav-link .nav-dot { margin-left: auto; width: 7px; height: 7px; border-radius: var(--radius-round); background: var(--ok); box-shadow: var(--ring-ok); flex-shrink: 0; } .design .nav-link .nav-dot.off { background: var(--ink-3); box-shadow: none; opacity: 0.35; } .design .nav-link .nav-dot.danger { background: var(--danger); box-shadow: var(--ring-danger); } .design .nav-section-head { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; margin: 22px 0 var(--space-2); } .design .nav-section-head .label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .design .nav-section-head .add { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-sm); background: transparent; border: none; color: var(--ink-3); transition: background .12s, color .12s; } .design .nav-section-head .add:hover { background: rgba(var(--ink-rgb), 0.05); color: var(--ink); } .design .project-tree { display: flex; flex-direction: column; gap: 2px; } .design .project-link { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: var(--radius-md); font-size: 14.5px; color: var(--ink-2); transition: background .12s, color .12s; } .design .project-link:hover { background: rgba(var(--ink-rgb), 0.04); color: var(--ink); } .design .project-link.active { background: var(--accent-soft); color: var(--ink); } .design .project-link .dot { width: 6px; height: 6px; border-radius: var(--radius-round); background: var(--ink-3); flex-shrink: 0; } .design .project-link.active .dot { background: var(--accent); } .design .project-link .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .design .project-link .meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); flex-shrink: 0; } .design .project-empty { font-size: 12px; color: var(--ink-3); padding: var(--space-1) var(--space-3); } .design .new-project-form { padding: var(--space-1) 6px 0; } .design .new-project-form .row { display: flex; gap: 6px; margin-top: 6px; } .design .new-project-form input { flex: 1; padding: 6px 9px; border-radius: var(--radius-sm); border: 1px solid var(--rule); background: var(--card); font-size: 12px; color: var(--ink); font-family: inherit; } .design .new-project-form input:focus { outline: none; border-color: var(--accent); } .design .new-project-form .err { color: var(--danger); font-size: 11px; margin-top: var(--space-1); } .design .nav-divider { height: 1px; background: var(--rule); margin: 18px 6px; } .design .side-foot { border-top: 1px solid var(--rule); padding: 18px var(--space-4) 18px; display: flex; align-items: center; gap: var(--space-3); } .design .side-foot .av-wrap { flex-shrink: 0; } .design .side-foot .who { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--space-1); } .design .side-foot .who .email { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .design .side-foot .who .plan { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--ink-3); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.08em; } /* Main */ .design .main { padding: var(--space-9) var(--space-10) 56px; min-width: 0; } /* Global banner zone rendered by the layout above every page's .main. Mirrors .main's top + horizontal padding. When a banner is present we zero out the next .main's top padding via :has() so the banner's own margin-bottom (24px) is the only gap to the page H1. */ .design .page-banners { padding: var(--space-9) var(--space-10) 0; } .design main:has(.page-banners) > .main { padding-top: 0; } /* Footer at the bottom of every page, below the per-page .main content. Matches the brand chrome typography (mono, --ink-3) and uses the same border-top + horizontal padding the page content uses. */ .design .foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-5) var(--space-10) var(--space-7); border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); } .design .foot a:hover { color: var(--ink); } .design .foot .foot-links { display: flex; gap: var(--space-5); } /* Banners (status messages from billing redirects, trial countdown, etc.) */ .design .banner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 14px 18px; border-radius: var(--radius-xl); border: 1px solid var(--rule); background: var(--card); margin-bottom: var(--space-6); } .design .banner.trial { border-color: rgba(var(--accent-rgb), 0.3); background: rgba(var(--accent-rgb), 0.06); } .design .banner.warn { border-color: rgba(var(--warn-rgb), 0.4); background: rgba(var(--warn-rgb), 0.06); } .design .banner.success { border-color: rgba(var(--ok-rgb), 0.4); background: rgba(var(--ok-rgb), 0.06); } .design .banner.danger { border-color: rgba(var(--danger-rgb), 0.3); background: rgba(var(--danger-rgb), 0.06); } .design .banner.expired { border-color: rgba(var(--danger-rgb), 0.4); background: rgba(var(--danger-rgb), 0.07); } .design .banner .b-title { font-size: 13.5px; font-weight: 500; color: var(--ink); } .design .banner .b-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; } .design .banner .b-cta { padding: var(--space-2) 14px; border-radius: var(--radius-md); background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 500; font-family: var(--font-mono); white-space: nowrap; } .design .banner .b-cta:hover { color: var(--bg); } /* Connect nudge */ .design .nudge { margin-top: var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-xl); border: 1px solid rgba(var(--accent-rgb), 0.22); background: rgba(var(--accent-rgb), 0.05); } .design .nudge .l .t { font-size: 14px; font-weight: 500; color: var(--ink); } .design .nudge .l .s { margin-top: var(--space-1); font-size: 12.5px; color: var(--ink-2); } .design .nudge .l .s code { font-family: var(--font-mono); background: var(--card); padding: 1px 6px; border-radius: var(--radius-xs); border: 1px solid var(--rule); font-size: 11.5px; } .design .nudge .b-cta { padding: var(--space-2) 14px; border-radius: var(--radius-md); background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 500; font-family: var(--font-mono); white-space: nowrap; } /* Page head */ .design .head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); padding-bottom: 18px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; } .design .head .eyebrow { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; } .design .head h1 { font-weight: 500; font-size: 28px; letter-spacing: -0.015em; line-height: 1.1; } .design .head p.sub { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); max-width: 480px; } .design .head .actions { display: flex; gap: var(--space-2); align-items: center; } /* Buttons */ .design .btn-ghost { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: transparent; border: 1px solid var(--rule); color: var(--ink-2); font-size: 12.5px; font-family: var(--font-mono); transition: background .12s, color .12s, border-color .12s; cursor: pointer; } .design .btn-ghost:hover { background: var(--card); color: var(--ink); } .design .btn-ghost.danger { color: var(--danger); border-color: rgba(var(--danger-rgb), 0.28); } .design .btn-ghost.danger:hover { background: rgba(var(--danger-rgb), 0.06); } .design .btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 9px var(--space-4); border-radius: var(--radius-md); background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 500; font-family: var(--font-mono); border: none; cursor: pointer; transition: opacity .12s; } .design .btn-primary:hover { color: var(--bg); } .design .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } /* Scope chip */ .design .scope-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; vertical-align: middle; margin-left: var(--space-2); } .design .scope-chip .dot { width: 5px; height: 5px; border-radius: var(--radius-round); background: var(--accent); } /* Sections */ .design .section { margin-top: var(--space-8); } .design .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); } .design .section-head .l { display: flex; align-items: baseline; gap: 10px; } .design .section-head h2 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; } .design .section-head .count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } .design .section-help { margin-top: var(--space-2); font-size: 13px; color: var(--ink-2); line-height: 1.55; max-width: 640px; } /* Permafact panel */ .design .perma { margin-top: var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-2xl); background: var(--card); overflow: hidden; } .design .perma-summary { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rule); background: var(--bg-2); gap: var(--space-3); } .design .perma-summary .meter { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); } .design .perma-summary .meter .dot { width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--ok); } .design .perma-summary .meter .dot.amber { background: var(--warn); } .design .perma-summary .meter .dot.red { background: var(--red); } .design .perma-summary .meter .tokens { color: var(--ink); font-weight: 500; } .design .perma-summary .label-right { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; } .design .perma-list { list-style: none; margin: 0; padding: 0; } .design .perma-row { display: flex; align-items: center; gap: 14px; padding: 11px var(--space-4); border-bottom: 1px solid var(--rule); position: relative; } .design .perma-row:last-child { border-bottom: none; } .design .perma-row .ico { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--bg); display: grid; place-items: center; color: var(--ink-2); flex-shrink: 0; } .design .perma-row .ico.html { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); } .design .perma-row .ico.img { background: rgba(var(--ok-rgb), 0.12); color: var(--ok); } .design .perma-row .ico.font { background: rgba(124, 58, 237, 0.12); color: var(--purple); } .design .perma-row .ico.color { background: rgba(244, 114, 182, 0.12); color: var(--pink); } .design .perma-row .name { flex: 1; min-width: 0; } .design .perma-row .name a, .design .perma-row .name button.name-btn { background: transparent; border: none; padding: 0; text-align: left; color: inherit; font-family: inherit; cursor: pointer; } .design .perma-row .name .t { font-size: 13.5px; color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .design .perma-row .name a:hover .t, .design .perma-row .name button.name-btn:hover .t { text-decoration: underline; } .design .perma-row .name .s { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 2px; letter-spacing: 0.04em; text-transform: uppercase; } .design .perma-row .cost { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); flex-shrink: 0; } .design .perma-row .cost .tag { font-size: 9.5px; color: var(--ink-3); margin-left: var(--space-1); } .design .perma-row .name input.rename-input { width: 100%; padding: var(--space-1) var(--space-2); border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--bg); font-size: 13.5px; color: var(--ink); font-family: inherit; } .design .perma-row .name input.rename-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.15); } .design .perma-row .kebab { width: 26px; height: 26px; border-radius: var(--radius-sm); background: transparent; border: none; color: var(--ink-3); display: grid; place-items: center; transition: background .12s, color .12s; } .design .perma-row .kebab:hover { background: rgba(var(--ink-rgb), 0.05); color: var(--ink); } .design .perma-foot { padding: var(--space-3) var(--space-4); background: var(--bg); border-top: 1px solid var(--rule); } .design .perma-empty { padding: var(--space-7) var(--space-4); text-align: center; font-size: 13px; color: var(--ink-3); } .design .upload-zone { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 14px; border-radius: var(--radius-lg); border: 1.5px dashed var(--rule); background: transparent; color: var(--ink-3); font-size: 12.5px; font-family: var(--font-mono); transition: border-color .12s, color .12s, background .12s; cursor: pointer; width: 100%; } .design .upload-zone:hover { border-color: var(--accent); color: var(--accent); } .design .upload-zone.active { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), 0.05); } .design .upload-zone:disabled { opacity: 0.6; cursor: not-allowed; } .design .upload-err { font-size: 12px; color: var(--danger); margin-top: var(--space-2); padding: 0 var(--space-4); } /* Artifact rows */ .design .arts { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .design .art-row { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border: 1px solid var(--rule); border-radius: var(--radius-xl); background: var(--card); transition: border-color .12s, transform .12s; gap: var(--space-3); } .design .art-row:hover { border-color: var(--ink-3); transform: translateY(-1px); } .design .art-row.menu-open { z-index: 40; } .design .art-row.dragging { opacity: 0.45; } .design .art-row { cursor: grab; } .design .art-row:active { cursor: grabbing; } .design .nav-link.drop-over, .design .project-link.drop-over { background: rgba(var(--accent-rgb), 0.16); outline: 2px dashed var(--accent); outline-offset: -2px; color: var(--ink); } /* Off-screen chip used as the custom drag image for artifact rows. Lives outside .design so it picks up its own font stack — the browser snapshots it at drag-start, so we don't need it to stay rendered. */ .art-drag-chip { position: absolute; top: -1000px; left: -1000px; padding: 6px var(--space-3); background: #ffffff; border: 1px solid rgba(var(--ink-rgb), 0.12); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: #18181b; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow-drag); pointer-events: none; } .design .art-row .lnk { display: flex; align-items: center; justify-content: space-between; flex: 1; min-width: 0; gap: var(--space-3); color: inherit; } .design .art-row .l { min-width: 0; flex: 1; } .design .art-row .l .t-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .design .art-row .l .t-row .title { font-size: 14.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .design .art-row .l .url { margin-top: 3px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .design .art-row .r { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } .design .art-row .when { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } .design .art-row .kebab { width: 28px; height: 28px; border-radius: 7px; background: transparent; border: none; color: var(--ink-3); display: grid; place-items: center; transition: background .12s, color .12s; } .design .art-row .kebab:hover { background: rgba(var(--ink-rgb), 0.05); color: var(--ink); } /* Badges */ .design .badge { font-size: 10.5px; padding: 2px var(--space-2); border-radius: var(--radius-pill); font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; } .design .badge.public { background: rgba(var(--ok-rgb), 0.12); color: var(--ok-deep); } .design .badge.pw { background: rgba(var(--warn-rgb), 0.14); color: var(--warn-deep); } .design .badge.archived { background: rgba(var(--ink-rgb), 0.06); color: var(--ink-2); } .design .badge.agent-waiting { background: rgba(249, 115, 22, 0.14); color: var(--orange-deep); } /* Empty state */ .design .empty { margin-top: var(--space-4); padding: var(--space-10) var(--space-8); border: 1px dashed var(--rule); border-radius: var(--radius-2xl); background: var(--card); text-align: center; } .design .empty h3 { font-size: 16px; font-weight: 500; } .design .empty p { margin-top: 6px; font-size: 13px; color: var(--ink-2); } .design .empty .cmd { display: inline-flex; margin-top: var(--space-4); align-items: center; gap: 10px; padding: var(--space-2) 14px; background: var(--ink); color: var(--ink-inverse); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 12.5px; } .design .empty .cmd .pmt { color: var(--accent); } /* Project header */ .design .proj-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); padding-bottom: 18px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; } .design .proj-head .crumbs { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-2); } .design .proj-head .crumbs a { color: var(--ink-3); } .design .proj-head .crumbs a:hover { color: var(--ink); } .design .proj-head .crumbs .arrow { color: var(--rule); } .design .proj-head .crumbs .here { color: var(--ink); } .design .proj-head h1 { font-weight: 500; font-size: 30px; letter-spacing: -0.02em; line-height: 1.1; } .design .proj-head .stats { display: flex; gap: 18px; margin-top: 10px; flex-wrap: wrap; } .design .proj-head .stats .s { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); } .design .proj-head .stats .s .n { color: var(--ink); font-weight: 500; } .design .proj-head .right { display: flex; gap: var(--space-2); align-items: center; flex-shrink: 0; } /* Tip card */ .design .tip { margin-top: var(--space-5); display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-radius: var(--radius-xl); background: rgba(var(--accent-rgb), 0.06); border: 1px solid rgba(var(--accent-rgb), 0.18); } .design .tip .ico { color: var(--accent); flex-shrink: 0; margin-top: 1px; } .design .tip .body { font-size: 13px; color: var(--ink); line-height: 1.55; } .design .tip .body code { font-family: var(--font-mono); font-size: 12px; background: var(--card); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--rule); } .design .tip .body .muted { color: var(--ink-2); } /* Connection card */ .design .conn-card { margin-top: var(--space-6); padding: var(--space-6) 26px; border-radius: var(--radius-3xl); border: 1px solid var(--rule); background: var(--card); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; } .design .conn-card.live { border-color: rgba(var(--ok-rgb), 0.4); background: linear-gradient(180deg, rgba(var(--ok-rgb), 0.06), rgba(var(--ok-rgb), 0.01)); } .design .conn-card .l { display: flex; align-items: center; gap: var(--space-4); } .design .conn-card .pulse-wrap { position: relative; width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; } .design .conn-card .pulse { width: 12px; height: 12px; border-radius: var(--radius-round); background: var(--ok); position: relative; } .design .conn-card.idle .pulse { background: var(--ink-3); opacity: 0.5; } .design .conn-card.live .pulse::before, .design .conn-card.live .pulse::after { content: ''; position: absolute; inset: -10px; border-radius: var(--radius-round); border: 2px solid rgba(var(--ok-rgb), 0.4); animation: conn-pulse 2.4s infinite ease-out; } .design .conn-card.live .pulse::after { animation-delay: 1.2s; } @keyframes conn-pulse { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } } .design .conn-card .text .t { font-size: 17px; font-weight: 500; color: var(--ink); } .design .conn-card .text .s { font-size: 13px; color: var(--ink-2); margin-top: var(--space-1); font-family: var(--font-mono); } .design .conn-card .text .s .live-dot { color: var(--ok); } /* Install card (dark) */ .design .install-card { margin-top: var(--space-4); padding: var(--space-7); border-radius: var(--radius-3xl); background: var(--ink); color: var(--ink-inverse); position: relative; overflow: hidden; } .design .install-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 300px at 80% 20%, rgba(var(--accent-rgb), 0.18), transparent), radial-gradient(400px 200px at 10% 90%, rgba(168, 197, 255, 0.08), transparent); pointer-events: none; } .design .install-card .step-label { font-family: var(--font-mono); font-size: 10.5px; color: rgba(var(--ink-inverse-rgb), 0.5); text-transform: uppercase; letter-spacing: 0.08em; position: relative; } .design .install-card .step-help { margin-top: var(--space-2); font-size: 13.5px; color: rgba(var(--ink-inverse-rgb), 0.75); position: relative; } .design .install-card .cmd-line { margin-top: var(--space-4); display: inline-flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); font-family: var(--font-mono); font-size: 15px; position: relative; max-width: 100%; } .design .install-card .cmd-line .pmt { color: var(--accent); font-size: 16px; line-height: 1; } .design .install-card .cmd-line .copy { margin-left: var(--space-2); background: rgba(255, 255, 255, 0.08); border: none; color: rgba(var(--ink-inverse-rgb), 0.85); font: inherit; font-size: 10px; padding: 6px var(--space-3); border-radius: var(--radius-sm); cursor: pointer; text-transform: uppercase; letter-spacing: 0.08em; transition: background .15s; } .design .install-card .cmd-line .copy:hover { background: rgba(255, 255, 255, 0.18); } .design .install-card .cmd-line .copy.copied { background: rgba(var(--ok-rgb), 0.4); } /* Prompts */ .design .prompts { margin-top: 14px; display: flex; flex-direction: column; gap: var(--space-2); } .design .prompt { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--rule); font-size: 13.5px; color: var(--ink); display: flex; align-items: center; gap: var(--space-3); } .design .prompt::before { content: '\201C'; font-family: var(--font-sans); font-size: 28px; color: var(--accent); line-height: 0.5; transform: translateY(6px); flex-shrink: 0; } .design .prompt .you { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-left: auto; flex-shrink: 0; } /* Plan / billing */ .design .plan-current { margin-top: var(--space-6); padding: var(--space-6) 26px; border-radius: var(--radius-3xl); border: 1px solid var(--rule); background: var(--card); } .design .plan-current.trial { border-color: rgba(var(--accent-rgb), 0.3); background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.06), rgba(var(--accent-rgb), 0.01)); } .design .plan-current.expired { border-color: rgba(var(--danger-rgb), 0.25); background: linear-gradient(180deg, rgba(var(--danger-rgb), 0.05), rgba(var(--danger-rgb), 0.01)); } .design .plan-current.active { border-color: rgba(var(--ok-rgb), 0.3); background: linear-gradient(180deg, rgba(var(--ok-rgb), 0.05), rgba(var(--ok-rgb), 0.01)); } .design .plan-current .l { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; } .design .plan-current .row { margin-top: var(--space-2); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .design .plan-current .row .name { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; } .design .plan-current .row .name h2 { font-size: 28px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); line-height: 1.1; } .design .plan-current .row .name .sub { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); } .design .plan-current .row .actions { display: flex; gap: var(--space-2); flex-shrink: 0; } .design .plan-current .progress { margin-top: 18px; } .design .plan-current .progress .bar { width: 100%; height: 6px; border-radius: var(--radius-pill); background: var(--rule); overflow: hidden; } .design .plan-current .progress .bar .fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width .3s ease; } .design .plan-current.expired .progress .bar .fill { background: var(--danger); } .design .plan-current .progress .meta { display: flex; justify-content: space-between; margin-top: var(--space-2); font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } .design .plan-grid { margin-top: var(--space-4); display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .design .plan { padding: 26px; border: 1px solid var(--rule); border-radius: var(--radius-2xl); background: var(--card); display: flex; flex-direction: column; position: relative; } .design .plan.featured { border-color: var(--ink); } .design .plan .badge-lim { position: absolute; top: -8px; right: 16px; font-family: var(--font-mono); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--accent) 0%, #88a8ff 50%, var(--accent) 100%); color: white; box-shadow: var(--shadow-badge); } .design .plan .name { font-size: 14px; font-weight: 600; color: var(--ink); } .design .plan .price { margin-top: 14px; display: flex; align-items: baseline; gap: var(--space-2); } .design .plan .price .n { font-size: 36px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1; } .design .plan .price .p { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); } .design .plan .feats { list-style: none; margin: 22px 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .design .plan .feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); } .design .plan .feats li::before { content: ''; flex-shrink: 0; width: 5px; height: 5px; border-radius: var(--radius-round); background: var(--ink-3); margin-top: var(--space-2); } .design .plan .cta { margin-top: auto; text-align: center; padding: 11px; border-radius: var(--radius-lg); font-size: 13px; font-weight: 500; background: var(--ink); color: var(--bg); border: none; cursor: pointer; width: 100%; font-family: var(--font-sans); transition: opacity .12s; } .design .plan .cta:hover { color: var(--bg); } .design .plan .cta:disabled { opacity: 0.6; cursor: not-allowed; } .design .plan .err { color: var(--danger); font-size: 11.5px; margin-top: var(--space-2); text-align: center; } /* Filter pills */ .design .filters { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); flex-wrap: wrap; } .design .filters .label { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; margin-right: var(--space-1); } .design .pill { padding: 5px var(--space-3); border-radius: var(--radius-pill); font-size: 12px; background: transparent; border: 1px solid var(--rule); color: var(--ink-2); font-family: var(--font-sans); transition: background .12s, color .12s, border-color .12s; cursor: pointer; text-decoration: none; display: inline-block; } .design .pill.active { background: var(--ink); border-color: var(--ink); color: var(--bg); } .design .pill:not(.active):hover { background: var(--card); color: var(--ink); } /* Locked-out state */ .design .locked { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: var(--space-10); } .design .locked .inner { max-width: 440px; text-align: center; } .design .locked .inner h1 { font-size: 28px; font-weight: 500; color: var(--ink); letter-spacing: -0.015em; } .design .locked .inner p { margin-top: var(--space-3); font-size: 14px; color: var(--ink-2); } .design .locked .inner .actions { margin-top: var(--space-6); display: flex; gap: var(--space-2); justify-content: center; } /* Modal — unscoped so it works from portals/overlays anywhere on the page */ .modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(var(--ink-rgb), 0.4); padding: var(--space-4); } .modal-card { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-2xl); padding: var(--space-6); box-shadow: var(--shadow-modal); font-family: var(--font-sans); color: var(--ink); } .modal-card h2 { font-size: 16px; font-weight: 500; } .modal-card .actions { margin-top: var(--space-5); display: flex; gap: var(--space-2); justify-content: flex-end; } .modal-card .err { color: var(--danger); font-size: 12px; margin-top: var(--space-2); } /* Text input */ .input { display: block; width: 100%; padding: 9px var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--rule); background: var(--bg); font-size: 14px; font-family: var(--font-sans); color: var(--ink); } .input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); } /* Dropdown menu */ .menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; width: 192px; border-radius: var(--radius-lg); border: 1px solid var(--rule); background: var(--card); padding: 6px; box-shadow: var(--shadow-menu); } .menu button, .menu a { display: block; width: 100%; padding: 7px 10px; text-align: left; font-size: 13px; color: var(--ink-2); border: none; background: transparent; cursor: pointer; border-radius: var(--radius-sm); font-family: var(--font-sans); } .menu button:hover, .menu a:hover { background: rgba(var(--ink-rgb), 0.05); color: var(--ink); } .menu button.danger { color: var(--danger); } .menu button.danger:hover { background: rgba(var(--danger-rgb), 0.06); color: var(--danger); } .menu hr { border: 0; height: 1px; background: var(--rule); margin: var(--space-1) 0; } /* Your apps (port3000 dashboard boxes) */ .p3-grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; } .p3-app { display: flex; align-items: stretch; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius-xl); background: var(--card); transition: border-color .12s; } .p3-app:hover { border-color: var(--ink-3); } .p3-app .p3-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; } .p3-app .t-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .p3-app .title { font-size: 14.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p3-app .title:hover { text-decoration: underline; } .p3-app .state-dot { width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--ok); flex-shrink: 0; } .p3-app .state-dot.amber { background: var(--warn); } .p3-app .state-dot.red { background: #ef4444; } .p3-app .meta { display: flex; gap: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } .badge.p3-state-paid { background: rgba(16,185,129,0.12); color: #047857; } .badge.p3-state-trial { background: rgba(245,158,11,0.14); color: #92400e; } .badge.p3-state-grace { background: rgba(245,158,11,0.14); color: #92400e; } .badge.p3-state-expired { background: rgba(200,29,65,0.12); color: var(--danger); } .p3-app .acts { margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .p3-app .gift-link { padding: 5px 10px; border-radius: 7px; background: transparent; border: 1px solid var(--rule); color: var(--ink-2); font-size: 11.5px; font-family: var(--font-mono); transition: background .12s, color .12s; } .p3-app .gift-link:hover { background: var(--bg-2); color: var(--ink); } /* Edit is the primary card affordance — same footprint as gift-link, inverted ink. */ .p3-app .edit-link { background: var(--ink); border-color: var(--ink); color: var(--bg); } .p3-app .edit-link:hover { background: var(--ink); color: var(--bg); opacity: 0.85; } .p3-app .qr { margin: 0; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; } .p3-app .qr img { width: 96px; height: 96px; border-radius: var(--radius-md); border: 1px solid var(--rule); background: #fff; image-rendering: pixelated; } .p3-app .qr figcaption { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; } /* Editor chrome (/edit/[slug]: slim bar over a full-height staged iframe) */ .editor { display: flex; flex-direction: column; height: 100vh; } .editor-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--rule); flex-wrap: wrap; } .editor-bar .title { font-size: 14.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Same dot scale + colors as the app cards */ .editor-bar .state-dot { width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--ok); flex-shrink: 0; } .editor-bar .state-dot.amber { background: var(--warn); } .editor-bar .state-dot.red { background: #ef4444; } .editor-pages { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; padding: 2px 0; } .editor-pages .pill { flex-shrink: 0; } .editor-frame { flex: 1; width: 100%; border: none; background: #fff; } /* Responsive */ @media (max-width: 960px) { .design .app { grid-template-columns: 1fr; } .design .side { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--rule); } .design .main { padding: var(--space-6) var(--space-5) var(--space-8); } .design .conn-card { flex-direction: column; align-items: flex-start; } .design .plan-grid { grid-template-columns: 1fr; } }