/* ============================================================ supo — monochrome app system (2026-07) White paper, black ink, capsule geometry. Matches supo.live marketing. Light is the only theme. JS-generated markup contract kept: .btn/.btn-primary/.btn-ghost/ .btn-danger/.btn-sm, .pill+.dot variants, .toast(.show/.err), .modal(.open), .cmdk-*, #confirmModal/#upgradeModal internals. ============================================================ */ :root { /* LIGHT theme (default) — monochrome paper. Dark (Slate) lives in html.theme-dark below; the no-flash script picks which is active. */ --paper: #ffffff; --ink: #0a0a0a; --dim: #6b6b6b; --faint: #a0a0a0; --wash: #f6f6f5; --wash-2: #eeeeec; --line: #e7e7e5; --ink-dim: #6b6b6b; --ink-faint: #a0a0a0; --accent: #0a0a0a; --on-accent: #ffffff; --danger: #d43a3a; --red: #d43a3a; --glass: rgba(0, 0, 0, 0.03); --glass-strong: rgba(0, 0, 0, 0.06); --surface: #fafafa; --line-strong: rgba(0, 0, 0, 0.82); --field-bg: #ffffff; --success: #0a0a0a; --card: #ffffff; --card-grad: #ffffff; --card-hi: rgba(0, 0, 0, 0.02); --bg-soft: rgba(0, 0, 0, 0.025); --blue: #0a0a0a; --blue-deep: #0a0a0a; --accent-tint: rgba(0, 0, 0, 0.06); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.14); --topbar: rgba(255, 255, 255, 0.82); --bulk: rgba(255, 255, 255, 0.96); /* theme-agnostic tokens */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --disp: "Archivo", -apple-system, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --sbw: 236px; --radius: 16px; --radius-sm: 12px; --font-body: "Archivo", -apple-system, sans-serif; --font-display: "Archivo", -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; } html.theme-dark { /* DARK theme (Slate) — cinematic, matches the rebranded marketing site (slate paper, white ink, translucent glass, white primary button, one red) */ --paper: #0F1218; --ink: #ffffff; --dim: rgba(255, 255, 255, 0.55); --faint: rgba(255, 255, 255, 0.40); --wash: rgba(255, 255, 255, 0.045); --wash-2: rgba(255, 255, 255, 0.08); --line: rgba(255, 255, 255, 0.10); --ink-dim: rgba(255, 255, 255, 0.55); --ink-faint: rgba(255, 255, 255, 0.40); --accent: #ffffff; --on-accent: #0a0a0a; --danger: #ff6b6b; --red: #ff6b6b; --glass: rgba(255, 255, 255, 0.05); --glass-strong: rgba(255, 255, 255, 0.09); --surface: #14181f; --line-strong: rgba(255, 255, 255, 0.85); --field-bg: rgba(255, 255, 255, 0.05); --success: #ffffff; --card: #171b23; --card-grad: #171b23; --card-hi: rgba(255, 255, 255, 0.05); --bg-soft: rgba(255, 255, 255, 0.04); --blue: #ffffff; --blue-deep: #ffffff; --accent-tint: rgba(255, 255, 255, 0.08); --shadow-card: none; --shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.6); --topbar: rgba(10, 12, 16, 0.6); --bulk: rgba(16, 16, 16, 0.94); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--disp); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } ::selection { background: var(--ink); color: var(--paper); } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } img, video { max-width: 100%; } h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; } h1 { font-size: 30px; font-weight: 850; font-stretch: 110%; letter-spacing: -0.03em; } h2 { font-size: 20px; font-weight: 800; } h3 { font-size: 16.5px; font-weight: 750; } p { margin: 0; } .eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); } .tiny { font-size: 12.5px; color: var(--dim); } .muted { color: var(--dim); } .mono-s { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--dim); } /* ---------------- buttons: capsules ---------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 11px 22px; font-weight: 650; font-size: 14px; line-height: 1; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); white-space: nowrap; transition: transform 0.16s var(--ease), background 0.16s var(--ease), color 0.16s var(--ease), box-shadow 0.16s var(--ease), opacity 0.16s var(--ease); } .btn:hover { background: var(--ink); color: var(--paper); } .btn:active { transform: scale(0.97); } .btn[disabled], .btn.disabled { opacity: 0.35; pointer-events: none; } .btn-primary { background: var(--ink); color: var(--paper); } .btn-primary:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16); } .btn-danger { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn-danger:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16); } .btn-ghost { border-color: var(--line); color: var(--ink); } .btn-ghost:hover { border-color: var(--ink); background: var(--paper); color: var(--ink); } .btn-sm { padding: 8px 16px; font-size: 13px; } .btn-lg { padding: 14px 28px; font-size: 15px; } .btn-block { width: 100%; } /* ---------------- pills / status ---------------- */ .pill { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 4px 11px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: var(--wash); color: var(--dim); border: 1px solid transparent; } .pill .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; } .pill-live { background: var(--ink); color: var(--paper); } .pill-live .dot { animation: pulse 1.4s ease-in-out infinite; } .pill-running { background: var(--wash); color: var(--ink); } .pill-running .dot { animation: pulse 1.4s ease-in-out infinite; } .pill-done { background: var(--paper); color: var(--ink); border-color: var(--line); } .pill-idle { background: var(--wash); color: var(--dim); } .pill-error { background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } /* ---------------- app layout shell ---------------- */ .layout { display: flex; min-height: 100vh; } .sidebar { width: var(--sbw); flex: none; border-right: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40; } .sb-brand { display: flex; align-items: center; padding: 6px 10px 18px; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; } .sb-brand .wm { display: inline-flex; align-items: center; } .sb-new { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 11px 16px; font-weight: 650; font-size: 14px; margin-bottom: 22px; transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease); } .sb-new:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16); } .sb-sec { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); padding: 0 10px; margin-bottom: 8px; display: block; } .sb-nav { display: flex; flex-direction: column; gap: 2px; } .sb-link { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; font-size: 14px; font-weight: 550; color: var(--dim); transition: background 0.14s var(--ease), color 0.14s var(--ease); } .sb-link:hover { color: var(--ink); background: var(--wash); } .sb-link.active { color: var(--ink); background: var(--wash); font-weight: 700; } .sb-link-sm { font-size: 13px; padding: 7px 10px; } /* Discord: the one hover allowed to leave monochrome — official blurple. Only the logo + label color; the tab background stays the normal grey. */ .sb-link-discord:hover { color: #5865F2; background: var(--wash); } .foot-links a.disc:hover { color: #5865F2; } .sb-spacer { flex: 1; } .sb-foot { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 12px; } .sb-credits { display: flex; align-items: center; gap: 9px; background: var(--wash); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 13px; color: var(--ink); margin-bottom: 10px; transition: border-color 0.14s var(--ease); } .sb-credits:hover, .sb-credits.active { border-color: var(--ink); } .sb-credits b { font-weight: 750; } .sb-backdrop { display: none; position: fixed; inset: 0; background: rgba(10, 10, 10, 0.35); z-index: 39; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 14px; padding: 12px 28px; border-bottom: 1px solid var(--line); background: var(--topbar); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 30; } .topbar-burger { display: none; border: 0; background: none; padding: 6px; color: var(--ink); } .topbar-sp { flex: 1; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; flex: none; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: background 0.15s var(--ease), border-color 0.15s var(--ease); } .theme-toggle:hover { background: var(--wash); border-color: var(--line-strong); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle .ic-sun { display: none; } html.theme-dark .theme-toggle .ic-sun { display: block; } html.theme-dark .theme-toggle .ic-moon { display: none; } /* on the New Project page the topbar has nothing to say on desktop — it only survives on mobile for the drawer burger */ @media (min-width: 921px) { .topbar-min { display: none; } } .verify-banner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 10px 20px; background: var(--ink); color: var(--paper); font-size: 13.5px; } .verify-banner .vb-link { color: var(--paper); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .shell { width: 100%; max-width: 1080px; margin-inline: auto; padding: 36px 28px 48px; flex: 1; } .foot-links { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--faint); } .foot-links a { color: var(--dim); } .foot-links a:hover { color: var(--ink); } /* page headers inside shell — editorial: mono eyebrow + giant claim */ .page-head { margin-bottom: 34px; } .page-head .eyebrow { display: block; margin-bottom: 10px; } .page-head p { color: var(--dim); margin-top: 10px; font-size: 14.5px; } .page-title { font-weight: 900; font-stretch: 116%; text-transform: uppercase; letter-spacing: -0.015em; line-height: 0.95; font-size: clamp(32px, 4.6vw, 46px); margin: 0; } /* section heads inside a page */ .sec-head-x { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 44px 0 16px; } .sec-head-x .eyebrow { display: block; } .sec-head-x a { color: var(--dim); font-size: 13px; } .sec-head-x a:hover { color: var(--ink); } /* editorial stat band: giant numerals in hairline cells */ .statband { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); } .statband > * { background: var(--paper); padding: 26px 22px 22px; } .stat-num { font-weight: 900; font-stretch: 114%; font-size: clamp(38px, 4.6vw, 54px); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; display: block; } .stat-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-top: 10px; display: block; } @media (max-width: 640px) { .statband { grid-template-columns: 1fr; } } /* ---------------- cards / panels ---------------- */ .card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 24px; } .card + .card { margin-top: 18px; } .card-title { font-size: 15px; font-weight: 750; letter-spacing: -0.01em; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .hairline { border: 0; border-top: 1px solid var(--line); margin: 20px 0; } /* ---------------- forms ---------------- */ label { font-size: 13.5px; font-weight: 600; color: var(--ink); } .lbl { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; } input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="datetime-local"], input[type="date"], input[type="time"], select, textarea { width: 100%; background: var(--field-bg); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; font: inherit; font-size: 14px; color: var(--ink); outline: none; transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease); } input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.07); } input::placeholder, textarea::placeholder { color: var(--faint); } input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); } .field { margin-bottom: 18px; } .field .hint { font-size: 12.5px; color: var(--faint); margin-top: 6px; } /* segmented control (capsule) */ .seg { display: inline-flex; gap: 4px; background: var(--wash); border: 1px solid var(--line); border-radius: 999px; padding: 4px; } .seg button, .seg .seg-opt { border: 0; background: transparent; border-radius: 999px; padding: 8px 16px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); transition: background 0.16s var(--ease), color 0.16s var(--ease); } .seg button.active, .seg button[data-on="true"], .seg .seg-opt.active { background: var(--ink); color: var(--paper); } /* toggle switch */ .switch { position: relative; display: inline-block; width: 40px; height: 23px; flex: none; } .switch input { opacity: 0; width: 0; height: 0; } .switch .track { position: absolute; inset: 0; border-radius: 999px; background: var(--wash-2); border: 1px solid var(--line); transition: background 0.16s var(--ease); } .switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 999px; background: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.18s var(--ease); } .switch input:checked + .track { background: var(--ink); border-color: var(--ink); } .switch input:checked + .track::after { transform: translateX(17px); } /* progress bar */ .progress { height: 7px; border-radius: 999px; background: var(--wash-2); overflow: hidden; } .progress .bar { height: 100%; border-radius: 999px; background: var(--ink); transition: width 0.4s var(--ease); } /* ---------------- tables ---------------- */ table { border-collapse: collapse; width: 100%; font-size: 13.5px; } th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); font-weight: 500; padding: 8px 12px; border-bottom: 1px solid var(--line); } td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; } tr:last-child td { border-bottom: 0; } /* ---------------- toast ---------------- */ .toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px); background: var(--ink); color: var(--paper); border-radius: 999px; padding: 12px 22px; font-size: 13.5px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); z-index: 200; max-width: min(92vw, 480px); text-align: center; } .toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.err { background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); } /* ---------------- modals ---------------- */ .modal { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.4); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 100; } .modal.open { display: flex; } .confirm-inner, .upgrade-inner { background: var(--paper); border-radius: 20px; padding: 28px; width: 100%; max-width: 400px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22); } .confirm-actions, .up-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } .up-desc { color: var(--dim); font-size: 14px; margin-top: 8px; } /* ---------------- command palette ---------------- */ .cmdk-modal { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.4); display: none; justify-content: center; align-items: flex-start; padding: 12vh 24px 24px; z-index: 150; } .cmdk-modal.open { display: flex; } .cmdk-card { background: var(--paper); border-radius: 18px; width: 100%; max-width: 520px; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24); } .cmdk-search { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--dim); } .cmdk-search input { border: 0; box-shadow: none; padding: 0; font-size: 15px; border-radius: 0; } .cmdk-search input:focus { box-shadow: none; border: 0; } .cmdk-search kbd { font-family: var(--mono); font-size: 10.5px; background: var(--wash); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; color: var(--faint); } .cmdk-list { list-style: none; margin: 0; padding: 8px; max-height: 320px; overflow-y: auto; } .cmdk-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 550; color: var(--dim); cursor: pointer; } .cmdk-item.on { background: var(--wash); color: var(--ink); } .cmdk-empty { padding: 18px; text-align: center; color: var(--faint); font-size: 13.5px; } /* ---------------- auth pages (standalone, no sidebar) ---------------- */ .auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; } .auth-side { background: var(--ink); color: var(--paper); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .auth-side .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; } .auth-claim { font-weight: 900; font-stretch: 114%; text-transform: uppercase; letter-spacing: -0.015em; line-height: 0.95; font-size: clamp(38px, 4.6vw, 64px); } .auth-side .mono-s { color: color-mix(in srgb, var(--paper) 58%, transparent); } /* real clips fanned on the sign-up side — the output, not decoration */ .auth-clips { display: flex; align-items: center; margin-top: 42px; padding-left: 6px; } .auth-clip { width: 128px; aspect-ratio: 9 / 16; object-fit: cover; display: block; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45); background: #0e0e0e; } .auth-clip:nth-child(1) { transform: rotate(-7deg) translateY(8px); z-index: 1; } .auth-clip:nth-child(2) { margin-left: -26px; transform: translateY(-14px); z-index: 3; } .auth-clip:nth-child(3) { margin-left: -26px; transform: rotate(7deg) translateY(8px); z-index: 2; } .auth-main { display: flex; align-items: center; justify-content: center; padding: 48px 24px; } .auth-card { width: 100%; max-width: 400px; } .auth-card h1 { font-size: 26px; margin-bottom: 6px; } .auth-card .sub { color: var(--dim); font-size: 14.5px; margin-bottom: 26px; } .auth-card .field label { display: block; margin-bottom: 7px; } .auth-alt { margin-top: 22px; font-size: 13.5px; color: var(--dim); text-align: center; } .auth-alt a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .auth-note { border: 1px solid var(--line); background: var(--wash); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; color: var(--ink); margin-bottom: 18px; } .auth-note.err { background: var(--paper); border: 1.5px solid var(--ink); font-weight: 600; } .code-input { font-family: var(--mono) !important; font-size: 26px !important; letter-spacing: 0.45em; text-align: center; padding: 14px 10px !important; } @media (max-width: 880px) { .auth-wrap { grid-template-columns: 1fr; } .auth-side { display: none; } } /* ---------------- shared page bits ---------------- */ /* gentle load-in used by page roots */ .rise { animation: riseIn 0.5s var(--ease) both; } .rise.d1 { animation-delay: 0.07s; } .rise.d2 { animation-delay: 0.14s; } @keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* inline warning note (e.g. YouTube 360p) */ .warn { display: none; background: var(--wash); border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: 10px; padding: 11px 14px; font-size: 13px; color: var(--ink); } .warn.show { display: block; } /* dropzone (upload) */ .dropzone { border: 1.5px dashed var(--faint); border-radius: 16px; padding: 34px 20px; text-align: center; color: var(--dim); cursor: pointer; transition: border-color 0.16s var(--ease), background 0.16s var(--ease); } .dropzone:hover, .dropzone.drag { border-color: var(--ink); background: var(--wash); } .dz-file { font-weight: 700; color: var(--ink); word-break: break-all; } /* cost estimate line under the launch button */ .cost-est { font-size: 13px; color: var(--dim); } .cost-est b { color: var(--ink); } .cost-est .ce-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-right: 8px; } .cost-est .ce-sub { display: block; font-size: 12px; color: var(--faint); } /* platform checkbox chips (auto-post targets) */ .cap-plat { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color 0.14s var(--ease), background 0.14s var(--ease); } .cap-plat:has(input:checked) { border-color: var(--ink); background: var(--wash); } .cap-plat input { width: auto; } .cap-plat-handle { color: var(--faint); font-weight: 500; } /* segmented-control sub captions */ .seg-sub { display: block; font-family: var(--disp); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: inherit; opacity: 0.65; margin-top: 2px; } /* option rows inside popovers/cards */ .opt-row { display: flex; justify-content: space-between; gap: 14px; } .opt-text { display: flex; flex-direction: column; gap: 2px; } .opt-text b { font-size: 13.5px; } .opt-text span { font-size: 12px; color: var(--dim); } /* ---------------- library: job cards + gallery ---------------- */ .empty { color: var(--dim); text-align: center; padding: 40px 20px; font-size: 14px; } .empty-rich { border: 1.5px dashed var(--line); border-radius: 18px; padding: 56px 24px; } .empty-rich h3 { font-size: 19px; margin-bottom: 8px; color: var(--ink); } .empty-rich p { max-width: 40em; margin: 0 auto 20px; } .job-card { display: block; margin-bottom: 14px; transition: border-color 0.15s var(--ease); } .job-card:hover { border-color: var(--ink); } .job-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .job-title { font-weight: 700; letter-spacing: -0.01em; flex: 1; min-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .job-head .tiny.mono { font-family: var(--mono); } /* progress track used by jobs.js / job_detail.js */ .bar { height: 7px; border-radius: 999px; background: var(--wash-2); overflow: hidden; } .bar .fill { height: 100%; border-radius: 999px; background: var(--ink); transition: width 0.5s var(--ease); } /* source groups: editorial hairline rows, not cards */ .src-group { border-top: 1px solid var(--line); margin-bottom: 0; overflow: visible; } .src-group:last-child { border-bottom: 1px solid var(--line); } .src-head { display: flex; align-items: center; gap: 16px; width: 100%; background: none; border: 0; padding: 18px 2px; text-align: left; cursor: pointer; transition: opacity 0.14s var(--ease); } .src-head:hover .src-title { text-decoration: underline; text-underline-offset: 3px; } .src-cover { width: 104px; height: 60px; border-radius: 8px; background: var(--wash-2); overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; color: var(--faint); } .src-cover img { width: 100%; height: 100%; object-fit: cover; } .src-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .src-title { font-weight: 800; font-size: 16.5px; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .src-sub { font-size: 12.5px; color: var(--dim); display: flex; align-items: center; gap: 8px; } .src-kind { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--dim); } .src-caret { color: var(--faint); transition: transform 0.18s var(--ease); flex: none; } .src-group.open .src-caret { transform: rotate(180deg); } .src-body { display: none; padding: 4px 2px 24px; } .src-group.open .src-body { display: block; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; } .clip-card { position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease); } .clip-card:hover { border-color: var(--ink); } .clip-card.selected { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); } .clip-check { position: absolute; top: 8px; left: 8px; z-index: 3; width: 24px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); border: 1.5px solid var(--faint); color: transparent; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.14s var(--ease); } .clip-card:hover .clip-check, .clip-card.selected .clip-check { opacity: 1; } .clip-card.selected .clip-check { background: var(--ink); border-color: var(--ink); color: var(--paper); } .clip-crop { position: absolute; top: 8px; right: 8px; z-index: 2; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; background: rgba(10, 10, 10, 0.78); color: #fff; border-radius: 6px; padding: 2px 7px; } .clip-spike { position: absolute; bottom: 34px; left: 8px; z-index: 2; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; background: #fff; color: var(--ink); border-radius: 6px; padding: 2px 7px; } .clip-tagdot { position: absolute; top: 12px; right: 52px; z-index: 3; width: 10px; height: 10px; border-radius: 999px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); } /* every clip tile is the same square — the crop badge (top right) says what format the clip actually is */ .clip-media { position: relative; aspect-ratio: 1 / 1; background: var(--wash-2); border-radius: 13px 13px 0 0; overflow: hidden; } .clip-media img, .clip-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .clip-duration { position: absolute; bottom: 8px; left: 8px; z-index: 2; font-family: var(--mono); font-size: 10.5px; background: rgba(10, 10, 10, 0.78); color: #fff; border-radius: 6px; padding: 2px 7px; } .clip-score { position: absolute; bottom: 8px; right: 8px; z-index: 2; font-family: var(--mono); font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: rgba(255, 255, 255, 0.92); color: var(--ink); } .clip-score.s-hi { background: var(--ink); color: var(--paper); } .clip-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .clip-caption { display: flex; align-items: flex-start; gap: 8px; } .clip-caption-text { flex: 1; font-size: 12px; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cap-copy { background: none; border: 1px solid var(--line); border-radius: 6px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; color: var(--dim); flex: none; transition: border-color 0.14s, color 0.14s; } .cap-copy:hover { border-color: var(--ink); color: var(--ink); } .clip-actions { display: flex; justify-content: flex-end; } .icon-btn { background: none; border: 1px solid var(--line); border-radius: 8px; width: 28px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--dim); font-size: 15px; line-height: 1; transition: border-color 0.14s, color 0.14s; } .icon-btn:hover { border-color: var(--ink); color: var(--ink); } .clip-menu { display: none; position: absolute; right: 10px; bottom: 40px; z-index: 20; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14); min-width: 190px; padding: 6px; flex-direction: column; } .clip-menu.open { display: flex; } .clip-menu a, .clip-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 9px 11px; font-size: 13.5px; font-weight: 550; color: var(--ink); cursor: pointer; } .clip-menu a:hover, .clip-menu button:hover { background: var(--wash); } .clip-menu .danger { font-weight: 700; } .clip-menu .danger:hover { background: var(--ink); color: var(--paper); } .tag-pick { display: none; position: absolute; right: 10px; bottom: 40px; z-index: 21; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); padding: 7px 9px; gap: 7px; } .tag-pick.open { display: inline-flex; } .tag-pick button { width: 20px; height: 20px; border-radius: 999px; border: 1px solid var(--line); padding: 0; font-size: 11px; color: var(--dim); } /* floating bulk-select bar */ .bulkbar { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); display: flex; align-items: center; gap: 10px; background: var(--bulk); border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5); backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); z-index: 90; } .bulkbar.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } /* video lightbox */ .modal-inner { max-width: min(92vw, 420px); max-height: 86vh; display: flex; } .modal-inner video { width: 100%; max-height: 86vh; border-radius: 16px; background: #000; } /* caption + schedule dialogs */ .sched-inner { background: var(--paper); border-radius: 20px; padding: 26px; width: 100%; max-width: 420px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22); } .grade-actions { display: flex; justify-content: flex-end; gap: 10px; } .cap-choice { display: flex; flex-direction: column; gap: 8px; } .cap-opt { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 550; } .cap-opt input { width: auto; } .cap-plat-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); width: 100%; margin: 12px 0 2px; } .cap-platforms { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* themed date picker */ .dpick { border: 1px solid var(--line); border-radius: 14px; padding: 14px; } .dpick-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px; margin-bottom: 10px; } .dp-nav { background: none; border: 1px solid var(--line); border-radius: 8px; width: 26px; height: 26px; color: var(--dim); } .dp-nav:hover { border-color: var(--ink); color: var(--ink); } .dpick-dow { display: grid; grid-template-columns: repeat(7, 1fr); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); text-align: center; margin-bottom: 4px; } .dpick-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dp-cell { aspect-ratio: 1; border: 0; background: none; border-radius: 8px; font-size: 12.5px; color: var(--ink); } .dp-cell:hover:not(:disabled):not(.dp-empty) { background: var(--wash); } .dp-cell:disabled { color: var(--faint); opacity: 0.5; } .dp-cell.dp-today { border: 1px solid var(--line); } .dp-cell.dp-sel-day { background: var(--ink); color: var(--paper); font-weight: 700; } .dpick-time { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; } .dp-sel { width: auto !important; padding: 6px 10px !important; font-size: 13px !important; } /* ---------------- job detail: stepper + live panel ---------------- */ .pad { /* legacy padding modifier — .card already pads */ } .grad-text { color: inherit; } /* monochrome: gradients retired */ .mono { font-family: var(--mono); } .rise.d3 { animation-delay: 0.21s; } /* pipeline stepper: segmented hairline band, active cell inverts */ .stepper { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .step { display: flex; flex-direction: column; gap: 10px; background: var(--paper); padding: 14px 16px; font-size: 12.5px; font-weight: 650; color: var(--faint); min-width: 0; } .step .orb { width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 700; flex: none; } .step-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .step.active { background: var(--ink); color: var(--paper); } .step.active .orb { border-color: rgba(255, 255, 255, 0.4); animation: pulse 1.6s ease-in-out infinite; } .step.done { color: var(--ink); } .step.done .orb { background: var(--ink); color: var(--paper); border-color: var(--ink); } @media (max-width: 700px) { .stepper { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: 1fr 1fr; } } .err-box { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--wash); border: 1.5px solid var(--ink); font-size: 13px; } .live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 16px; } .live-stat { border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-align: center; position: relative; } .live-stat-link { transition: border-color 0.14s; } .live-stat-link:hover { border-color: var(--ink); } .ls-value { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; } .ls-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-top: 4px; } .ls-go { position: absolute; top: 8px; right: 10px; color: var(--faint); font-size: 12px; } .ticker { margin-top: 16px; font-family: var(--mono); font-size: 12px; color: var(--dim); background: var(--wash); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ap-status { font-size: 13px; font-weight: 600; } .ap-status.ap-on { color: var(--ink); } .ap-status.ap-off { color: var(--dim); } .ap-rec { color: var(--faint); font-weight: 500; } .locked-card { border: 1.5px dashed var(--line); border-radius: 16px; padding: 22px 24px; } .lk-head { font-weight: 750; display: flex; align-items: center; gap: 10px; } .lk-badge { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--ink); border-radius: 5px; padding: 1px 6px; } .lk-desc { color: var(--dim); font-size: 13.5px; margin: 8px 0 14px; max-width: 46em; } .clip-title { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; } .clip-hook { font-size: 12px; color: var(--dim); } /* ---------------- queue table ---------------- */ .queue-table td { vertical-align: middle; } .q-thumb img { width: 44px; height: 66px; object-fit: cover; border-radius: 8px; display: block; } .q-title { font-weight: 700; font-size: 13.5px; } .q-caption { font-size: 12.5px; color: var(--dim); max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-platform { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; } .q-pill { display: inline-flex; border-radius: 999px; padding: 3px 10px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; background: var(--wash); color: var(--dim); } .q-posted { background: var(--ink); color: var(--paper); } .q-failed { background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); } .q-err { color: var(--dim); margin-top: 4px; max-width: 220px; } /* ---------------- clip editor ---------------- */ .editor-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 18px; align-items: start; } @media (max-width: 860px) { .editor-grid { grid-template-columns: 1fr; } } .ed-preview { position: relative; aspect-ratio: var(--ed-ar, 9 / 16); max-height: 62vh; margin-inline: auto; background: #000; border-radius: 14px; overflow: hidden; } .ed-preview video { width: 100%; height: 100%; object-fit: contain; display: block; } .ed-prev-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; } .ed-controls { display: flex; flex-direction: column; gap: 18px; } .ed-panel h3 { margin-bottom: 12px; } /* live caption overlay preview (colors are user content, set inline by JS) */ .cap-sample { position: absolute; left: 8%; right: 8%; text-align: center; font-weight: 900; font-stretch: 112%; text-transform: uppercase; line-height: 1.25; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85); pointer-events: none; z-index: 2; } .cap-sample.pos-top { top: 9%; } .cap-sample.pos-center { top: 50%; transform: translateY(-50%); } .cap-sample.pos-bottom { bottom: 12%; } .cap-sample .cw.hot { color: var(--cap-hi, #ffff00); } .grade-lbl { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin: 14px 0 7px; } .grade-lbl input[type="color"] { vertical-align: middle; margin-left: 8px; width: 34px; height: 24px; border: 1px solid var(--line); border-radius: 6px; padding: 1px; background: var(--paper); } /* trim bar */ .trim-bar { position: relative; height: 40px; border-radius: 999px; background: var(--wash-2); border: 1px solid var(--line); } .trim-region { position: absolute; top: 0; bottom: 0; background: rgba(10, 10, 10, 0.14); border-radius: 999px; } .trim-playhead { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); pointer-events: none; } .trim-handle { position: absolute; top: 50%; width: 16px; height: 30px; transform: translate(-50%, -50%); background: var(--ink); border-radius: 6px; cursor: ew-resize; touch-action: none; z-index: 2; } .trim-handle::after { content: ""; position: absolute; inset: 8px 6.5px; border-radius: 2px; background: rgba(255, 255, 255, 0.6); } /* editor index — pick a clip */ .edit-pick { display: block; } .edit-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: rgba(10, 10, 10, 0.45); color: #fff; font-weight: 750; font-size: 14px; opacity: 0; transition: opacity 0.15s var(--ease); } .edit-pick:hover .edit-overlay { opacity: 1; } /* ---------------- automation ---------------- */ /* platform rows: big names, grey mark → brand color on hover */ .plat-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 2px; border-top: 1px solid var(--line); } .plat-row:last-of-type { border-bottom: 1px solid var(--line); } .plat-id { display: flex; align-items: center; gap: 14px; min-width: 0; } .plat-id svg { fill: #b9b9b6; flex: none; transition: fill 0.2s var(--ease); } .plat-row:hover .plat-id svg { fill: var(--brand, var(--ink)); } .plat-name { font-weight: 800; font-size: 16.5px; letter-spacing: -0.02em; } .plat-handle { font-family: var(--mono); font-size: 12px; color: var(--dim); } .social-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); } .social-row:first-of-type { border-top: 0; } .social-meta { display: flex; flex-direction: column; gap: 1px; } .social-name { font-weight: 700; font-size: 14px; } .social-handle { font-size: 12.5px; color: var(--dim); } .lk-feats { margin: 0 0 16px; padding-left: 18px; color: var(--dim); font-size: 13.5px; } .lk-feats li { margin-bottom: 4px; } .wc-legend { display: flex; gap: 14px; align-items: center; } .wc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 5px; } .wc-dot.wc-upcoming { background: var(--paper); border: 1.5px solid var(--ink); } .wc-dot.wc-posted { background: var(--ink); } .week-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .wc-col { border: 1px solid var(--line); border-radius: 12px; padding: 8px; min-height: 92px; } .wc-col.wc-today { border-color: var(--ink); } .wc-head { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; } .wc-head b { font-family: var(--disp); font-size: 13px; color: var(--ink); } .wc-items { display: flex; flex-direction: column; gap: 5px; } .wc-chip { border-radius: 8px; padding: 5px 7px; font-size: 10.5px; line-height: 1.3; border: 1px solid var(--line); background: var(--paper); overflow: hidden; } .wc-chip.wc-done { background: var(--ink); color: var(--paper); border-color: var(--ink); } .wc-chip.wc-failed { border: 1.5px solid var(--ink); } .wc-time { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-weight: 700; } .wc-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.75; } .wc-empty { color: var(--faint); text-align: center; padding-top: 12px; } @media (max-width: 760px) { .week-cal { grid-template-columns: repeat(4, 1fr); } } /* ---------------- account ---------------- */ .acct-grid { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; } .acct-col { display: flex; flex-direction: column; gap: 18px; } @media (max-width: 900px) { .acct-grid { grid-template-columns: 1fr; } } .balance-card { text-align: center; } .balance-num { font-weight: 900; font-stretch: 114%; font-size: 46px; letter-spacing: -0.03em; line-height: 1; } .balance-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-top: 8px; } .usage-note { font-size: 12.5px; color: var(--dim); margin-top: 14px; } .redeem-fold { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; text-align: left; } .redeem-fold > summary { list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--dim); } .redeem-fold > summary::-webkit-details-marker { display: none; } .redeem-fold > summary:hover { color: var(--ink); } .ledger-wrap { max-height: 320px; overflow-y: auto; } .ledger td { padding: 8px 6px; font-size: 12.5px; } .led-reason { color: var(--dim); } .led-delta { text-align: right; font-family: var(--mono); font-weight: 700; white-space: nowrap; } .led-delta.pos { color: var(--ink); } .led-delta.neg { color: var(--faint); } .led-bal { text-align: right; font-family: var(--mono); color: var(--faint); white-space: nowrap; } /* in-app plan cards — marketing pricing style: header block + divider */ .plan-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .plan { border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; } .plan.current { border-color: var(--ink); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07); } .plan-head { padding: 18px 18px 14px; border-bottom: 1px solid var(--line); } .plan-name { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .plan-cur { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 3px 9px; } .plan-price { display: flex; align-items: baseline; gap: 4px; margin-top: 10px; } .plan-price span:first-child { font-weight: 900; font-stretch: 112%; font-size: 30px; letter-spacing: -0.03em; line-height: 1; } .plan-price span:last-child { color: var(--faint); font-size: 13px; } .plan-body { padding: 14px 18px 18px; flex: 1; display: flex; flex-direction: column; gap: 14px; } .plan-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; } .plan-feats li { font-size: 13px; color: var(--ink); padding-left: 20px; position: relative; line-height: 1.45; } .plan-feats li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--ink); } .soon-tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; color: var(--faint); } .pack-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; } .pack { border: 1px solid var(--line); border-radius: 14px; padding: 18px 14px; text-align: center; display: flex; flex-direction: column; gap: 4px; } .pack-credits { font-weight: 900; font-stretch: 112%; font-size: 24px; letter-spacing: -0.02em; } .pack-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); } .pack-price { font-size: 14px; font-weight: 700; margin: 6px 0 10px; } /* watermark placement stage */ .wm-stage { position: relative; width: 220px; aspect-ratio: 9 / 16; background: linear-gradient(45deg, var(--wash) 25%, transparent 25%, transparent 75%, var(--wash) 75%), linear-gradient(45deg, var(--wash) 25%, transparent 25%, transparent 75%, var(--wash) 75%); background-size: 18px 18px; background-position: 0 0, 9px 9px; background-color: var(--wash-2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; flex: none; } .wm-stage-label { position: absolute; inset: auto 0 8px; text-align: center; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); pointer-events: none; } .wm-logo { position: absolute; cursor: grab; user-select: none; max-width: none; } .wm-logo:active { cursor: grabbing; } .wm-applied { font-size: 13px; font-weight: 700; } input[type="range"] { accent-color: var(--ink); width: 100%; } /* ---------------- partner stats ---------------- */ .pstat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .pstat { border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-align: center; } .pstat-num { font-weight: 900; font-stretch: 112%; font-size: 24px; letter-spacing: -0.02em; } .pstat-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-top: 5px; } /* ---------------- responsive shell ---------------- */ @media (max-width: 920px) { .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform 0.24s var(--ease); box-shadow: none; } .layout.nav-open .sidebar { transform: translateX(0); box-shadow: 0 0 60px rgba(0, 0, 0, 0.2); } .layout.nav-open .sb-backdrop { display: block; } .topbar-burger { display: inline-flex; } .shell { padding: 24px 18px 40px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ---------------- dark cinematic auth (matches rebranded marketing) ---------------- */ body.auth-page { background: #0F1218; } .auth-page .auth-side { background: #0b0b0b; } .auth-page .auth-main { /* faint glow so the translucent (frosted) fields have something to reveal */ background: radial-gradient(105% 68% at 50% 40%, rgba(255,255,255,0.05), transparent 64%), #0F1218; } .auth-page .auth-card h1 { color: #fff; } .auth-page .auth-card .sub { color: rgba(255,255,255,0.55); } .auth-page .eyebrow { color: rgba(255,255,255,0.45); } .auth-page .mono-s { color: rgba(255,255,255,0.5); } .auth-page .tiny { color: rgba(255,255,255,0.45); } .auth-page .field label { color: rgba(255,255,255,0.68); } .auth-page .field input { /* frosted glass — same translucent tint as the landing paste-link bar, blurred over the glow behind, with a subtle top sheen for the glass edge */ background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.09); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; } .auth-page .field input::placeholder { color: rgba(255,255,255,0.34); } .auth-page .field input:focus { border-color: rgba(255,255,255,0.46); background: rgba(255,255,255,0.10); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 3px rgba(255,255,255,0.05); } .auth-page .btn-primary { background: #fff; color: #000; } .auth-page .btn-primary:hover { box-shadow: 0 8px 26px rgba(255,255,255,0.16); } .auth-page .auth-alt { color: rgba(255,255,255,0.5); } .auth-page .auth-alt a, .auth-page .auth-alt button { color: #fff !important; } .auth-page .auth-note { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.82); } .auth-page .auth-note.err { background: rgba(255,90,90,0.12); border-color: rgba(255,120,120,0.5); color: #fff; }