/* ========================================================================== C4 Driver Depot — design system App-shell layout, light/dark via [data-theme] on . No webfonts and no build step: the system UI stack renders as Segoe UI Variable on Windows, which is what this is actually viewed on. ========================================================================== */ :root { --bg: #0b0f17; --surface: #11161f; --surface-2: #161c27; --surface-3: #1c2330; --border: #232b38; --border-soft: #1a212c; --text: #e6eaf0; --text-2: #98a2b3; --text-3: #667085; --accent: #f0b429; --accent-soft: rgba(240, 180, 41, .12); --accent-line: rgba(240, 180, 41, .34); --accent-ink: #1a1405; --ok: #3ddc97; --ok-soft: rgba(61, 220, 151, .12); --danger: #f0616b; --danger-soft: rgba(240, 97, 107, .12); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 16px rgba(0,0,0,.34); --shadow-lg: 0 16px 48px rgba(0,0,0,.5); --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --sans: system-ui, "Segoe UI Variable Text", "Segoe UI", -apple-system, Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --mono: "Cascadia Mono", "JetBrains Mono", Consolas, "SF Mono", ui-monospace, monospace; } [data-theme="light"] { --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f2f4f7; --surface-3: #eaedf2; --border: #e2e6ec; --border-soft: #edeff3; --text: #111826; --text-2: #566072; --text-3: #8b94a3; --accent: #b06a05; --accent-soft: rgba(176, 106, 5, .09); --accent-line: rgba(176, 106, 5, .28); --accent-ink: #ffffff; --ok: #067647; --ok-soft: rgba(6, 118, 71, .09); --danger: #c9333f; --danger-soft: rgba(201, 51, 63, .09); --shadow-sm: 0 1px 2px rgba(16,24,40,.05); --shadow-md: 0 4px 14px rgba(16,24,40,.07); --shadow-lg: 0 16px 44px rgba(16,24,40,.13); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } ::selection { background: var(--accent-soft); } /* --------------------------------------------------------------- app shell */ .app { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; background: var(--surface); border-right: 1px solid var(--border); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; } .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; } .brand-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(150deg, var(--accent), #d98a12); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: -.04em; flex: none; box-shadow: var(--shadow-sm); } .brand-text { line-height: 1.2; min-width: 0; } .brand-name { font-weight: 620; font-size: 14.5px; letter-spacing: -.01em; } .brand-sub { font-size: 11.5px; color: var(--text-3); } .nav-label { font-size: 10.5px; font-weight: 620; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); padding: 14px 8px 6px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); color: var(--text-2); font-size: 13.5px; font-weight: 500; cursor: pointer; border: none; background: none; width: 100%; text-align: left; transition: background .12s ease, color .12s ease; } .nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 560; } .nav-item .ico { width: 16px; flex: none; opacity: .85; text-align: center; } .nav-item .count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-3); } .sidebar-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-soft); } /* ----------------------------------------------------------------- topbar */ .main { min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 14px 28px; background: var(--bg); border-bottom: 1px solid var(--border); } @supports (backdrop-filter: blur(4px)) { .topbar { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(150%) blur(10px); } } .page-title { font-size: 15px; font-weight: 620; letter-spacing: -.01em; margin: 0; } .page-sub { font-size: 12.5px; color: var(--text-3); margin: 1px 0 0; } .spacer { flex: 1; } .search-wrap { position: relative; width: min(340px, 44vw); } .search-wrap .glass { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; font-size: 13px; } .search-wrap kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 10.5px; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 2px 5px; pointer-events: none; } .content { padding: 26px 28px 64px; } .content-narrow { max-width: 780px; } /* --------------------------------------------------------------- controls */ .input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font-family: inherit; font-size: 13.5px; padding: 8px 11px; transition: border-color .12s ease, box-shadow .12s ease; } .input::placeholder { color: var(--text-3); } .input:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); } .search-wrap .input { padding-left: 31px; padding-right: 44px; } textarea.input { resize: vertical; min-height: 78px; line-height: 1.5; } .field-label { display: block; font-size: 12px; font-weight: 560; color: var(--text-2); margin-bottom: 5px; } .field-hint { font-size: 11.5px; color: var(--text-3); margin: 4px 0 0; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 550; padding: 8px 13px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap; transition: background .12s ease, border-color .12s ease, transform .06s ease; } .btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--text-3); } .btn:active:not(:disabled) { transform: translateY(.5px); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn-primary:hover:not(:disabled) { background: #ffc541; border-color: #ffc541; } [data-theme="light"] .btn-primary:hover:not(:disabled) { background: #96590a; border-color: #96590a; } .btn-ghost { background: none; border-color: transparent; color: var(--text-2); } .btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); border-color: transparent; } .btn-danger { color: var(--danger); border-color: transparent; background: none; } .btn-danger:hover:not(:disabled) { background: var(--danger-soft); border-color: transparent; } .btn-sm { font-size: 12px; padding: 5px 9px; border-radius: var(--r-sm); } .btn-icon { padding: 0; width: 32px; height: 32px; } /* ---------------------------------------------------------------- badges */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 520; padding: 2px 7px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; } .badge-mono { font-family: var(--mono); font-size: 11px; letter-spacing: -.01em; } .badge-current { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 600; } .badge-ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; } .dot-idle { background: var(--text-3); } /* ----------------------------------------------------------------- cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .card + .card { margin-top: 12px; } .card-pad { padding: 20px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; flex-wrap: wrap; } .card-title { font-size: 14px; font-weight: 620; letter-spacing: -.01em; margin: 0; } .card-desc { font-size: 12.5px; color: var(--text-3); margin: 2px 0 0; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 14px; } .section-title { font-size: 13px; font-weight: 620; margin: 0; letter-spacing: -.01em; } .section-note { font-size: 12px; color: var(--text-3); } /* ------------------------------------------------------------ driver row */ .driver { transition: border-color .14s ease; } .driver:hover { border-color: var(--text-3); } .driver-main { display: flex; align-items: center; gap: 16px; padding: 15px 18px; flex-wrap: wrap; } .driver-id { flex: 1 1 280px; min-width: 0; } .driver-name { font-size: 14.5px; font-weight: 600; letter-spacing: -.012em; margin: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .driver-slug { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); font-weight: 400; } .driver-summary { font-size: 13px; color: var(--text-2); margin: 3px 0 0; } .driver-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; } .driver-actions { display: flex; align-items: center; gap: 9px; } .history-toggle { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 7px 0 0; color: var(--text-3); font-size: 12px; cursor: pointer; } .history-toggle:hover { color: var(--text); } .history-toggle .chev { transition: transform .16s ease; display: inline-block; } .driver.open .history-toggle .chev { transform: rotate(90deg); } .driver-history { display: none; border-top: 1px solid var(--border-soft); padding: 16px 18px 18px; background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); } .driver.open .driver-history { display: block; } /* version timeline — the one bit of visual signature */ .timeline { position: relative; padding-left: 20px; } .timeline::before { content: ""; position: absolute; left: 4px; top: 7px; bottom: 7px; width: 1px; background: var(--border); } .tl-item { position: relative; padding: 0 0 15px; } .tl-item:last-child { padding-bottom: 0; } .tl-item::before { content: ""; position: absolute; left: -20px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border); } .tl-item.is-current::before { border-color: var(--accent); background: var(--accent); } .tl-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .tl-version { font-family: var(--mono); font-size: 12.5px; font-weight: 600; } .tl-date { font-size: 12px; color: var(--text-3); } .tl-notes { font-size: 12.5px; color: var(--text-2); margin: 4px 0 0; } .tl-hash { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); margin: 5px 0 0; cursor: pointer; word-break: break-all; background: none; border: none; padding: 0; text-align: left; } .tl-hash:hover { color: var(--text-2); } /* ----------------------------------------------------------------- table */ .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--text-3); padding: 0 14px 9px 0; border-bottom: 1px solid var(--border); white-space: nowrap; } .table td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--border-soft); color: var(--text-2); vertical-align: middle; } .table tr:last-child td { border-bottom: none; } .table td.mono { font-family: var(--mono); font-size: 12px; color: var(--text); } .table .num { text-align: right; font-family: var(--mono); } /* ------------------------------------------------------------- dropzone */ .dropzone { border: 1.5px dashed var(--border); border-radius: var(--r-lg); padding: 40px 24px; text-align: center; cursor: pointer; background: var(--surface-2); transition: border-color .14s ease, background .14s ease; } .dropzone:hover, .dropzone.hot { border-color: var(--accent-line); background: var(--accent-soft); } .dropzone .dz-icon { font-size: 22px; opacity: .5; margin-bottom: 8px; } .dropzone .dz-main { font-size: 14px; font-weight: 550; color: var(--text); } .dropzone .dz-sub { font-size: 12.5px; color: var(--text-3); margin-top: 4px; } .file-chip { display: flex; align-items: center; gap: 11px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); } .file-chip .fc-name { font-weight: 550; font-size: 13.5px; } .file-chip .fc-meta { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); } /* ------------------------------------------------------------- form grid */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; } .stack > * + * { margin-top: 16px; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-2); cursor: pointer; } .check input { accent-color: var(--accent); width: 15px; height: 15px; } /* ------------------------------------------------------------- feedback */ .alert { font-size: 13px; border-radius: var(--r-md); padding: 11px 13px; border: 1px solid transparent; } .alert-error { background: var(--danger-soft); color: var(--danger); } .alert-ok { background: var(--ok-soft); color: var(--ok); } .alert-info { background: var(--accent-soft); color: var(--accent); } #toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 11px 15px; font-size: 13px; min-width: 240px; max-width: 380px; animation: toast-in .22s cubic-bezier(.2,.8,.3,1); } .toast.ok { border-left-color: var(--ok); } .toast.error { border-left-color: var(--danger); } .toast.leaving { animation: toast-out .18s ease forwards; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } } @keyframes toast-out { to { opacity: 0; transform: translateX(12px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ------------------------------------------------------------- skeleton */ .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: var(--r-sm); } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } } /* ----------------------------------------------------------------- empty */ .empty { text-align: center; padding: 64px 24px; border: 1px dashed var(--border); border-radius: var(--r-lg); } .empty-icon { font-size: 26px; opacity: .35; margin-bottom: 10px; } .empty-title { font-size: 14.5px; font-weight: 600; margin: 0 0 5px; } .empty-text { font-size: 13px; color: var(--text-3); margin: 0; } /* ------------------------------------------------------------ auth gate */ .gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .gate-card { width: 100%; max-width: 372px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 30px; } .hidden { display: none !important; } .mono { font-family: var(--mono); } .muted { color: var(--text-3); } /* --------------------------------------------------------------- mobile */ @media (max-width: 860px) { .app { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 10px 14px; border-right: none; border-bottom: 1px solid var(--border); gap: 6px; } .brand { padding: 0 12px 0 0; } .brand-text { display: none; } .nav-label { display: none; } .nav-item { width: auto; padding: 7px 11px; } .nav-item .count { display: none; } .sidebar-foot { margin: 0 0 0 auto; padding: 0; border: none; } .topbar { padding: 12px 16px; flex-wrap: wrap; } .search-wrap { width: 100%; order: 3; } .content { padding: 18px 16px 48px; } .driver-actions { width: 100%; justify-content: space-between; } } /* ------------------------------------------------------------ screenshots */ .shots { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .shot { display: block; width: 108px; height: 68px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); padding: 0; cursor: zoom-in; position: relative; transition: border-color .12s ease; } .shot:hover { border-color: var(--accent-line); } .shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .shot-remove { position: absolute; top: 3px; right: 3px; width: 19px; height: 19px; border-radius: 4px; border: none; background: rgba(0,0,0,.72); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .12s ease; } .shot:hover .shot-remove, .shot-remove:focus-visible { opacity: 1; } .shot-remove:hover { background: var(--danger); } .shot-add { width: 108px; height: 68px; border: 1.5px dashed var(--border); border-radius: var(--r-sm); background: none; color: var(--text-3); font-size: 12px; cursor: pointer; display: grid; place-items: center; transition: border-color .12s ease, color .12s ease; } .shot-add:hover { border-color: var(--accent-line); color: var(--accent); } .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.86); display: flex; align-items: center; justify-content: center; padding: 56px 24px 24px; cursor: zoom-out; } @supports (backdrop-filter: blur(2px)) { .lightbox { backdrop-filter: blur(3px); } } /* The figure is sized by the image but never larger than the viewport, so a tall screenshot scales down instead of overflowing off the bottom. */ .lightbox figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; cursor: default; min-height: 0; } .lightbox img { display: block; max-width: 100%; /* Leave room for the caption strip below. */ max-height: calc(100vh - 132px); width: auto; height: auto; object-fit: contain; border-radius: var(--r-md); box-shadow: var(--shadow-lg); background: var(--surface); } .lightbox figcaption { display: flex; align-items: center; gap: 12px; padding: 9px 2px 0; font-size: 12px; color: rgba(255,255,255,.62); flex: none; } .lightbox figcaption a { color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 2px; } .lightbox-close { position: fixed; top: 14px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.55); color: #fff; font-size: 19px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .12s ease, border-color .12s ease; } .lightbox-close:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); } .lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 38px; height: 56px; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.45); color: #fff; font-size: 20px; cursor: pointer; display: grid; place-items: center; } .lightbox-nav:hover { background: rgba(255,255,255,.15); } .lightbox-nav.prev { left: 14px; } .lightbox-nav.next { right: 14px; } @media (max-width: 640px) { .lightbox { padding: 52px 12px 12px; } .lightbox img { max-height: calc(100vh - 120px); } .lightbox-nav { width: 32px; height: 46px; } } /* ------------------------------------------------------------- link line */ .linkline { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); } .linkline code { font-family: var(--mono); font-size: 11.5px; color: var(--text-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------------------ edit panel */ .edit-panel { display: none; padding: 4px 18px 18px; border-top: 1px solid var(--border-soft); } .card.editing .edit-panel { display: block; } .badge.muted { background: none; color: var(--text-3); } /* -------------------------------------------------------------- markdown */ .md { font-size: 13.5px; line-height: 1.65; color: var(--text-2); margin: 8px 0 0; max-width: 78ch; /* release notes are prose; don't run them edge to edge */ } .md > *:first-child { margin-top: 0; } .md > *:last-child { margin-bottom: 0; } .md h2, .md h3, .md h4, .md h5 { color: var(--text); font-weight: 620; letter-spacing: -.01em; margin: 18px 0 7px; line-height: 1.3; } .md h2 { font-size: 15px; } .md h3 { font-size: 13.5px; } .md h4, .md h5 { font-size: 12.5px; color: var(--text-2); } .md p { margin: 0 0 10px; } .md ul, .md ol { margin: 0 0 10px; padding-left: 20px; } .md li { margin: 3px 0; } .md li::marker { color: var(--text-3); } .md strong { color: var(--text); font-weight: 600; } .md em { font-style: italic; } .md code { font-family: var(--mono); font-size: .88em; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 4px; padding: 1px 5px; } .md pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; overflow-x: auto; margin: 0 0 12px; } .md pre code { background: none; border: none; padding: 0; font-size: 12px; } .md blockquote { margin: 0 0 12px; padding: 2px 0 2px 13px; border-left: 2px solid var(--accent-line); color: var(--text-3); } .md hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; } .md a { color: var(--accent); } .md a:hover { text-decoration: underline; } /* ------------------------------------------------------------- file list */ .filelist { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 4px; max-width: 520px; } .fileitem { display: flex; align-items: center; gap: 10px; padding: 7px 11px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 12.5px; transition: border-color .12s ease, background .12s ease; } .fileitem:hover { border-color: var(--accent-line); background: var(--accent-soft); text-decoration: none; } .fileitem .fi-name { font-family: var(--mono); font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fileitem .fi-size { color: var(--text-3); font-size: 11px; } /* ---------------------------------------------------------- notes editor */ .notes-edit { margin-top: 6px; } .notes-edit textarea { resize: vertical; line-height: 1.5; } .notes-edit .md { font-size: 12.5px; } /* ------------------------------------------------------------ buy me a coffee */ .bmc { display: block; margin: 12px 2px 4px; line-height: 0; border-radius: 6px; transition: transform .12s ease, filter .12s ease; } .bmc:hover { transform: translateY(-1px); filter: brightness(1.04); } .bmc img { /* The upstream asset is 174x41. Scale to the rail rather than overflowing it. */ width: 100%; max-width: 174px; height: auto; display: block; border-radius: 6px; box-shadow: 0 3px 2px rgba(0, 0, 0, .18); } /* On mobile the sidebar becomes a horizontal strip, so shrink it to fit. */ @media (max-width: 860px) { .bmc { margin: 0 0 0 10px; flex: none; } .bmc img { width: 116px; } }