/* PUSHCODE — dark-first, light theme via [data-theme="light"] on . */ :root { --bg: #0a0b10; --bg-soft: #0e1017; --surface: #14161f; --surface-2: #1a1d29; --line: #242838; --line-soft: #1d2130; --text: #e9ebf3; --text-2: #a2a8bd; --text-3: #6e7489; --accent: #7c6cf5; --accent-2: #22d3ee; --accent-ink:#ffffff; --ok: #34d399; --warn: #fbbf24; --bad: #f87171; --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 12px 32px -12px rgb(0 0 0 / .6); --radius: 14px; --radius-sm: 9px; --maxw: 1220px; color-scheme: dark; } [data-theme="light"] { --bg: #f6f7fb; --bg-soft: #eef0f7; --surface: #ffffff; --surface-2: #f4f5fa; --line: #e2e5ef; --line-soft: #ebedf4; --text: #10121a; --text-2: #565d73; --text-3: #878da3; --accent: #5b4bdb; --accent-2: #0891b2; --shadow: 0 1px 2px rgb(16 18 26 / .06), 0 12px 28px -14px rgb(16 18 26 / .22); color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font: 15px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -0.006em; min-height: 100vh; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0; font-weight: 640; letter-spacing: -0.022em; line-height: 1.2; } p { margin: 0 0 .9em; } :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; } .mono { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: .88em; letter-spacing: 0; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } .muted { color: var(--text-2); } .dim { color: var(--text-3); } .nowrap { white-space: nowrap; } .row { display: flex; align-items: center; gap: 10px; } .spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .hidden { display: none !important; } /* ------------------------------------------------------------- header --- */ .topbar { position: sticky; top: 0; z-index: 60; background: color-mix(in oklab, var(--bg) 84%, transparent); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--line-soft); } .topbar .wrap { display: flex; align-items: center; gap: 18px; height: 62px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 680; letter-spacing: -0.03em; font-size: 16px; } .brand svg { display: block; } .brand .dotnet { color: var(--text-3); font-weight: 500; } .nav { display: flex; gap: 2px; margin-left: 8px; } .nav a { padding: 7px 12px; border-radius: 8px; color: var(--text-2); font-size: 14px; font-weight: 520; transition: background .14s, color .14s; white-space: nowrap; /* "How it works" otherwise wraps to three lines */ } .nav a:hover { color: var(--text); background: var(--surface-2); } .nav a.on { color: var(--text); background: var(--surface-2); } .topbar .grow { flex: 1; } .demo-flag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--warn); background: color-mix(in oklab, var(--warn) 14%, transparent); border: 1px solid color-mix(in oklab, var(--warn) 32%, transparent); letter-spacing: .01em; white-space: nowrap; flex: none; } /* -------------------------------------------------------------- button --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 570; cursor: pointer; white-space: nowrap; transition: transform .1s ease, background .14s, border-color .14s, opacity .14s; } .btn:hover { background: color-mix(in oklab, var(--surface-2) 70%, var(--line)); } .btn:active { transform: translateY(1px); } .btn[disabled] { opacity: .45; cursor: not-allowed; } .btn[disabled]:active { transform: none; } .btn-primary { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 92%, #fff 8%), var(--accent)); border-color: color-mix(in oklab, var(--accent) 70%, #000); color: var(--accent-ink); box-shadow: 0 1px 0 rgb(255 255 255 / .16) inset, 0 6px 18px -8px var(--accent); } .btn-primary:hover { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 84%, #fff 16%), var(--accent)); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-sm { padding: 6px 11px; font-size: 13px; border-radius: 8px; } .btn-lg { padding: 12px 20px; font-size: 15px; border-radius: 12px; width: 100%; } .btn-icon { padding: 8px; width: 34px; height: 34px; } /* ---------------------------------------------------------------- hero --- */ .hero { padding: 42px 0 26px; border-bottom: 1px solid var(--line-soft); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: -60% 30% auto -10%; height: 340px; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 26%, transparent), transparent); pointer-events: none; } .hero .wrap { position: relative; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 620; color: var(--accent-2); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; } .eyebrow .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 70%, transparent); animation: pulse 2.4s infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .hero h1 { font-size: clamp(28px, 4.4vw, 42px); max-width: 17ch; margin-bottom: 12px; } .hero .lede { color: var(--text-2); max-width: 60ch; font-size: 16px; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 26px; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; } .stat .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); font-weight: 620; } .stat .v { font-size: 23px; font-weight: 660; letter-spacing: -0.03em; margin-top: 5px; font-variant-numeric: tabular-nums; } .stat .s { font-size: 12.5px; color: var(--text-2); margin-top: 2px; } /* ------------------------------------------------------------- filters --- */ .toolbar { position: sticky; top: 62px; z-index: 40; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-soft); } .toolbar .wrap { display: flex; align-items: center; gap: 12px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; } .chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; } .chips::-webkit-scrollbar { display: none; } .chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-2); font-size: 13px; font-weight: 550; cursor: pointer; white-space: nowrap; transition: all .14s; } .chip:hover { color: var(--text); border-color: var(--text-3); } .chip.on { background: var(--text); color: var(--bg); border-color: var(--text); } .search { position: relative; display: flex; align-items: center; } .search svg { position: absolute; left: 10px; color: var(--text-3); pointer-events: none; } .search input { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 8px 32px; width: 220px; font-size: 14px; } .search input::placeholder { color: var(--text-3); } select.sort { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 14px; cursor: pointer; } /* ---------------------------------------------------------------- grid --- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 18px; padding: 26px 0 60px; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .16s ease, border-color .16s, box-shadow .16s; cursor: pointer; position: relative; } .card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--accent) 46%, var(--line)); box-shadow: var(--shadow); } .card .cover-wrap { position: relative; aspect-ratio: 5 / 3; overflow: hidden; background: var(--surface-2); } .card .cover { width: 100%; height: 100%; display: block; } .card .cover-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(0 0 0 / .5)); } .cover-tags { position: absolute; left: 10px; bottom: 9px; z-index: 2; display: flex; gap: 6px; } .cover-right { position: absolute; right: 10px; top: 10px; z-index: 2; display: flex; gap: 6px; } .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 640; letter-spacing: .02em; background: rgb(10 11 16 / .62); color: #fff; backdrop-filter: blur(6px); border: 1px solid rgb(255 255 255 / .14); } .pill.ok { color: #b8f5dc; border-color: color-mix(in oklab, var(--ok) 44%, transparent); } .pill.warn { color: #fde6a8; border-color: color-mix(in oklab, var(--warn) 44%, transparent); } .card-body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .card h3 { font-size: 16.5px; } .card .tagline { color: var(--text-2); font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tagrow { display: flex; gap: 5px; flex-wrap: wrap; } .tag { font-size: 11px; padding: 2.5px 7px; border-radius: 5px; background: var(--surface-2); color: var(--text-3); border: 1px solid var(--line-soft); font-weight: 540; } .bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line-soft); } .bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .5s cubic-bezier(.22,.9,.3,1); } .bar.full > i { background: linear-gradient(90deg, var(--ok), #7ee7c0); } .card .money { display: flex; align-items: baseline; justify-content: space-between; font-variant-numeric: tabular-nums; } .card .money b { font-size: 15.5px; font-weight: 660; } .card .money .of { font-size: 12.5px; color: var(--text-3); } .card .foot { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--text-3); margin-top: auto; padding-top: 3px; } .card .back-btn { opacity: 0; transform: translateY(4px); transition: opacity .16s, transform .16s; } .card:hover .back-btn, .card:focus-within .back-btn { opacity: 1; transform: none; } .empty { padding: 70px 20px; text-align: center; color: var(--text-2); grid-column: 1 / -1; } /* -------------------------------------------------------------- detail --- */ .detail { padding: 22px 0 80px; } .backlink { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 14px; padding: 6px 0; margin-bottom: 14px; } .backlink:hover { color: var(--text); } .detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 366px; gap: 30px; align-items: start; } @media (max-width: 940px) { .detail-grid { grid-template-columns: 1fr; } } /* On one column the funding panel lands a full screen of copy below the fold, so the action follows the reader down instead. */ .mobile-cta { display: none; } @media (max-width: 940px) { .detail { padding-bottom: 96px; } .mobile-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 11px 18px calc(11px + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--bg) 90%, transparent); backdrop-filter: blur(14px) saturate(1.4); border-top: 1px solid var(--line); } .mobile-cta b { font-size: 17px; font-variant-numeric: tabular-nums; } .mobile-cta .btn { padding: 11px 16px; } } .detail-hero { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 7; position: relative; } .detail-hero .cover { width: 100%; height: 100%; } .detail h1 { font-size: clamp(24px, 3.4vw, 34px); margin: 20px 0 8px; } .detail .lede { font-size: 17px; color: var(--text-2); margin-bottom: 16px; } .section { border-top: 1px solid var(--line-soft); padding: 22px 0; } .section h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); margin-bottom: 10px; } .section p { color: var(--text-2); font-size: 15px; max-width: 68ch; } .members { display: flex; flex-wrap: wrap; gap: 10px; } .member { display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); } .member .avatar { border-radius: 6px; display: block; } .member .n { font-size: 13.5px; font-weight: 570; } .member .r { font-size: 11.5px; color: var(--text-3); } .miles { display: flex; flex-direction: column; gap: 8px; } .mile { display: grid; grid-template-columns: 22px 1fr auto; gap: 11px; align-items: center; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); } .mile.done { border-color: color-mix(in oklab, var(--ok) 34%, var(--line)); } .mile .tick { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--text-3); } .mile.done .tick { border-color: var(--ok); color: var(--ok); background: color-mix(in oklab, var(--ok) 16%, transparent); } .mile .lb { font-size: 14px; } .mile .amt { font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--text-2); font-weight: 570; } /* ------------------------------------------------------------- sidebar --- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; position: sticky; top: 78px; } .panel + .panel { margin-top: 14px; position: static; } .panel .raised { font-size: 30px; font-weight: 680; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .panel .goal { color: var(--text-3); font-size: 13.5px; margin-top: 2px; } .panel .bar { height: 9px; margin: 14px 0 12px; } .panel-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; } .panel-stats div { text-align: center; padding: 9px 4px; background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--line-soft); } .panel-stats .v { font-size: 16px; font-weight: 640; font-variant-numeric: tabular-nums; } .panel-stats .k { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin-top: 1px; } .qf-note { display: flex; gap: 9px; padding: 11px 12px; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--accent) 11%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent); font-size: 12.5px; color: var(--text-2); margin-bottom: 14px; } .qf-note b { color: var(--text); font-variant-numeric: tabular-nums; } .qf-note svg { flex: none; color: var(--accent); margin-top: 1px; } .cap-note { font-size: 11.5px; color: var(--text-3); text-align: center; margin-top: 10px; line-height: 1.45; } .backers-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; margin: 0 -6px; } .backer { display: grid; grid-template-columns: 24px 1fr auto; gap: 9px; align-items: center; padding: 6px; border-radius: 8px; } .backer:hover { background: var(--surface-2); } .backer.mine { background: color-mix(in oklab, var(--accent) 12%, transparent); } .backer .avatar { border-radius: 5px; display: block; } .backer .a { font-size: 12.5px; color: var(--text-2); } .backer .m { font-size: 13px; font-weight: 620; font-variant-numeric: tabular-nums; } .backer .t { font-size: 11px; color: var(--text-3); } /* --------------------------------------------------------------- modal --- */ .scrim { position: fixed; inset: 0; z-index: 100; background: rgb(4 5 9 / .68); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; animation: fade .18s ease; } @keyframes fade { from { opacity: 0; } } .modal { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; animation: rise .22s cubic-bezier(.2,.9,.3,1); max-height: 92vh; display: flex; flex-direction: column; } .modal.wide { width: min(600px, 100%); } @keyframes rise { from { transform: translateY(14px) scale(.985); opacity: 0; } } .modal header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); } .modal header h3 { font-size: 16px; } .modal .body { padding: 16px 18px; overflow-y: auto; } .modal footer { padding: 12px 18px 15px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 9px; } .amount-box { border: 1px solid var(--line); border-radius: 12px; padding: 13px; background: var(--surface-2); } .amount-box .lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); font-weight: 620; } .amount-in { display: flex; align-items: center; gap: 6px; margin-top: 6px; } .amount-in .cur { font-size: 26px; font-weight: 600; color: var(--text-3); } .amount-in input { flex: 1; min-width: 0; background: transparent; border: none; padding: 0; font-size: 30px; font-weight: 660; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .amount-in input:focus { outline: none; } .amount-in input::-webkit-outer-spin-button, .amount-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .amount-in input[type=number] { -moz-appearance: textfield; } .presets { display: flex; gap: 6px; margin-top: 11px; flex-wrap: wrap; } .slider { width: 100%; margin: 11px 0 2px; accent-color: var(--accent); } .kv { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13.5px; border-bottom: 1px dashed var(--line-soft); } .kv:last-child { border-bottom: none; } .kv .k { color: var(--text-2); } .kv .v { font-variant-numeric: tabular-nums; font-weight: 560; } .kv.total { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 11px; font-size: 15px; } .kv.total .v { font-weight: 680; } .err { display: flex; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 13px; margin-top: 12px; background: color-mix(in oklab, var(--bad) 13%, transparent); border: 1px solid color-mix(in oklab, var(--bad) 32%, transparent); color: color-mix(in oklab, var(--bad) 78%, var(--text)); } .err svg { flex: none; margin-top: 1px; } /* ------------------------------------------------------- tx step flow --- */ .steps { display: flex; flex-direction: column; gap: 2px; } .step { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 9px 0; } .step .dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--text-3); background: var(--surface); } .step .t { font-size: 14px; font-weight: 560; } .step .d { font-size: 12.5px; color: var(--text-3); } .step.active .dot { border-color: var(--accent); color: var(--accent); } .step.active .t { color: var(--text); } .step.done .dot { border-color: var(--ok); background: color-mix(in oklab, var(--ok) 18%, transparent); color: var(--ok); } .step.todo .t, .step.todo .d { color: var(--text-3); } .spin { animation: spin 1s linear infinite; transform-origin: center; } @keyframes spin { to { transform: rotate(360deg); } } .receipt { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .receipt .rhead { padding: 20px; text-align: center; background: linear-gradient(160deg, color-mix(in oklab, var(--ok) 16%, transparent), transparent); border-bottom: 1px solid var(--line-soft); } .receipt .rhead .amt { font-size: 30px; font-weight: 700; letter-spacing: -0.035em; margin-top: 8px; font-variant-numeric: tabular-nums; } .receipt .rbody { padding: 6px 16px 14px; } .check-ring { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; background: color-mix(in oklab, var(--ok) 20%, transparent); color: var(--ok); border: 1px solid color-mix(in oklab, var(--ok) 40%, transparent); } .copyable { cursor: pointer; } .copyable:hover { color: var(--accent-2); } /* -------------------------------------------------------------- tables --- */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); font-weight: 620; padding: 10px 12px; border-bottom: 1px solid var(--line); } .table td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } .table tbody tr:hover { background: var(--surface-2); } .table .num { text-align: right; font-variant-numeric: tabular-nums; } .table .rank { color: var(--text-3); font-variant-numeric: tabular-nums; width: 42px; } .table .pname { display: flex; align-items: center; gap: 10px; } .table .pname .thumb { width: 40px; height: 26px; border-radius: 5px; overflow: hidden; flex: none; border: 1px solid var(--line); } .table .pname .thumb svg { width: 100%; height: 100%; display: block; } .page-head { padding: 34px 0 18px; } .page-head h1 { font-size: clamp(24px, 3.2vw, 32px); margin-bottom: 8px; } .page-head p { color: var(--text-2); max-width: 62ch; } .card-shell { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 40px; } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 620; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); } .badge.ok { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 34%, transparent); background: color-mix(in oklab, var(--ok) 12%, transparent); } .badge.bad { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 34%, transparent); background: color-mix(in oklab, var(--bad) 12%, transparent); } .badge.warn { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 34%, transparent); background: color-mix(in oklab, var(--warn) 12%, transparent); } /* ------------------------------------------------- media + repo cards --- */ .cover-fallback { width: 100%; height: 100%; background: linear-gradient(135deg, var(--surface-2), var(--line)); } .tag.model { border-color: color-mix(in oklab, var(--accent) 40%, transparent); color: var(--text-2); background: color-mix(in oklab, var(--accent) 12%, transparent); } .tag.model.ok { border-color: color-mix(in oklab, var(--ok) 40%, transparent); background: color-mix(in oklab, var(--ok) 12%, transparent); } .tag.model.warn { border-color: color-mix(in oklab, var(--warn) 42%, transparent); background: color-mix(in oklab, var(--warn) 12%, transparent); } .video-frame { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: pointer; background: var(--surface-2); } .video-frame .video-poster { line-height: 0; } .video-frame .video-poster svg { width: 100%; height: auto; display: block; filter: brightness(.62); } .video-frame iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: 0; } .video-play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .3); background: rgb(10 11 16 / .55); backdrop-filter: blur(6px); color: #fff; cursor: pointer; transition: transform .15s, background .15s; } .video-frame:hover .video-play { transform: scale(1.07); background: var(--accent); border-color: var(--accent); } .video-play svg { width: 22px; height: 22px; margin-left: 2px; } .video-meta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 10px; padding: 10px 13px; font-size: 12.5px; color: #fff; background: linear-gradient(transparent, rgb(0 0 0 / .72)); } .shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .shot { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 8 / 5; background: var(--surface-2); } .shot img, .shot svg { width: 100%; height: 100%; object-fit: cover; display: block; } .repo-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--surface); } .repo-stats { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 9px; font-size: 12.5px; color: var(--text-2); } .repo-stats span { display: inline-flex; align-items: center; gap: 5px; } .repo-stats svg { width: 14px; height: 14px; } /* ----------------------------------------------------- escrow + terms --- */ .escrow .kv, .terms .kv { padding: 6px 0; font-size: 13px; } .escrow .kv .k, .terms .kv .k { display: inline-flex; align-items: center; gap: 7px; } .escrow .kv svg, .terms .kv svg { width: 14px; height: 14px; opacity: .75; } .split-bar { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-soft); margin-bottom: 10px; } .split-bar > i { display: block; height: 100%; } .split-bar .rel { background: linear-gradient(90deg, var(--ok), #7ee7c0); } .split-bar .held { background: linear-gradient(90deg, var(--accent), var(--accent-2)); } .mile.funded { border-color: color-mix(in oklab, var(--warn) 34%, var(--line)); } .mile.funded .tick { border-color: var(--warn); color: var(--warn); background: color-mix(in oklab, var(--warn) 14%, transparent); } .mile .tick svg { width: 12px; height: 12px; } tr.dimrow td { opacity: .58; } /* --------------------------------------------------------------- forms --- */ .field { display: block; margin-bottom: 14px; } .flabel { display: block; font-size: 12px; font-weight: 620; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; } .fin { width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; color: var(--text); transition: border-color .14s, background .14s; } .fin:focus { outline: none; border-color: var(--accent); background: var(--surface); } .fin::placeholder { color: var(--text-3); } textarea.fin { resize: vertical; line-height: 1.5; } select.fin { cursor: pointer; } input.fin.slider { padding: 0; background: transparent; border: none; accent-color: var(--accent); } .field.bad .fin { border-color: color-mix(in oklab, var(--bad) 55%, var(--line)); } .ferr { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bad); margin-top: 6px; } .ferr svg { width: 13px; height: 13px; flex: none; } .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .rowfields { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .rowfields .fin { flex: 1; min-width: 0; } .rowfields .avatar { border-radius: 7px; flex: none; } .detected { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); padding: 9px 12px; border-radius: var(--radius-sm); margin: -6px 0 14px; background: color-mix(in oklab, var(--ok) 10%, transparent); border: 1px solid color-mix(in oklab, var(--ok) 26%, transparent); } .detected svg { width: 15px; height: 15px; color: var(--ok); flex: none; } .linkish { background: none; border: none; padding: 0; color: var(--accent-2); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-size: inherit; } .model-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 9px; margin-bottom: 16px; } .model-opt { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px 13px; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); } .model-opt:hover { border-color: var(--text-3); } .model-opt.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 13%, transparent); } .model-opt b { font-size: 13.5px; } .model-opt .dim { font-size: 11.5px; line-height: 1.4; } /* -------------------------------------------------------------- upload --- */ .up-grid { display: grid; grid-template-columns: 1fr 168px; gap: 0 14px; } @media (max-width: 620px) { .up-grid { grid-template-columns: 1fr; } } .upzone { position: relative; display: block; width: 100%; cursor: pointer; border: 1.5px dashed var(--line); border-radius: 12px; background: var(--surface-2); transition: border-color .14s, background .14s, transform .1s; } .upzone:hover { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 7%, var(--surface-2)); } .upzone.over { border-color: var(--accent-2); background: color-mix(in oklab, var(--accent-2) 12%, var(--surface-2)); transform: scale(1.006); } .upzone.has { border-style: solid; cursor: default; } .upzone.bad { border-color: color-mix(in oklab, var(--bad) 55%, var(--line)); } .upzone.busy { pointer-events: none; } .up-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; padding: 22px 16px; min-height: 132px; } .up-empty svg { width: 24px; height: 24px; color: var(--text-3); margin-bottom: 2px; } .up-empty b { font-size: 13.5px; } .up-empty .dim { font-size: 12px; line-height: 1.45; max-width: 34ch; } .upzone:hover .up-empty svg { color: var(--accent); } .up-filled { display: flex; gap: 12px; padding: 10px; align-items: center; } .up-thumb { width: 104px; flex: none; border-radius: 8px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); } .up-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .up-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .up-info b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .up-info .dim { font-size: 11.5px; font-variant-numeric: tabular-nums; } .up-grid .up-filled { flex-direction: column; align-items: stretch; text-align: center; } .up-grid > div:last-child .up-thumb { width: 100%; } .up-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px; background: color-mix(in oklab, var(--surface) 84%, transparent); backdrop-filter: blur(2px); border-radius: 11px; font-size: 13px; color: var(--text-2); } .up-busy svg { width: 17px; height: 17px; } .up-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; } .up-shot { position: relative; aspect-ratio: 8 / 5; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); } .up-shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .up-shot-x { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; padding: 0; background: rgb(10 11 16 / .66); backdrop-filter: blur(5px); color: #fff; border: 1px solid rgb(255 255 255 / .18); } .up-shot-x:hover { background: var(--bad); border-color: var(--bad); } .up-shot-meta { position: absolute; left: 6px; bottom: 6px; font-size: 10.5px; padding: 2px 6px; border-radius: 5px; background: rgb(10 11 16 / .66); color: #fff; backdrop-filter: blur(5px); font-variant-numeric: tabular-nums; } .up-shots .upzone .up-empty { min-height: 0; padding: 14px 10px; } .up-shots .upzone .up-empty svg { width: 20px; height: 20px; } .up-shots .upzone .up-empty .dim:last-child { display: none; } .avatar-up { position: relative; flex: none; padding: 0; border: none; background: none; cursor: pointer; line-height: 0; border-radius: 8px; } .avatar-up .avatar { border-radius: 8px; display: block; } .avatar-up img.avatar { object-fit: cover; } .avatar-up-badge { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 8px; background: rgb(10 11 16 / .62); color: #fff; opacity: 0; transition: opacity .14s; } .avatar-up-badge svg { width: 14px; height: 14px; } .avatar-up:hover .avatar-up-badge, .avatar-up:focus-visible .avatar-up-badge { opacity: 1; } img.logo { border-radius: 6px; display: block; object-fit: cover; } .video-poster img { width: 100%; display: block; filter: brightness(.62); } .shot { cursor: zoom-in; } /* -------------------------------------------------------------- wizard --- */ .wizard { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; } @media (max-width: 940px) { .wizard { grid-template-columns: 1fr; } .wiz-side { order: -1; } .two { grid-template-columns: 1fr; } } .wiz-side { position: sticky; top: 78px; } @media (max-width: 940px) { .wiz-side { position: static; } } .preview-card { cursor: default; } .preview-card:hover { transform: none; border-color: var(--line); box-shadow: none; } .steprail { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; overflow-x: auto; scrollbar-width: none; } .steprail::-webkit-scrollbar { display: none; } .steprail li { flex: 1; min-width: 128px; } .steprail button { width: 100%; display: flex; align-items: center; gap: 9px; text-align: left; cursor: pointer; padding: 9px 11px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text-2); } .steprail button:hover { border-color: var(--text-3); } .steprail .n { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 640; border: 1px solid var(--line); background: var(--surface-2); } .steprail .n svg { width: 12px; height: 12px; } .steprail b { display: block; font-size: 13px; color: var(--text); font-weight: 590; } .steprail .dim { font-size: 11px; display: block; line-height: 1.3; } .steprail li.on button { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); } .steprail li.on .n { border-color: var(--accent); color: var(--accent); } .steprail li.done .n { border-color: var(--ok); color: var(--ok); background: color-mix(in oklab, var(--ok) 16%, transparent); } /* -------------------------------------------------------------- toasts --- */ .toasts { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 13.5px; max-width: 340px; pointer-events: auto; animation: slidein .22s cubic-bezier(.2,.9,.3,1); } @keyframes slidein { from { transform: translateX(16px); opacity: 0; } } .toast.ok svg { color: var(--ok); } .toast.bad svg { color: var(--bad); } .toast svg { flex: none; } /* -------------------------------------------------------------- footer --- */ .foot-note { border-top: 1px solid var(--line-soft); padding: 26px 0 44px; color: var(--text-3); font-size: 13px; } .foot-note .spread { align-items: flex-start; flex-wrap: wrap; gap: 20px; } .foot-note a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; } /* Header squeeze order, widest give first: the flag's explanatory tail, then the wallet balance, then the wordmark, then the nav. */ @media (max-width: 1080px) { .topbar .wrap { gap: 10px; } .nav a { padding: 7px 10px; } .only-wide { display: none; } } /* 721–900px is the tightest band: the nav is still shown but there is no room for a wordmark next to it. The logo mark keeps working as the home link. */ @media (max-width: 900px) { .brand .wordmark { display: none; } } @media (max-width: 720px) { .nav { display: none; } .hero { padding: 30px 0 20px; } .detail-grid { gap: 20px; } .panel { position: static; } .wrap { padding: 0 16px; } .topbar .wrap { gap: 10px; height: 56px; } .brand .dotnet, .only-wide { display: none; } .demo-flag { font-size: 10.5px; padding: 3px 7px; } /* Search and sort take the first row, the category rail scrolls under it, instead of all three fighting for one line and the chips losing. */ .toolbar { top: 56px; } .search { flex: 1; } .search input { width: 100%; } .chips { order: 2; flex: 1 0 100%; } .grid { gap: 14px; padding: 20px 0 44px; } .stats { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } .stat .v { font-size: 20px; } } /* The DEMO badge is the one thing that must survive every breakpoint -- the wordmark and the balance give up their space to it, not the other way round. */ @media (max-width: 400px) { .demo-flag { font-size: 10px; padding: 3px 6px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } }