/* ───────────────────────────────────────────────────────────────────────── UDefine Mother-Hub — visual system Tokens lifted from _design/index.html. Light is default; the data-theme attribute on swaps the variable set. The peach --accent is the global app accent (buttons, focus rings); a hub's brand_color is per-hub real data and not the same thing. ───────────────────────────────────────────────────────────────────────── */ :root[data-theme="light"] { --bg: #F4F2EC; --bg-soft: #ECEAE4; --paper: #FFFFFF; --paper-2: #FAF8F2; --ink: #0E0E0C; --ink-2: #3F3E3A; --ink-3: #76746E; --ink-4: #BAB7AE; --ink-5: #DCD9CF; --rule: rgba(14,14,12,0.10); --rule-hair:rgba(14,14,12,0.06); --ring: rgba(14,14,12,0.18); --good: #1E7A3F; --bad: #B3361D; --warn: #B45F0F; --paper-elev: 0 1px 0 rgba(14,14,12,0.04), 0 8px 24px rgba(14,14,12,0.04); } :root[data-theme="dark"] { --bg: #0B0B0A; --bg-soft: #131311; --paper: #161614; --paper-2: #1C1C1A; --ink: #F4F2EC; --ink-2: #BFBCB2; --ink-3: #84827A; --ink-4: #4F4D47; --ink-5: #2A2926; --rule: rgba(244,242,236,0.10); --rule-hair:rgba(244,242,236,0.05); --ring: rgba(244,242,236,0.18); --good: #6CD089; --bad: #EB6A52; --warn: #E8A24A; --paper-elev: 0 1px 0 rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.35); } :root { --accent: #FFD580; --accent-ink: #1E140A; --accent-soft: rgba(255,213,128,0.18); --accent-glow: rgba(255,213,128,0.45); --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* ── Base resets ────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); color: var(--ink); } body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; font-feature-settings: "ss01", "ss03", "cv11"; transition: background-color 200ms ease, color 200ms ease; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } input, textarea, select { font-family: inherit; color: inherit; } ::selection { background: var(--accent); color: var(--accent-ink); } /* ── Type utilities ─────────────────────────────────────────────────────── */ .mono { font-family: var(--font-mono); font-feature-settings: "zero", "ss02"; font-variant-numeric: tabular-nums; } .display { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.035em; line-height: 0.94; } .label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--ink-3); font-weight: 500; } .muted { color: var(--ink-3); } /* ── Layout ─────────────────────────────────────────────────────────────── */ .app { min-height: 100vh; display: flex; flex-direction: column; } .main { flex: 1; padding: 48px 40px 80px; max-width: 1280px; width: 100%; margin: 0 auto; } /* ── Top bar ────────────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; border-bottom: 1px solid var(--rule); background: var(--bg); position: sticky; top: 0; z-index: 10; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; border: 0; background: transparent; padding: 0; cursor: pointer; } .brand .brand-sub { color: var(--ink-3); font-weight: 400; } .brand .glyph { display: block; } .topbar-nav { display: flex; align-items: center; gap: 24px; } .nav-link { border: 0; background: transparent; padding: 0; cursor: pointer; font-size: 14px; font-weight: 400; color: var(--ink-2); font-family: inherit; position: relative; letter-spacing: -0.005em; display: inline-flex; align-items: baseline; gap: 6px; } .nav-link:hover { color: var(--ink); } .nav-link.active { color: var(--ink); font-weight: 600; } .nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--accent); border-radius: 2px; } .nav-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } .nav-divider { width: 1px; height: 16px; background: var(--rule); margin: 0 4px; } .user-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); } .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; } .linklike { border: 0; background: transparent; padding: 0; cursor: pointer; font-size: 13px; color: var(--ink-3); font-family: inherit; } .linklike:hover { color: var(--ink); } .inline-form { display: inline; margin: 0; } /* ── Theme toggle ───────────────────────────────────────────────────────── */ .theme-toggle { appearance: none; border: 1px solid var(--ink-5); background: var(--paper); color: var(--ink-2); width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: border-color 120ms, background 120ms, color 120ms; } .theme-toggle:hover { border-color: var(--ink); color: var(--ink); } .theme-toggle svg { display: block; } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ── Buttons ────────────────────────────────────────────────────────────── */ .btn { appearance: none; cursor: pointer; font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.005em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; white-space: nowrap; font-size: 14px; padding: 10px 18px; border-radius: 999px; transition: transform 120ms, background 120ms, color 120ms, box-shadow 120ms, border-color 120ms; text-decoration: none; } .btn-sm { font-size: 13px; padding: 7px 14px; } .btn-lg { font-size: 15px; padding: 13px 22px; } .btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); } .btn-primary:hover { transform: translateY(-1px); } .btn-accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .btn-accent:hover { transform: translateY(-1px); box-shadow: 0 6px 24px var(--accent-glow); } .btn-outline { background: transparent; color: var(--ink); border-color: var(--ink-4); } .btn-outline:hover { border-color: var(--ink); background: var(--bg-soft); } .btn-ghost { background: transparent; color: var(--ink-2); border-color: transparent; } .btn-ghost:hover { background: var(--bg-soft); color: var(--ink); } .btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* ── Inputs ─────────────────────────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: 8px; } .field-hint { font-size: 12px; color: var(--ink-3); } .field-hint .mono { font-family: var(--font-mono); } .input-wrap { display: flex; align-items: baseline; gap: 4px; background: var(--paper); border: 1px solid var(--ink-5); border-radius: 12px; padding: 10px 14px; transition: border-color 120ms, box-shadow 120ms; } .input-wrap:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); } .input-wrap .prefix { color: var(--ink-3); font-family: var(--font-mono); font-size: 13px; white-space: nowrap; } .input-wrap.input-lg .prefix { font-size: 16px; } .input-wrap input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 15px; font-weight: 500; color: var(--ink); padding: 0; } .input-wrap.input-lg input { font-size: 20px; font-family: var(--font-mono); letter-spacing: -0.02em; } textarea.field-area { resize: vertical; min-height: 64px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink-5); border-radius: 12px; font-size: 15px; padding: 10px 14px; outline: none; font-family: inherit; transition: border-color 120ms, box-shadow 120ms; } textarea.field-area:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); } textarea.field-area.mono { font-family: var(--font-mono); font-size: 13px; } .color-row { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--ink-5); border-radius: 12px; padding: 8px 14px; } .color-row input[type="color"] { appearance: none; -webkit-appearance: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--ink-5); border-radius: 999px; background: transparent; cursor: pointer; } .color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 999px; } .color-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 999px; } .color-row .hex { font-family: var(--font-mono); font-size: 14px; color: var(--ink-2); border: 0; outline: none; background: transparent; width: 90px; padding: 0; } /* ── Page header ────────────────────────────────────────────────────────── */ .page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; gap: 24px; flex-wrap: wrap; } .page-title { font-size: clamp(64px, 9vw, 128px); margin: 0; display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; } .page-title-count { font-family: var(--font-mono); font-size: 18px; color: var(--ink-3); font-weight: 400; letter-spacing: 0; } /* ── Hubs grid ──────────────────────────────────────────────────────────── */ .meta-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); } .meta-bar .mono { font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; } .hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; padding-top: 24px; } .hub-card { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--rule); border-radius: 16px; background: var(--paper-2); transition: background 160ms, border-color 160ms, transform 160ms; min-height: 200px; color: inherit; position: relative; } .hub-card:hover { background: var(--paper); border-color: var(--ink-5); transform: translateY(-2px); } /* Stretched primary link covers the whole card surface. The repo link in the footer sits above it with z-index so it remains clickable. */ .hub-card-link { position: absolute; inset: 0; border-radius: inherit; z-index: 1; } .hub-card > *:not(.hub-card-link) { position: relative; z-index: 2; } .hub-card-foot a:hover { color: var(--ink); } .hub-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; } .hub-card-index { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); font-weight: 500; } .hub-card-name { font-family: var(--font-sans); font-weight: 600; font-size: 22px; line-height: 1.15; margin: 0 0 8px; letter-spacing: -0.025em; color: var(--ink); } .hub-card-desc { margin: 0 0 16px; color: var(--ink-2); font-size: 14px; line-height: 1.45; } .hub-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--rule-hair); font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } .hub-card-foot a { color: var(--ink-3); } .hub-card-foot a:hover { color: var(--ink); } .hub-card .arrow { font-family: var(--font-mono); color: var(--ink-3); opacity: 0.4; transition: opacity 160ms; } .hub-card:hover .arrow { opacity: 1; } /* Brand-color swatch (hub data, not the app accent) */ .brand-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--rule); vertical-align: middle; } .brand-swatch.lg { width: 22px; height: 22px; } /* ── Empty state ────────────────────────────────────────────────────────── */ .empty-state { padding: 80px 0 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } @media (max-width: 800px) { .empty-state { grid-template-columns: 1fr; } } .empty-state .big-num { font-family: var(--font-mono); font-size: 72px; font-weight: 500; color: var(--ink-4); line-height: 1; margin-bottom: 16px; letter-spacing: -0.03em; } .empty-state .big-num .slash { color: var(--ink-3); } .empty-state h2 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.035em; line-height: 0.94; font-size: 56px; margin: 0 0 18px; color: var(--ink); } .empty-state p { font-size: 16px; color: var(--ink-2); max-width: 460px; line-height: 1.5; margin-bottom: 32px; } /* ── Modal ──────────────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(11,11,10,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: mh-fade-in 200ms ease; } .modal-overlay[hidden] { display: none; } .modal-card { background: var(--bg); border: 1px solid var(--rule); border-radius: 20px; width: 100%; max-width: 640px; padding: 36px 44px 32px; position: relative; box-shadow: 0 24px 64px rgba(0,0,0,0.25); animation: mh-pop-in 240ms cubic-bezier(.2,.7,.2,1); max-height: calc(100vh - 48px); overflow-y: auto; } .modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; } .modal-title { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.035em; line-height: 0.94; font-size: 42px; margin: 10px 0 0; color: var(--ink); } .modal-close { border: 1px solid var(--ink-5); background: transparent; cursor: pointer; padding: 0; color: var(--ink-3); font-size: 18px; line-height: 1; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .modal-close:hover { color: var(--ink); border-color: var(--ink); } .modal-fields { display: flex; flex-direction: column; gap: 22px; } .modal-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--rule); flex-wrap: wrap; gap: 12px; } .modal-foot .hint { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } @keyframes mh-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes mh-pop-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } } /* ── Drop zone (visual only — wired to nothing) ─────────────────────────── */ .dropzone { border: 1.5px dashed var(--ink-5); border-radius: 14px; padding: 18px 16px; display: flex; align-items: center; gap: 14px; background: var(--paper-2); color: var(--ink-3); transition: border-color 120ms, background 120ms, color 120ms; } .dropzone:hover, .dropzone.drag { border-color: var(--ink); color: var(--ink); background: var(--paper); } .dropzone .dz-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--rule); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); } .dropzone .dz-text { display: flex; flex-direction: column; gap: 2px; } .dropzone .dz-title { font-size: 14px; color: var(--ink); font-weight: 500; } .dropzone .dz-sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } /* ── Login (split layout) ───────────────────────────────────────────────── */ .login-split { flex: 1; display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; } @media (max-width: 900px) { .login-split { grid-template-columns: 1fr; } .login-left { min-height: 380px; } } .login-left { background: #0B0B0A; color: #F4F2EC; padding: 36px 56px 40px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .login-left .ll-brand { display: flex; align-items: center; gap: 10px; color: #F4F2EC; position: relative; z-index: 2; font-weight: 600; font-size: 16px; letter-spacing: -0.015em; } .login-left .ll-brand .sub { color: #84827A; font-weight: 400; } .login-left .ll-body { position: relative; z-index: 2; } .login-left .ll-eyebrow { color: #84827A; margin-bottom: 18px; } .login-left .headline { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.035em; line-height: 0.94; font-size: clamp(54px, 6.4vw, 96px); margin: 0 0 28px; color: #F4F2EC; } .login-left .headline .accent-word { color: var(--accent); } .login-left .sub-line { color: #BFBCB2; max-width: 460px; font-size: 16px; line-height: 1.55; margin: 0; } .login-left .footchrome { font-family: var(--font-mono); display: flex; justify-content: space-between; font-size: 11px; color: #84827A; letter-spacing: 0.06em; position: relative; z-index: 2; } .login-left .glow { position: absolute; right: -200px; top: -200px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 65%); filter: blur(8px); pointer-events: none; z-index: 1; } .login-left .grid-pattern { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.06; pointer-events: none; } .login-right { display: flex; align-items: center; justify-content: center; padding: 40px 56px; background: var(--bg); position: relative; } .login-right .right-theme { position: absolute; top: 28px; right: 40px; } .login-form { width: 100%; max-width: 400px; } .login-form .greet { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.035em; line-height: 0.94; font-size: 56px; margin: 0 0 8px; color: var(--ink); } .login-form .sub { color: var(--ink-3); margin: 0 0 40px; font-size: 15px; } .login-form .row { display: flex; align-items: center; justify-content: flex-end; margin-top: 32px; gap: 12px; } /* ── Detail page ────────────────────────────────────────────────────────── */ .detail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; } .detail-head .title-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .detail-head h1 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.035em; line-height: 0.94; font-size: clamp(48px, 7vw, 96px); margin: 0; color: var(--ink); } .detail-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; } @media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } } .panel { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 16px; padding: 24px 24px 22px; } .panel h2 { font-family: var(--font-sans); font-weight: 600; font-size: 18px; letter-spacing: -0.015em; margin: 0 0 18px; color: var(--ink); } dl.kv { display: grid; grid-template-columns: 120px 1fr; gap: 10px 16px; margin: 0; } dl.kv dt { color: var(--ink-3); font-size: 12px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; padding-top: 2px; } dl.kv dd { margin: 0; color: var(--ink); font-size: 14px; word-break: break-word; } code, .code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-soft); padding: 1px 6px; border-radius: 4px; color: var(--ink-2); } .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; } /* ── Flash messages ─────────────────────────────────────────────────────── */ ul.flashes { list-style: none; padding: 0; margin: 0 0 16px; } .flash { padding: 10px 14px; border-radius: 10px; margin-bottom: 8px; font-size: 14px; border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink-2); } .flash-success { background: color-mix(in srgb, var(--good) 12%, var(--paper-2)); color: var(--good); border-color: color-mix(in srgb, var(--good) 25%, transparent); } .flash-error { background: color-mix(in srgb, var(--bad) 12%, var(--paper-2)); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 25%, transparent); } /* ── Repo-state panels (inbox / builds / project) ───────────────────────── */ .rs-list { display: flex; flex-direction: column; gap: 9px; } .rs-row { display: flex; align-items: baseline; gap: 10px; font-size: 14px; flex-wrap: wrap; } .rs-row a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink-5); } .rs-row a:hover { border-bottom-color: var(--ink); } .rs-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } .rs-error { font-size: 13px; color: var(--ink-3); } .rs-error a { color: var(--ink-3); } .rs-error a:hover { color: var(--ink); } .rs-details summary { cursor: pointer; font-size: 13px; color: var(--ink-2); font-family: var(--font-mono); } .rs-details summary:hover { color: var(--ink); } .rs-pre { background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 10px; padding: 14px; margin: 10px 0 0; max-height: 360px; overflow: auto; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--ink-2); } /* ── Design-zip dropzone ────────────────────────────────────────────────── */ .rs-dropzone { display: flex; flex-direction: column; gap: 8px; border: 1px dashed var(--ink-5); border-radius: 12px; padding: 14px; transition: border-color 0.12s ease, background 0.12s ease; } .rs-dropzone.rs-dragover { border-color: var(--accent); background: var(--accent-soft); } .rs-dropzone input[type="file"] { font-size: 13px; color: var(--ink-2); } .rs-dropzone-hint { font-size: 12px; } .rs-dropzone-file { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); } .rs-dropzone-msg { font-size: 12px; color: var(--bad); }