/* machen. — si.next team kanban. Design system ported from the claude.design mockup (Juli 2026): two full themes (light/dark via [data-theme] on ), every color derived from tokens, accent computed with color-mix — reskin = swap --accent (+ a font) and everything follows. */ /* --- tokens ----------------------------------------------------------------- */ :root { --accent: #c4298a; --berry: var(--accent); --berry-dk: color-mix(in srgb, var(--accent), #000 20%); --berry-lt: color-mix(in srgb, var(--accent) 9%, transparent); --berry-md: color-mix(in srgb, var(--accent) 20%, transparent); --berry-glow: color-mix(in srgb, var(--accent) 34%, transparent); --stamp: var(--accent); --bg: #faf8f9; --topbar: #141216; --surface: #f1edf0; --card: #ffffff; --border: #e7e2e6; --border-soft: #eee9ed; --ink: #151316; --mid: #575257; --muted: #8b858b; --danger: #c92a2a; --overlay: rgba(20, 18, 22, 0.5); --shadow-1: 0 1px 2px rgba(20, 18, 22, 0.05), 0 2px 8px rgba(20, 18, 22, 0.05); --shadow-hover: 0 14px 32px -14px rgba(20, 18, 22, 0.28); --shadow-modal: 0 34px 84px -20px rgba(20, 18, 22, 0.5); --bg-off: var(--surface); /* legacy alias */ --ease: cubic-bezier(0.16, 1, 0.3, 1); } [data-theme="dark"] { --berry-lt: color-mix(in srgb, var(--accent) 18%, transparent); --berry-md: color-mix(in srgb, var(--accent) 26%, transparent); --bg: #0d0c0f; --topbar: #08070a; --surface: #161519; --card: #1e1c22; --border: rgba(255, 255, 255, 0.1); --border-soft: rgba(255, 255, 255, 0.055); --ink: #f3eff2; --mid: #a49ea6; --muted: #6e6870; --danger: #ff6b6b; --overlay: rgba(0, 0, 0, 0.62); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 12px rgba(0, 0, 0, 0.4); --shadow-hover: 0 18px 42px -16px rgba(0, 0, 0, 0.72); --shadow-modal: 0 40px 90px -20px rgba(0, 0, 0, 0.78); } /* --- base ------------------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { font-family: "Jost", -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--bg); color: var(--mid); font-size: 15px; } #root { height: 100vh; display: flex; flex-direction: column; } a { color: var(--berry); text-decoration: none; } a:hover { color: var(--berry-dk); } ::selection { background: var(--berry-md); } h1, h2, h3 { color: var(--ink); } .dot { color: var(--berry); } @keyframes ovl { from { opacity: 0 } to { opacity: 1 } } @keyframes mdl { from { opacity: 0; transform: translateY(14px) scale(.985) } to { opacity: 1; transform: none } } @keyframes scr { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } } @keyframes cardIn { from { opacity: 0; transform: translateY(-6px) scale(.98) } to { opacity: 1; transform: none } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* tracked-uppercase section label with trailing line — the brand signature */ .label-line { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--berry); margin-bottom: 14px; } .label-line::after { content: ""; flex: 1; height: 1px; background: var(--border); } .label-line.quiet { color: var(--muted); } /* --- buttons & inputs ------------------------------------------------------- */ button { font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; border-radius: 4px; padding: 9px 15px; letter-spacing: 0.2px; line-height: 1; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: all 0.15s var(--ease); border: 1px solid var(--border); background: var(--card); color: var(--ink); } button:hover { border-color: var(--mid); } button:disabled { opacity: 0.55; cursor: default; } button.primary { border-color: var(--berry); background: var(--berry); color: #fff; } button.primary:hover { background: var(--berry-dk); border-color: var(--berry-dk); box-shadow: 0 8px 22px var(--berry-glow); } button.ghost { border-color: transparent; background: transparent; color: var(--muted); } button.ghost:hover { background: var(--surface); color: var(--ink); border-color: transparent; } button.danger { border-color: transparent; background: transparent; color: var(--danger); } button.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: transparent; } button.link { background: none; border: none; color: var(--berry); padding: 0; font-weight: 600; border-radius: 0; } button.link:hover { text-decoration: underline; box-shadow: none; } input, textarea, select { font: inherit; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--card); color: var(--ink); font-size: 14px; } input:focus, textarea:focus, select:focus { border-color: var(--berry); box-shadow: 0 0 0 3px var(--berry-lt); outline: none; } select { width: auto; } .field { margin-bottom: 14px; } .field label, label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .field input, .field textarea, .field select { width: 100%; } .input-row { display: flex; gap: 8px; } .input-row input { flex: 1; } .error { color: var(--danger); font-size: 13px; margin: 6px 0; } .spinner { padding: 40px; text-align: center; color: var(--muted); } .empty { text-align: center; color: var(--muted); padding: 40px; } .meta { color: var(--muted); font-size: 12px; } /* --- topbar ----------------------------------------------------------------- */ .topbar { display: flex; align-items: center; gap: 11px; padding: 12px 20px; background: var(--topbar); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); z-index: 5; } .topbar .brand { font-weight: 800; font-size: 21px; letter-spacing: -0.9px; color: #fff; } .topbar .tb-divider { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.14); margin: 0 4px; } .topbar .tb-label { font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); } .topbar .spacer { flex: 1; } .topbar button { border-color: transparent; background: transparent; color: rgba(255, 255, 255, 0.72); } .topbar button:hover { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: transparent; } .topbar button.outline { border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.85); } .topbar button.outline:hover { border-color: rgba(255, 255, 255, 0.5); color: #fff; background: transparent; } .topbar button.primary { background: var(--berry); border-color: var(--berry); color: #fff; } .topbar .avatar { width: 20px; height: 20px; font-size: 10px; background: var(--berry); color: #fff; } /* --- subbar (board header) -------------------------------------------------- */ .subbar { display: flex; align-items: center; gap: 13px; padding: 13px 20px; background: var(--card); border-bottom: 1px solid var(--border); } .subbar strong { color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: -0.3px; } .subbar .spacer { flex: 1; } .role-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: var(--surface); color: var(--muted); border: 1px solid var(--border); } .role-badge.owner { background: var(--berry); color: #fff; border-color: transparent; } .role-badge.editor { background: var(--berry-lt); color: var(--berry); border-color: transparent; } .role-badge.archived { background: var(--ink); color: var(--bg); border-color: transparent; } /* segmented control (board/whiteboard switch) */ .seg-group { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 3px; width: fit-content; } .seg-group button { border: 1px solid transparent; border-radius: 4px; padding: 6px 13px; background: transparent; color: var(--mid); font-size: 13px; text-transform: lowercase; } .seg-group button:hover { color: var(--ink); border-color: transparent; } .seg-group button.primary { background: var(--berry); color: #fff; border-color: transparent; box-shadow: none; } /* --- auth ------------------------------------------------------------------- */ .auth-wrap { height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--topbar); position: relative; animation: scr 0.4s var(--ease); } .auth-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 38%; background: radial-gradient(120% 140% at 80% 0%, var(--berry-glow), transparent 60%); opacity: 0.5; pointer-events: none; } .auth-theme { position: absolute; top: 20px; right: 20px; } .auth-theme button { border-color: transparent; background: transparent; color: rgba(255, 255, 255, 0.72); } .auth-theme button:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .card-panel { position: relative; width: 100%; max-width: 392px; background: var(--card); border-radius: 12px; box-shadow: var(--shadow-modal); overflow: hidden; padding: 0; } .card-panel .stamp { height: 4px; background: var(--stamp); } .card-panel .inner { padding: 40px 36px 30px; } .card-panel h1 { margin: 0; font-size: 44px; font-weight: 800; letter-spacing: -2px; line-height: 1; } .card-panel .claim { margin: 12px 0 30px; font-size: 15px; color: var(--mid); letter-spacing: 0.2px; } .card-panel p.sub { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; } .card-panel .wide { width: 100%; justify-content: center; padding: 12px 15px; font-size: 15px; } .card-panel .foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 11px; letter-spacing: 0.4px; color: var(--muted); text-align: center; } /* --- pages (board list, verwaltung) ----------------------------------------- */ .content { flex: 1; overflow: auto; padding: 52px 24px; animation: scr 0.35s var(--ease); } .content-inner { max-width: 1040px; margin: 0 auto; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 34px; } .page-head .label-line { margin-bottom: 10px; } .page-head .label-line::after { display: none; } .page-head h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -1.4px; line-height: 1; } .board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 18px; } .board-tile { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow-1); padding: 24px 20px 20px; cursor: pointer; overflow: hidden; transition: transform 0.16s var(--ease), box-shadow 0.16s, border-color 0.16s; } .board-tile::before { content: ""; position: absolute; top: 0; left: 24px; width: 36px; height: 3px; background: var(--stamp); } .board-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .board-tile h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.5px; } .board-tile .meta { font-size: 12.5px; color: var(--muted); letter-spacing: 0.2px; } .board-tile .tile-foot { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; } .board-tile .count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .avatar-stack { display: flex; } .avatar-stack .avatar { width: 22px; height: 22px; font-size: 10px; border: 2px solid var(--card); margin-left: -6px; } .avatar-stack .avatar:first-child { margin-left: 0; } .board-tile.new { display: grid; place-items: center; background: transparent; border: 1.5px dashed var(--border); box-shadow: none; color: var(--muted); font-weight: 600; font-size: 14px; min-height: 150px; transition: border-color 0.16s, color 0.16s; } .board-tile.new::before { display: none; } .board-tile.new:hover { border-color: var(--berry); color: var(--berry); transform: none; box-shadow: none; } .board-tile.archived { background: var(--surface); border-color: var(--border-soft); box-shadow: none; opacity: 0.72; transition: opacity 0.16s; } .board-tile.archived::before { display: none; } .board-tile.archived:hover { opacity: 1; transform: none; box-shadow: none; } .archive-section { margin-top: 44px; } .archive-section summary { cursor: pointer; list-style: none; display: block; } .archive-section summary::-webkit-details-marker { display: none; } /* --- kanban ----------------------------------------------------------------- */ .kanban { flex: 1; display: flex; gap: 16px; padding: 22px 20px; overflow-x: auto; align-items: flex-start; animation: scr 0.3s var(--ease); } .column { background: var(--surface); border-radius: 9px; width: 300px; min-width: 300px; display: flex; flex-direction: column; max-height: 100%; border: 1px solid var(--border-soft); outline: 1.5px solid transparent; outline-offset: -2px; transition: outline 0.15s; } .column.drop-active { outline: 1.5px dashed var(--berry); } .column-head { display: flex; align-items: center; gap: 9px; padding: 14px 15px 11px; } .column-head::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--berry); opacity: 0.85; flex-shrink: 0; } .column-head span:first-of-type { font-weight: 700; color: var(--ink); font-size: 14px; letter-spacing: 0.2px; } .column-head .count { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; } .column-head .spacer { flex: 1; } .column-head button.ghost { padding: 4px 7px; } .column-head button.ghost:hover { background: var(--card); } .cards { padding: 0 9px 4px; overflow-y: auto; flex: 1; min-height: 8px; display: flex; flex-direction: column; gap: 9px; } .kcard { background: var(--card); border: 1px solid var(--border); border-left: 2px solid transparent; border-radius: 6px; box-shadow: var(--shadow-1); padding: 12px 13px; cursor: grab; animation: cardIn 0.2s var(--ease); transition: transform 0.14s var(--ease), border-color 0.14s, box-shadow 0.14s, opacity 0.14s; } .kcard:hover { border-left-color: var(--berry); transform: translateY(-1px); box-shadow: var(--shadow-hover); } .kcard.dragging { opacity: 0.4; } .kcard .ktag { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--berry); margin-bottom: 7px; } .kcard .title { font-size: 14px; line-height: 1.35; color: var(--ink); font-weight: 500; text-wrap: pretty; } .kcard .assignee { margin-top: 11px; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); } .avatar { width: 19px; height: 19px; border-radius: 50%; background: var(--berry-lt); color: var(--berry); display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; flex-shrink: 0; } .add-card { margin: 7px 9px 10px; text-align: left; justify-content: flex-start; font-weight: 600; font-size: 13px; border: 1px solid transparent; border-radius: 5px; padding: 8px 10px; background: transparent; color: var(--muted); transition: background 0.14s, color 0.14s; } .add-card:hover { background: var(--card); color: var(--ink); border-color: transparent; } .add-column { min-width: 300px; width: 300px; height: 48px; border: 1.5px dashed var(--border); border-radius: 8px; background: transparent; color: var(--muted); font-size: 13.5px; justify-content: center; transition: border-color 0.16s, color 0.16s; } .add-column:hover { border-color: var(--berry); color: var(--berry); background: transparent; } /* --- modals ----------------------------------------------------------------- */ .overlay { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; z-index: 50; padding: 20px; animation: ovl 0.18s ease; } .modal { position: relative; background: var(--card); border-radius: 12px; box-shadow: var(--shadow-modal); width: 100%; max-width: 544px; max-height: 90vh; overflow: auto; padding: 26px 28px 24px; border-top: 4px solid var(--stamp); animation: mdl 0.24s var(--ease); } .modal h2 { margin: 0 0 4px; font-size: 21px; font-weight: 700; letter-spacing: -0.5px; } .modal .sub { margin: 0 0 20px; font-size: 13.5px; color: var(--muted); } .modal .row { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); } .modal textarea { min-height: 120px; resize: vertical; line-height: 1.5; } .modal .tabs { display: flex; gap: 6px; margin-bottom: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 3px; width: fit-content; } .modal .tabs button { border: 1px solid transparent; border-radius: 5px; padding: 7px 14px; background: transparent; color: var(--mid); font-size: 13px; text-transform: lowercase; } .modal .tabs button:hover { color: var(--ink); } .modal .tabs button.primary { background: var(--berry); color: #fff; box-shadow: none; } .modal.modal-wide { max-width: min(1100px, 96vw); display: flex; flex-direction: column; } .modal.modal-handoff { max-width: 680px; } .member-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); } .member-row .name { flex: 1; min-width: 0; color: var(--ink); font-size: 14px; } .member-row .name .meta { font-size: 12px; } .member-row .avatar { width: 32px; height: 32px; font-size: 12px; } .member-row select { width: auto; } .org-hit { cursor: pointer; } .org-hit:hover .name { color: var(--berry); } /* --- whiteboard ------------------------------------------------------------- */ .card-wb-host { position: relative; display: flex; flex-direction: column; height: min(52vh, 440px); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .whiteboard-wrap { flex: 1; position: relative; background: var(--surface); } .excalidraw-host { position: absolute; inset: 0; } .whiteboard-wrap.wb-full { position: fixed; inset: 0; z-index: 200; background: var(--card); } .wb-toggle { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 10; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--mid); box-shadow: var(--shadow-1); } .wb-toggle:hover { border-color: var(--berry); color: var(--berry); } /* --- verwaltung ------------------------------------------------------------- */ .admin .label-line { margin-top: 8px; } .admin h1 { margin: 0 0 30px; font-size: 32px; font-weight: 800; letter-spacing: -1.2px; line-height: 1; } .admin-panel { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-top: 14px; box-shadow: var(--shadow-1); } .admin-new { display: grid; grid-template-columns: 1fr 1fr 1fr auto auto; gap: 12px; align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--border); } .admin-new .field { margin-bottom: 0; } @media (max-width: 760px) { .admin-new { grid-template-columns: 1fr; } } .pd-input { width: 76px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; padding: 8px 10px; } .tg-state { white-space: nowrap; } .key-reveal { border: 1.5px solid var(--berry); border-radius: 10px; padding: 16px 18px; margin-top: 18px; background: var(--berry-lt); } .key-reveal .label-line { margin-bottom: 10px; } .key-reveal .row { justify-content: flex-start; margin-top: 12px; padding-top: 0; border-top: none; } .mono { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 13px; word-break: break-all; color: var(--ink); } .code-chip { display: inline-block; padding: 6px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 18px; letter-spacing: 3px; margin-bottom: 10px; } .status-badge { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--border); background: var(--surface); color: var(--muted); } .status-badge.pending { background: var(--berry-lt); color: var(--berry); border-color: transparent; } .status-badge.sent { border-color: transparent; } .status-badge.error { color: var(--danger); border-color: var(--danger); background: transparent; } .reminder-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; } @media (max-width: 560px) { .reminder-grid { grid-template-columns: 1fr; } } /* --- handoff wizard --------------------------------------------------------- */ .handoff-cards { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; } .handoff-col { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 10px 0 4px; } .handoff-card { display: flex; gap: 8px; align-items: center; padding: 4px 0; font-size: 14px; color: var(--ink); cursor: pointer; text-transform: none; letter-spacing: normal; font-weight: 400; margin-bottom: 0; } .handoff-card input { width: auto; } .handoff-summary { width: 100%; min-height: 320px; font-size: 13px; line-height: 1.5; resize: vertical; }