/* ========================================================================== FreelanceHub — Design System Modeled after Sync Race anti-corporate aesthetic. Supports dark (default) and light theme via .light class on . ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap'); /* ── Theme tokens ───────────────────────────────────────────── */ :root { --bg: #0a0a0c; --bg-raised: #121216; --bg-input: #0a0a0c; --border: #24242d; --border-2: #2e2e3a; --text: #e2e8f0; --text-muted:#808b9e; --accent: #3bf4a3; --accent-fg: #0a0a0c; --danger: #ff4757; --warning: #f59e0b; --shadow: rgba(0,0,0,0.5); } body.light { --bg: #f4f4f5; --bg-raised: #ffffff; --bg-input: #f9f9fb; --border: #e2e2e8; --border-2: #d0d0da; --text: #18181b; --text-muted:#71717a; --accent: #059669; --accent-fg: #ffffff; --danger: #dc2626; --warning: #d97706; --shadow: rgba(0,0,0,0.12); } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } ::selection { background-color: var(--accent); color: var(--accent-fg); } /* ── Base ──────────────────────────────────────────────────── */ body { background-color: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 1.5; height: 100vh; overflow: hidden; -webkit-font-smoothing: antialiased; transition: background-color .2s, color .2s; } input, select, textarea { font-family: 'JetBrains Mono', monospace; font-size: 13px; background: var(--bg-input); color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 8px 12px; outline: none; width: 100%; transition: border-color .15s, background .2s; } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent); } input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: .6; } select option { background: var(--bg-raised); color: var(--text); } button { font-family: 'Inter', sans-serif; cursor: pointer; border: none; border-radius: 4px; font-weight: 600; transition: all .15s; } /* ── Scrollbar ─────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg); border-left: 1px solid var(--border); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ── Layout ────────────────────────────────────────────────── */ #app { display: flex; height: 100vh; overflow: hidden; } .sidebar { width: 230px; background: var(--bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; } .sidebar-logo { padding: 24px 20px 4px; font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; } .sidebar-sub { padding: 0 20px 16px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); letter-spacing: .8px; text-transform: uppercase; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 20px; cursor: pointer; transition: all .12s; color: var(--text-muted); font-weight: 500; font-size: 13px; border-left: 2px solid transparent; user-select: none; } .nav-item:hover { background: var(--bg-raised); color: var(--text); border-left-color: var(--border-2); } .nav-item.active { background: var(--bg-raised); color: var(--accent); border-left-color: var(--accent); } .sidebar-footer { margin-top: auto; padding: 12px 20px 16px; border-top: 1px solid var(--border); } .user-email { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .logout-btn { width: 100%; padding: 7px; background: transparent; color: var(--text-muted); border: 1px solid var(--border); font-size: 12px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; } .logout-btn:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); } /* ── Theme toggle button ───────────────────────────────────── */ .theme-toggle { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; margin-bottom: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); letter-spacing: .4px; text-transform: uppercase; cursor: pointer; user-select: none; } .theme-toggle-track { width: 32px; height: 18px; background: var(--border); border-radius: 9px; position: relative; transition: background .2s; flex-shrink: 0; } .theme-toggle-track.on { background: var(--accent); } .theme-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); transition: transform .2s, background .2s; } .theme-toggle-track.on .theme-toggle-thumb { transform: translateX(14px); } .main { flex: 1; overflow-y: auto; padding: 32px; background: var(--bg); } /* ── Typography ────────────────────────────────────────────── */ .page-title { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.5px; } .page-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; margin-bottom: 28px; font-family: 'JetBrains Mono', monospace; } .section-title { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: .3px; } /* ── Grids ─────────────────────────────────────────────────── */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } /* ── Cards ─────────────────────────────────────────────────── */ .card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 4px; padding: 20px; } .card-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .card-value { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; color: var(--text); } .card-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); margin-top: 4px; } .stat-icon { font-size: 20px; margin-bottom: 10px; } /* ── Table ─────────────────────────────────────────────────── */ .tbl { width: 100%; border-collapse: collapse; } .tbl th { text-align: left; padding: 10px 14px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); } .tbl td { padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); font-size: 13px; vertical-align: middle; color: var(--text); } .tbl tr:last-child td { border-bottom: none; } .tbl tbody tr:hover { background: color-mix(in srgb, var(--bg-raised) 60%, transparent); } /* ── Badges ────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; } /* ── Buttons ───────────────────────────────────────────────── */ .btn { padding: 8px 16px; font-size: 12px; font-weight: 700; border-radius: 3px; font-family: 'JetBrains Mono', monospace; letter-spacing: .3px; } .btn-primary { background: var(--accent); color: var(--accent-fg); border: none; } .btn-primary:hover { opacity: .88; transform: translateY(-1px); } .btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; } .btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); } .btn-ghost:hover { color: var(--text); border-color: var(--border-2); } .btn-danger { background: transparent; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); } .btn-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); } .btn-sm { padding: 4px 10px; font-size: 11px; } .btn-row { display: flex; gap: 8px; align-items: center; } /* ── Filters ───────────────────────────────────────────────── */ .filter-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .filter-btn { padding: 5px 12px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .3px; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-muted); transition: all .12s; } .filter-btn.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .filter-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); } /* ── Modal ─────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; } .modal { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 4px; padding: 28px; width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .modal-title { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; color: var(--text); } .modal-close { background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; line-height: 1; padding: 0; } .modal-close:hover { color: var(--danger); } .form-group { margin-bottom: 16px; } .form-label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; letter-spacing: .6px; text-transform: uppercase; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); } /* ── Messages ──────────────────────────────────────────────── */ .msg-ok { background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); border-radius: 3px; padding: 10px 14px; font-size: 12px; font-family: 'JetBrains Mono', monospace; } .msg-error { background: color-mix(in srgb, var(--danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); border-radius: 3px; padding: 10px 14px; font-size: 12px; font-family: 'JetBrains Mono', monospace; } /* ── Empty state ───────────────────────────────────────────── */ .empty { text-align: center; padding: 48px 20px; color: var(--text-muted); } .empty-icon { font-family: 'JetBrains Mono', monospace; font-size: 28px; margin-bottom: 12px; opacity: .3; } .empty-text { font-family: 'JetBrains Mono', monospace; font-size: 13px; margin-bottom: 16px; } /* ── Progress ──────────────────────────────────────────────── */ .progress-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 8px; } .progress-fill { height: 100%; border-radius: 2px; background: var(--accent); } /* ── Projects ──────────────────────────────────────────────── */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .project-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 4px; padding: 20px; cursor: pointer; transition: all .15s; } .project-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); transform: translateY(-1px); box-shadow: 0 4px 16px var(--shadow); } .project-card-name { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; } .project-card-client { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); margin-bottom: 10px; } /* ── Breadcrumb ────────────────────────────────────────────── */ .breadcrumb { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-muted); margin-bottom: 24px; } .breadcrumb-link { color: var(--accent); cursor: pointer; font-weight: 600; } .breadcrumb-link:hover { text-decoration: underline; } /* ── Connection Panel ──────────────────────────────────────── */ .conn-panel { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 28px; overflow: hidden; } .conn-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; } .conn-panel-title { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--text); } .conn-badges { display: flex; gap: 8px; align-items: center; } .conn-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; text-transform: uppercase; } .conn-badge.ok { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .conn-badge.miss { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); } .conn-input-wrap { position: relative; } .conn-input { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 8px 36px 8px 10px; font-size: 12px; outline: none; font-family: 'JetBrains Mono', monospace; } .conn-input:focus { border-color: var(--accent); } .conn-input.filled { border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .conn-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 0; line-height: 1; } .conn-save-btn { background: var(--accent); color: var(--accent-fg); padding: 7px 16px; font-size: 11px; font-weight: 700; border-radius: 3px; border: none; cursor: pointer; font-family: 'JetBrains Mono', monospace; } .conn-save-btn:hover { opacity: .88; } .conn-clear-btn { background: transparent; color: var(--text-muted); border: 1px solid var(--border); padding: 7px 12px; font-size: 11px; font-weight: 600; border-radius: 3px; cursor: pointer; font-family: 'JetBrains Mono', monospace; } .conn-clear-btn:hover { color: var(--danger); } .conn-saved { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent); } /* ── Project file ──────────────────────────────────────────── */ .pf-meta { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; margin-bottom: 24px; } .pf-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .pf-full { grid-column: 1 / -1; } .pf-block { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 16px; } .pf-block-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; } .pf-block-val { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text); line-height: 1.7; white-space: pre-wrap; word-break: break-word; } .pf-block-empty { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--border); } .pf-detail-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px; font-family: 'JetBrains Mono', monospace; color: var(--text); } /* ── Finances ──────────────────────────────────────────────── */ .fin-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; } /* ── Misc ──────────────────────────────────────────────────── */ .spinner { text-align: center; padding: 40px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 13px; } .page-section-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; } /* ── Overdue banner ─────────────────────────────────────────── */ .overdue-banner { padding: 10px 16px; background: color-mix(in srgb, var(--danger) 8%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--danger); display: flex; align-items: center; gap: 8px; margin-bottom: 20px; } /* ── Invoice line items ─────────────────────────────────────── */ .inv-item-row input { font-size: 12px; padding: 7px 10px; } /* ── Bookmarks ──────────────────────────────────────────────── */ .bookmark-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .bookmark-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 4px; padding: 18px; transition: all .15s; display: flex; flex-direction: column; gap: 8px; } .bookmark-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); transform: translateY(-1px); } .bookmark-name { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--text); } .bookmark-url { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bookmark-url:hover { text-decoration: underline; } .bookmark-cred { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; } .bookmark-cred-reveal { background: none; border: none; color: var(--text-muted); font-size: 11px; cursor: pointer; padding: 0; font-family: 'JetBrains Mono', monospace; } .bookmark-cred-reveal:hover { color: var(--accent); } .bookmark-tag { display: inline-block; padding: 2px 8px; background: var(--border); color: var(--text-muted); border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; } /* ── Tech Stack ─────────────────────────────────────────────── */ .stack-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 4px; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: border-color .15s; } .stack-card:hover { border-color: color-mix(in srgb, var(--accent) 25%, transparent); } .stack-name { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--text); } .stack-cat { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; } .stack-amt { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; color: var(--accent); white-space: nowrap; } .stack-cycle { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); text-align: right; } /* ── Mobile top bar ─────────────────────────────────────────── */ .mobile-bar { display: none; position: fixed; top: 0; left: 0; right: 0; height: 52px; background: var(--bg); border-bottom: 1px solid var(--border); align-items: center; justify-content: space-between; padding: 0 16px; z-index: 300; } .mobile-bar-logo { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; } .hamburger { width: 36px; height: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 0; } .hamburger span { display: block; width: 16px; height: 1.5px; background: var(--text-muted); transition: all .2s; } .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ── Mobile drawer ───────────────────────────────────────────── */ .mobile-drawer { display: none; position: fixed; inset: 0; z-index: 250; } .mobile-drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); } .mobile-drawer-panel { position: absolute; top: 0; left: 0; bottom: 0; width: 240px; background: var(--bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding-top: 60px; transform: translateX(-100%); transition: transform .25s cubic-bezier(.4,0,.2,1); overflow-y: auto; } .mobile-drawer.open .mobile-drawer-panel { transform: translateX(0); } .mobile-drawer.open { display: block; } /* ── Mobile table → card list ────────────────────────────────── */ @media (max-width: 640px) { .tbl-mobile-hide { display: none !important; } .tbl thead { display: none; } .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; } .tbl tr { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 8px; padding: 4px 0; } .tbl tr:hover { background: var(--bg-raised); } .tbl td { border-bottom: none; padding: 6px 14px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; } .tbl td::before { content: attr(data-label); font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); flex-shrink: 0; margin-right: 8px; } .tbl td:last-child { border-bottom: none; } } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 900px) { .grid-4, .fin-summary { grid-template-columns: 1fr 1fr; } .pf-body { grid-template-columns: 1fr; } .sidebar { width: 200px; } } @media (max-width: 640px) { /* Layout */ body { overflow: auto; } #app { flex-direction: column; height: auto; min-height: 100vh; overflow: visible; } .sidebar { display: none; } .mobile-bar { display: flex; } .main { padding: 16px; padding-top: 68px; } /* Grids */ .grid-2, .grid-3, .grid-4, .form-row, .fin-summary { grid-template-columns: 1fr; } .projects-grid, .bookmark-grid { grid-template-columns: 1fr; } .pf-body { grid-template-columns: 1fr; } /* Page headers */ .page-section-header { flex-direction: column; gap: 12px; align-items: flex-start; } .page-title { font-size: 18px; } .filter-row { gap: 6px; } .filter-btn { padding: 4px 10px; font-size: 10px; } /* Cards */ .card { padding: 16px; } .card-value { font-size: 18px; } /* Modals — full screen on mobile */ .modal-overlay { padding: 0; align-items: flex-end; } .modal { max-width: 100% !important; width: 100%; border-radius: 8px 8px 0 0; max-height: 92vh; border-left: none; border-right: none; border-bottom: none; padding: 24px 20px; } /* Btn row wrapping */ .btn-row { flex-wrap: wrap; } /* Dash */ .overdue-banner { font-size: 11px; flex-wrap: wrap; } }