/* Shared visual language for the landing, positions, and docs surfaces.
* Keep this in step with basic.css: warm near-black, cream, one persimmon accent,
* Fraunces for the voice, Chivo for UI, and IBM Plex Mono for on-chain facts. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap;
src: url("fonts/Fraunces-latin-300_700.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap;
src: url("fonts/Fraunces-latin-ext-300_700.woff2") format("woff2");
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-A7FF; }
@font-face { font-family: "Chivo"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Chivo-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Chivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Chivo-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Chivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Chivo-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Chivo"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Chivo-latin-ext-300.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-A7FF; }
@font-face { font-family: "Chivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Chivo-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-A7FF; }
@font-face { font-family: "Chivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Chivo-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-latin-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexMono-latin-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexMono-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-A7FF; }
:root {
--bg: #12100E;
--bg-2: #1A1714;
--bg-3: #231F1B;
--border: #2E2823;
--text: #F4EFE6;
--text-dim: #A79E90;
--text-faint: #6C6459;
--accent: #FF6B4A;
--accent-2: #FF8B6F;
--accent-soft: rgba(255, 107, 74, 0.12);
--ok: #7BB661;
--warn: #E3B23C;
--danger: #E5533D;
--display: "Fraunces", Georgia, "Times New Roman", serif;
--ui: "Chivo", system-ui, -apple-system, sans-serif;
--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
font-family: var(--ui);
font-size: 15px;
font-weight: 300;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
a { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { color: var(--text); border-bottom-color: var(--accent); }
code, pre { font-family: var(--mono); }
code { background: var(--bg-3); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
pre.output {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px 12px;
font-size: 12.5px;
white-space: pre-wrap;
max-height: 320px;
overflow: auto;
margin: 8px 0;
}
/* ----- landing ----- */
body.landing { display: grid; place-items: center; min-height: 100vh; }
.landing-hero { max-width: 640px; padding: 48px 32px; text-align: left; }
.landing-hero h1 { font-size: 2.6rem; margin: 0 0 8px; }
.tagline { color: var(--text-dim); font-size: 1.1rem; margin: 0 0 24px; }
.landing-points { padding-left: 18px; }
.landing-points li { margin: 10px 0; color: var(--text-dim); line-height: 1.55; }
.landing-points li strong { color: var(--text); font-weight: 600; }
.landing-cta { display: flex; gap: 12px; margin-top: 28px; }
.landing-note { color: var(--text-dim); font-size: 12px; margin-top: 32px; line-height: 1.6; }
.landing-note strong { color: var(--text); }
.landing-risk { margin-top: 12px; opacity: .8; }
.landing-example {
background: var(--bg-2, #141a23); border: 1px solid var(--border, #2a3543);
border-left: 3px solid var(--accent, #4cc9f0);
border-radius: 10px; padding: 16px 18px; margin: 0 0 26px;
}
.landing-example-label {
display: block; text-transform: uppercase; letter-spacing: .08em;
font-size: 10.5px; color: var(--text-dim); margin-bottom: 6px;
}
.landing-example p { margin: 0; }
.landing-example-body { color: var(--text-dim); font-size: 13.5px; line-height: 1.6; margin-top: 8px !important; }
/* ----- top bar ----- */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 24px;
background: var(--bg-2);
border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.05rem; }
.brand a { color: var(--text); }
.brand-badge {
background: var(--accent);
color: #001;
font-size: 10px;
padding: 1px 6px;
border-radius: 4px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.topbar-controls { display: flex; align-items: center; gap: 12px; }
.chain-select span { color: var(--text-dim); font-size: 12px; margin-right: 6px; }
.wallet-pill {
display: flex;
align-items: center;
gap: 8px;
background: var(--bg-3);
border: 1px solid var(--border);
padding: 4px 10px;
border-radius: 999px;
font-family: var(--mono);
font-size: 12px;
}
.wallet-pill.hidden, .hidden { display: none !important; }
/* ----- buttons ----- */
.btn {
border: 1px solid var(--border);
border-radius: 6px;
padding: 7px 14px;
background: var(--bg-3);
color: var(--text);
cursor: pointer;
font-size: 13px;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.small { padding: 4px 9px; font-size: 12px; }
.btn.primary { background: var(--accent); color: #001; border-color: var(--accent); font-weight: 600; }
.btn.primary:hover { background: var(--accent-2); color: #001; }
.btn.ghost { background: transparent; }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: var(--danger); color: #fff; }
/* ----- form basics ----- */
select, input[type="text"], input[type="number"], input[type="datetime-local"] {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text);
padding: 6px 10px;
font-size: 13px;
font-family: inherit;
min-width: 140px;
}
select:focus, input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
/* ----- tabs ----- */
.tabs {
display: flex;
gap: 4px;
padding: 12px 24px 0;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.tab-btn {
border: none;
background: transparent;
color: var(--text-dim);
padding: 10px 16px;
border-bottom: 2px solid transparent;
cursor: pointer;
font-size: 13px;
font-weight: 500;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
color: var(--text);
border-bottom-color: var(--accent);
}
/* The way OUT of this page, sat in the tab strip because that is where the eye already
is. It is deliberately not a .tab-btn: it navigates rather than switching a panel, and
styling it identically would promise a tab that never becomes active. Pushed to the
right so it reads as an action, not the fifth tab. */
.tab-link {
margin-left: auto;
align-self: center;
padding: 10px 16px;
color: var(--accent);
text-decoration: none;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}
.tab-link:hover { text-decoration: underline; }
/* ----- main ----- */
.main-content { padding: 24px; max-width: 1200px; margin: 0 auto; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
h2 { margin: 0; font-size: 1.3rem; }
h3 { margin: 0 0 10px; font-size: 0.95rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
h4 { margin: 12px 0 6px; font-size: 0.9rem; color: var(--text-dim); }
.hint { color: var(--text-dim); font-size: 12px; margin: 4px 0 12px; }
.empty-state {
border: 1px dashed var(--border);
padding: 32px;
text-align: center;
color: var(--text-dim);
border-radius: 8px;
}
.status-line { color: var(--text-dim); font-size: 12px; margin-top: 12px; }
.warning {
background: rgba(243, 180, 65, 0.12);
border: 1px solid var(--warn);
color: var(--warn);
padding: 10px 14px;
border-radius: 6px;
margin: 12px 0;
font-size: 13px;
}
.badge {
display: inline-block;
font-size: 10.5px;
padding: 1px 6px;
border-radius: 4px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.badge.ok { background: rgba(37, 196, 106, 0.15); color: var(--ok); }
.badge.warn { background: rgba(243, 180, 65, 0.15); color: var(--warn); }
.loading {
display: flex;
align-items: center;
gap: 10px;
color: var(--text-dim);
margin: 12px 0;
}
.spinner {
width: 14px;
height: 14px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ----- portfolio list ----- */
.pair-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pair-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px 14px;
}
.pair-row-main { display: flex; flex-direction: column; gap: 4px; }
.pair-row-meta { color: var(--text-dim); font-size: 12px; }
.pair-row a { font-family: var(--mono); }
/* ----- pair detail ----- */
.pair-input { display: flex; align-items: center; gap: 8px; }
.pair-input span { color: var(--text-dim); font-size: 12px; }
.pair-input input { width: 360px; max-width: 60vw; font-family: var(--mono); }
.pair-detail { display: grid; gap: 16px; }
.pair-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
}
.pair-card {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px 16px;
}
.pair-card dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 6px 14px;
margin: 0;
font-size: 12.5px;
}
.pair-card dt { color: var(--text-dim); }
.pair-card dd { margin: 0; word-break: break-all; }
.pair-card dd code { font-size: 11.5px; }
.pair-actions { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.action-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.action-sub { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.action-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.action-inline > span { color: var(--text-dim); font-size: 12px; min-width: 150px; }
.action-inline input {
flex: 1; min-width: 200px; background: var(--bg-3); border: 1px solid var(--border);
color: var(--text); border-radius: 6px; padding: 7px 10px; font-family: var(--mono); font-size: 12px;
}
.action-inline input:focus { border-color: var(--accent); outline: none; }
.action-sub .hint { margin: 4px 0 12px; }
.pair-cow-status { padding: 14px 16px; }
.cow-orders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cow-orders { list-style: none; padding: 0; margin: 0; max-height: 320px; overflow: auto; }
.cow-order, .empty-row, .loading-row {
font-family: var(--mono);
font-size: 11.5px;
padding: 6px 8px;
border-bottom: 1px solid var(--border);
color: var(--text-dim);
}
.cow-order { color: var(--text); }
/* ----- create form ----- */
.create-form {
display: grid;
gap: 14px;
max-width: 760px;
}
.create-form fieldset {
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 16px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
}
.create-form fieldset legend {
color: var(--accent);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0 6px;
}
.create-form label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
}
.create-form label span { color: var(--text-dim); }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* ----- settings ----- */
.settings-panel { width: 100%; max-width: none; }
.settings-card { width: 100%; }
.kv-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.kv-list li {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px 12px;
font-size: 12.5px;
}
.kv-item { color: var(--text-dim); font-size: 11.5px; }
.footer {
border-top: 1px solid var(--border);
padding: 14px 24px;
display: flex;
justify-content: space-between;
color: var(--text-dim);
font-size: 11.5px;
}
@media (max-width: 700px) {
.create-form fieldset { grid-template-columns: 1fr; }
.cow-orders-grid { grid-template-columns: 1fr; }
.pair-row { flex-direction: column; align-items: flex-start; }
}
/* Factory-scan progress. Block-based and honest: the fill maps to block spans an RPC
actually resolved, never to an estimate. See setScanProgress() in app.js. */
.scan-progress {
margin: 4px 0 10px;
}
.scan-progress-label {
font-size: 11.5px;
color: var(--text-dim);
margin-bottom: 4px;
letter-spacing: 0.02em;
font-family: var(--mono);
}
.scan-progress-track {
width: 100%;
height: 4px;
border-radius: 3px;
background: var(--bg-3);
overflow: hidden;
}
.scan-progress-fill {
height: 100%;
border-radius: 3px;
background: var(--accent);
transition: width 0.25s ease;
}
/* ==========================================================================
Shared ThetaCow language
The rules above preserve the old surface contracts. These final rules give the
landing and positions pages the same visual grammar as basic.css without changing
any JavaScript-facing ids or state classes. */
html { -webkit-text-size-adjust: 100%; }
body {
background-image: radial-gradient(1100px 560px at 78% -12%, rgba(255, 107, 74, 0.07), transparent 62%);
background-attachment: fixed;
}
button, input, select { font: inherit; }
h1, h2 { font-family: var(--display); font-optical-sizing: auto; font-weight: 400; letter-spacing: -0.021em; }
h2 { font-size: clamp(32px, 4.5vw, 48px); line-height: 1.06; }
/* ---------- landing ---------- */
body.landing { display: block; min-height: 100vh; }
.landing-topbar {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
max-width: 1080px; margin: 0 auto; padding: 22px 28px 0;
}
.landing-topbar .brand { display: flex; align-items: baseline; gap: 12px; }
.brand a { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; color: var(--text); border: none; }
.brand-note {
color: var(--text-faint); font-family: var(--mono); font-size: 10px;
letter-spacing: 0.1em; text-transform: uppercase;
}
.landing-nav { display: flex; align-items: center; gap: 20px; }
.landing-nav a, .docs-nav a { font-size: 13px; }
.landing-main {
max-width: 1080px; margin: 0 auto; padding: clamp(62px, 10vw, 116px) 28px 86px;
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.85fr);
gap: clamp(44px, 8vw, 110px); align-items: center;
}
.landing-hero { max-width: none; padding: 0; text-align: left; }
.landing-kicker, .section-kicker, .docs-kicker {
color: var(--accent); font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em;
text-transform: uppercase; margin: 0 0 18px;
}
.landing-hero h1 {
max-width: 7ch; margin: 0 0 20px; font-size: clamp(58px, 9vw, 106px);
line-height: 0.92; letter-spacing: -0.055em; font-weight: 300;
}
.tagline { color: var(--text-dim); font-size: 17px; line-height: 1.55; max-width: 43ch; margin: 0; }
.landing-side { min-width: 0; }
.landing-example {
background: var(--bg-2); border: 1px solid var(--border); border-left: 2px solid var(--accent);
border-radius: 14px; padding: 22px 24px; margin: 0 0 26px;
}
.landing-example-label {
display: block; color: var(--text-faint); font-family: var(--mono); font-size: 10px;
letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 10px;
}
.landing-example p { margin: 0; }
.landing-example strong { font-family: var(--display); font-size: 22px; font-weight: 400; line-height: 1.25; }
.landing-example-body { color: var(--text-dim); font-size: 13px; line-height: 1.65; margin-top: 14px !important; }
.landing-points { list-style: none; padding: 0; margin: 0; counter-reset: landing-point; }
.landing-points li {
position: relative; padding: 0 0 16px 32px; margin: 0 0 16px; border-bottom: 1px solid var(--border);
color: var(--text-dim); font-size: 13px; line-height: 1.6; counter-increment: landing-point;
}
.landing-points li:last-child { margin-bottom: 0; }
.landing-points li::before {
content: counter(landing-point, decimal-leading-zero); position: absolute; left: 0; top: 1px;
color: var(--accent); font-family: var(--mono); font-size: 10px;
}
.landing-points li strong { color: var(--text); font-weight: 500; }
.landing-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
.landing-note { color: var(--text-faint); font-size: 12px; line-height: 1.65; margin: 28px 0 0; max-width: 52ch; }
.landing-note strong { color: var(--text-dim); font-weight: 500; }
.landing-risk { margin-top: 12px; }
.landing-footer {
max-width: 1080px; margin: 0 auto; padding: 22px 28px 36px; border-top: 1px solid var(--border);
color: var(--text-faint); font-family: var(--mono); font-size: 11px;
}
/* ---------- shared app chrome ---------- */
.topbar {
max-width: 1080px; margin: 0 auto; padding: 22px 28px 0;
background: transparent; border: 0;
}
.topbar .brand { display: flex; align-items: baseline; gap: 12px; }
.topbar-controls { display: flex; align-items: center; gap: 12px; }
.chain-select { display: flex; align-items: center; gap: 8px; }
.chain-select span { color: var(--text-faint); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.chain-select select {
appearance: none; -webkit-appearance: none; min-width: 132px; padding: 7px 29px 7px 13px;
color: var(--text-dim); background-color: var(--bg-2); border: 1px solid var(--border);
border-radius: 999px; font-family: var(--mono); font-size: 11px; line-height: 1.4; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 11px center;
}
.chain-select select:hover, .chain-select select:focus { color: var(--text); border-color: var(--accent); outline: none; }
.chain-select select option { background: var(--bg-2); color: var(--text); }
.wallet-pill {
display: flex; align-items: center; gap: 10px; padding: 5px 7px 5px 12px; border: 1px solid var(--border);
border-radius: 999px; background: var(--bg-2); color: var(--text-dim); font-family: var(--mono); font-size: 11px;
}
.btn {
border: 1px solid var(--border); border-radius: 999px; padding: 10px 18px; background: none;
color: var(--text); cursor: pointer; font-size: 13px; transition: transform .18s, border-color .18s, box-shadow .18s, color .18s, background .18s;
}
.btn:hover { border-color: var(--accent); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.small { padding: 7px 13px; font-size: 11px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #1B0D08; font-weight: 500; }
.btn.primary:hover { color: #1B0D08; transform: translateY(-2px); box-shadow: 0 12px 28px -14px var(--accent); }
.btn.ghost { background: transparent; color: var(--text-dim); }
.btn.ghost:hover { color: var(--text); }
.btn.danger { border-color: rgba(229, 83, 61, .6); color: #F08A78; }
.btn.danger:hover { background: rgba(229, 83, 61, .12); border-color: var(--danger); color: #FFB0A3; }
select, input[type="text"], input[type="number"], input[type="datetime-local"] {
background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text);
padding: 9px 12px; font-family: var(--mono); font-size: 12px; min-width: 140px;
}
select:focus, input:focus { outline: none; border-color: var(--accent); }
/* ---------- position navigation ---------- */
.tabs {
max-width: 1080px; margin: 30px auto 0; padding: 0 28px; display: flex; gap: 0;
background: transparent; border-top: 1px solid var(--border); border-bottom: 0;
}
.tab-btn {
margin-top: -1px; padding: 13px 16px 12px; border: 0; border-top: 2px solid transparent;
background: transparent; color: var(--text-faint); cursor: pointer; font-family: var(--ui);
font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
}
.tab-btn:hover { color: var(--text-dim); }
.tab-btn.active { color: var(--text); border-top-color: var(--accent); }
.tab-link { margin-left: auto; align-self: center; padding: 8px 0 8px 16px; color: var(--accent); font-size: 13px; white-space: nowrap; }
.tab-link:hover { color: var(--accent-2); text-decoration: none; }
/* ---------- position content ---------- */
.main-content { max-width: 1080px; margin: 0 auto; padding: 55px 28px 82px; }
.panel-header { align-items: flex-end; margin-bottom: 28px; }
.panel-title { min-width: 0; }
.section-kicker { margin-bottom: 10px; font-size: 10px; }
.panel-header h2 { margin: 0; font-size: clamp(38px, 5vw, 58px); font-weight: 300; }
h3 { margin: 0 0 14px; color: var(--text-faint); font-family: var(--ui); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
h4 { margin: 16px 0 8px; color: var(--text-faint); font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.hint { color: var(--text-dim); font-size: 12.5px; line-height: 1.6; }
.empty-state {
max-width: 620px; padding: 27px 22px; border: 1px dashed var(--border); border-radius: 14px;
color: var(--text-dim); font-family: var(--display); font-size: 22px; line-height: 1.35; text-align: left;
}
.empty-state p { margin: 0; }
.status-line { color: var(--text-faint); font-family: var(--mono); font-size: 11px; line-height: 1.6; margin-top: 16px; }
.warning {
background: rgba(227, 178, 60, .08); border: 0; border-left: 2px solid var(--warn); border-radius: 0 9px 9px 0;
color: #EBD3A0; padding: 11px 14px; margin: 14px 0; font-size: 12.5px; line-height: 1.55;
}
.badge { border-radius: 999px; padding: 3px 8px; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .05em; }
.badge.ok { background: rgba(123, 182, 97, .14); color: var(--ok); }
.badge.warn { background: rgba(227, 178, 60, .14); color: var(--warn); }
.loading { color: var(--text-dim); margin: 14px 0; }
.spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); }
/* ---------- portfolio and detail ---------- */
.pair-list { gap: 12px; }
.pair-row {
padding: 17px 20px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px;
transition: transform .18s, border-color .18s, background .18s;
}
.pair-row:hover { border-color: var(--accent); background: #201A16; transform: translateY(-2px); }
.pair-row-main { gap: 6px; }
.pair-row a { color: var(--text); }
.pair-row a:hover { border-bottom-color: var(--accent); }
.pair-row a code { color: var(--text); font-size: 12px; }
.pair-row-meta { color: var(--text-faint); font-family: var(--mono); font-size: 10.5px; line-height: 1.6; }
.pair-row-meta strong { color: var(--text-dim); font-weight: 400; }
.pair-row-actions { flex: 0 0 auto; }
/* ----- portfolio list: naming, ordering, and the ended toggle ----- */
/* [hidden] is a UA rule of display:none, and any display declaration outranks it. Every
element below that gets a display MUST restate it, or `hidden` becomes decorative. */
.list-controls { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.list-controls[hidden] { display: none; }
.toggle-inline {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
padding: 6px 11px; border: 1px solid var(--border); border-radius: 999px;
color: var(--text-dim); font-family: var(--mono); font-size: 10.5px;
letter-spacing: .05em; text-transform: uppercase;
transition: border-color .18s, color .18s;
user-select: none;
}
.toggle-inline:hover { border-color: var(--accent); color: var(--text); }
.toggle-inline input { width: 13px; height: 13px; margin: 0; cursor: pointer; accent-color: var(--accent); }
.pair-row-name { font-size: 15px; color: var(--text); letter-spacing: -.01em; }
.pair-row-name .badge { vertical-align: middle; margin-left: 7px; }
.row-status {
display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-left: 9px;
padding: 3px 9px 3px 7px; border-radius: 999px; border: 1px solid var(--border);
color: var(--text-faint);
font-family: var(--mono); font-size: 9px; font-weight: 500;
letter-spacing: .06em; text-transform: uppercase;
}
.row-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.row-status.is-working { color: var(--ok); border-color: rgba(123, 182, 97, .3); }
.row-status.is-waiting { color: var(--warn); border-color: rgba(227, 178, 60, .3); }
/* A position past its end date that has not been closed is holding money that only its
owner can call back. It is the only row on this page asking for something, so it takes
the accent — a colour nothing else in the list uses — and never the dimming. */
.row-status.is-unclaimed { color: var(--accent); border-color: rgba(255, 107, 74, .35); }
/* Ended rows stay legible rather than disappearing: they are in the list because someone
asked to see them, so dim to rank them, and restore on hover to read them. */
.pair-row.is-ended { opacity: .5; }
.pair-row.is-ended:hover { opacity: 1; }
/* ----- the summary: the three questions, before the forty-seven answers ----- */
.pair-advanced { display: grid; gap: 22px; }
.pair-advanced[hidden] { display: none; }
.pair-summary {
display: grid; gap: 16px;
background: var(--bg-2); border: 1px solid var(--border); border-radius: 16px;
padding: 24px 26px;
}
.summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.summary-title h3 {
margin: 0; font-family: var(--display); font-size: 25px; font-weight: 400;
letter-spacing: -.015em; color: var(--text);
}
.summary-sub {
margin: 5px 0 0; color: var(--text-dim);
font-family: var(--mono); font-size: 11px; line-height: 1.6;
}
.status-pill {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 13px 6px 11px; border-radius: 999px;
border: 1px solid var(--border); background: var(--bg-3);
color: var(--text-dim);
font-family: var(--mono); font-size: 10px; font-weight: 500;
letter-spacing: .09em; text-transform: uppercase;
}
/* The dot carries the state at a glance; the word carries it for anyone who cannot
distinguish the colours, which is why both are always present. */
.status-pill::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: currentColor; flex: 0 0 auto;
}
.status-pill.is-working { color: var(--ok); border-color: rgba(123, 182, 97, .35); }
.status-pill.is-working::before { box-shadow: 0 0 0 3px rgba(123, 182, 97, .16); }
.status-pill.is-waiting,
.status-pill.is-starting,
.status-pill.is-final-hour { color: var(--warn); border-color: rgba(227, 178, 60, .35); }
.status-pill.is-unclaimed { color: var(--accent); border-color: rgba(255, 107, 74, .4); }
.status-pill.is-unclaimed::before { box-shadow: 0 0 0 3px rgba(255, 107, 74, .16); }
.status-pill.is-ended,
.status-pill.is-closed,
.status-pill.is-unknown { color: var(--text-faint); }
.summary-detail {
margin: 0; color: var(--text); font-size: 14px; line-height: 1.65;
padding: 13px 16px; border-radius: 10px;
background: var(--bg-3); border-left: 2px solid var(--border);
}
.summary-detail.is-working { border-left-color: var(--ok); }
.summary-detail.is-waiting,
.summary-detail.is-starting,
.summary-detail.is-final-hour { border-left-color: var(--warn); }
.summary-detail.is-unclaimed { border-left-color: var(--accent); }
.summary-facts {
display: grid; grid-template-columns: minmax(84px, auto) 1fr;
gap: 9px 20px; margin: 0; align-items: baseline;
}
.summary-facts dt {
color: var(--text-faint); font-family: var(--mono); font-size: 10px;
letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.summary-facts dd { margin: 0; color: var(--text); font-size: 13.5px; line-height: 1.6; }
.summary-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.summary-actions .btn.ghost { margin-left: auto; }
@media (max-width: 620px) {
.pair-summary { padding: 20px 18px; }
.summary-facts { grid-template-columns: 1fr; gap: 3px 0; }
.summary-facts dd { margin-bottom: 9px; }
.summary-actions .btn.ghost { margin-left: 0; }
}
.pair-input { flex-wrap: wrap; justify-content: flex-end; }
.pair-input span { color: var(--text-faint); font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.pair-input input { width: 340px; max-width: min(55vw, 340px); }
.pair-detail { gap: 22px; }
.pair-grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }
.pair-card, .pair-actions {
background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 20px 21px;
}
.pair-card dl {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 0 16px; font-size: 12px;
}
.pair-card dt, .pair-card dd { padding: 10px 0; border-bottom: 1px solid var(--border); }
.pair-card dt { color: var(--text-faint); }
.pair-card dd { color: var(--text); text-align: right; overflow-wrap: anywhere; }
.pair-card dd code { color: var(--text-dim); font-size: 10.5px; }
.pair-card dd small { color: var(--text-faint); font-size: 10px; }
.pair-card dd em { color: var(--text-faint); font-style: normal; }
.pair-actions { border-left: 2px solid var(--accent); }
.pair-actions > .hint { max-width: 70ch; margin: 0 0 17px; }
.action-row { gap: 9px; margin: 12px 0 18px; }
.action-sub { border-top-color: var(--border); margin-top: 18px; padding-top: 16px; }
.action-inline { gap: 9px; margin-top: 8px; }
.action-inline > span { color: var(--text-dim); font-size: 12px; min-width: 150px; }
.action-inline input { background: var(--bg-3); border-radius: 10px; }
.action-sub .hint { margin: 6px 0 14px; }
pre.output {
max-height: 320px; margin: 18px 0 0; padding: 13px 14px; background: var(--bg); border: 1px solid var(--border);
border-radius: 10px; color: var(--text-dim); font-size: 11px; line-height: 1.6;
}
.pair-cow-status { padding: 20px 21px; }
.pair-cow-status > .hint { margin-top: 0; }
.cow-orders-grid { gap: 20px; }
.cow-orders { max-height: 320px; }
.cow-order, .empty-row, .loading-row {
padding: 9px 0; border-bottom-color: var(--border); color: var(--text-dim); font-size: 10.5px; line-height: 1.55;
}
.cow-order { color: var(--text); }
.cow-order code { color: var(--accent); background: none; padding: 0; }
.kv-list { gap: 8px; }
.kv-list li { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; }
.kv-item { color: var(--text-faint); font-size: 10px; }
/* ---------- footer and progress ---------- */
.footer {
max-width: 1080px; margin: 0 auto; padding: 22px 28px 36px; border-top: 1px solid var(--border);
color: var(--text-faint); font-family: var(--mono); font-size: 11px;
}
.scan-progress { margin: 6px 0 14px; }
.scan-progress-label { color: var(--text-faint); font-size: 10.5px; }
.scan-progress-track { height: 3px; background: var(--bg-3); }
@media (max-width: 760px) {
.landing-topbar, .topbar, .tabs, .main-content, .landing-footer { padding-left: 18px; padding-right: 18px; }
.landing-topbar { align-items: flex-start; }
.landing-nav { gap: 12px; }
.landing-main { grid-template-columns: 1fr; gap: 48px; padding-top: 68px; }
.landing-hero h1 { font-size: clamp(58px, 17vw, 90px); }
.topbar { flex-wrap: wrap; gap: 18px; }
.topbar-controls { width: 100%; justify-content: space-between; }
.tabs { overflow-x: auto; }
.main-content { padding-top: 44px; }
.panel-header { align-items: flex-start; flex-direction: column; }
.pair-input { width: 100%; justify-content: flex-start; }
.pair-input input { flex: 1; max-width: none; min-width: 180px; }
.action-inline { align-items: flex-start; flex-direction: column; }
.action-inline > span { min-width: 0; }
}
@media (max-width: 560px) {
.landing-topbar { flex-direction: column; }
.landing-nav { width: 100%; justify-content: space-between; }
.topbar-controls { align-items: flex-start; flex-wrap: wrap; }
.chain-select { width: 100%; justify-content: space-between; }
.chain-select select { flex: 1; }
.empty-state { font-size: 19px; }
.pair-card, .pair-actions, .pair-cow-status { padding: 17px 15px; }
.pair-card dl { grid-template-columns: 1fr auto; gap: 0 10px; }
.cow-orders-grid { grid-template-columns: 1fr; }
}
/* Design cycle 02 — scoped to position management, not the landing page. */
.positions-page { --text-faint: #A99B8C; color-scheme: dark; }
.positions-page :focus-visible, .positions-page input:focus-visible, .positions-page select:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.positions-page .btn, .positions-page .btn.small, .positions-page .chain-select select, .positions-page .tab-btn, .positions-page .tab-link, .positions-page .toggle-inline { min-height: 44px; }
.positions-page .btn.small { font-size: 12px; }
.positions-page .main-content { padding-top: 38px; }
.positions-page .demo-banner { margin: 0 0 34px; }
.positions-page .tabs { align-items: stretch; }
.positions-page .tab-link { display: inline-flex; align-items: center; padding: 8px 18px; border: 1px solid #554134; border-radius: 999px; }
.positions-page .panel-header { margin-bottom: 26px; }
.positions-page .panel-header h2 { font-size: clamp(36px,5vw,52px); }
.positions-page .section-kicker { color: var(--accent); font-size: 11px; }
.positions-page .pair-list { gap: 16px; }
.positions-page .pair-row { align-items: center; gap: 24px; padding: 24px; border-color: #40362d; }
.positions-page .pair-row-main { min-width: 0; flex: 1; gap: 15px; }
.positions-page .pair-row-name { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; font: 400 26px/1.3 var(--display); overflow-wrap: anywhere; }
.positions-page .row-status { font-size: 10px; margin: 0; letter-spacing: .025em; padding: 6px 10px; white-space: normal; }
.positions-page .row-status::before { flex-shrink: 0; }
.positions-page .pair-row-meta { display: flex; gap: 24px; flex-wrap: wrap; font: 400 11px/1.6 var(--ui); padding-top: 14px; border-top: 1px solid #40362d; }
.positions-page .pair-row-meta > span { display: flex; flex-direction: column; color: var(--text-faint); }
.positions-page .pair-row-meta strong { color: var(--text); }
.positions-page .pair-row-price strong { font: 400 23px/1.4 var(--display); }
.positions-page .pair-row-price small { font: 400 12px/1.5 var(--ui); color: var(--text-dim); }
.positions-page .pair-row-expiry strong { font: 400 13px/1.7 var(--mono); margin-top: 3px; }
/* .pair-link now IS .pair-row-main (the whole row body is the link) rather than a small
address line nested inside it, so it keeps only what still applies at that scope —
align-self: flex-start was written for the nested address line and would misalign the
whole row against .pair-row's centered cross-axis now. The nested it used to
style is gone with the address line. */
.positions-page .pair-link { max-width: 100%; overflow-wrap: anywhere; }
.positions-page .pair-row-actions .btn { padding: 10px 26px; min-width: 100px; }
.positions-page .pair-row:has(.is-recovery), .positions-page .pair-row:has(.is-unclaimed) { border-color: #77503a; border-left: 4px solid #f49873; background: #241b15; }
.positions-page .row-status.is-recovery, .positions-page .status-pill.is-recovery { color: #ffb492; border-color: #84543b; background: #332218; }
.positions-page .summary-detail.is-recovery { border-left-color: #f49873; }
.positions-page .pair-row.is-ended { opacity: 1; }
.positions-page .pair-row.is-ended .pair-row-name { color: var(--text-dim); }
.positions-page .pair-summary { padding: 30px; gap: 22px; border-color: #40362d; }
.positions-page .summary-title { min-width: 0; }
.positions-page .summary-title h3 { font-size: 30px; }
.positions-page .summary-sub { overflow-wrap: anywhere; }
.positions-page .status-pill { white-space: normal; max-width: 100%; line-height: 1.6; }
.positions-page .summary-facts { grid-template-columns: minmax(110px,.35fr) minmax(0,1fr); gap: 0 24px; }
.positions-page .summary-facts dt, .positions-page .summary-facts dd { padding: 12px 0; border-bottom: 1px solid #40362d; overflow-wrap: anywhere; }
.positions-page .summary-facts dt { white-space: normal; font-size: 11px; }
.positions-page .pair-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.positions-page .pair-card, .positions-page .pair-actions, .positions-page .pair-card dd, .positions-page .pair-card dt { min-width: 0; overflow-wrap: anywhere; }
.positions-page .empty-state { max-width: none; border-style: solid; border-color: #40362d; background: var(--bg-2); padding: 34px; }
.positions-page .pair-input input { min-height: 44px; min-width: 0; }
.positions-page .pair-input span { font-size: 11px; }
.positions-page .footer a { color: var(--text-dim); }
/* ----- one list, one action per card; detail revealed beneath it ----- */
.positions-page .page-actions {
display: flex; gap: 8px; align-items: center; justify-content: flex-end;
max-width: 1080px; margin: 30px auto 0; padding: 0 28px; box-sizing: border-box;
}
/* The settings button keeps the tab-btn CLASS (wireTabs' selector and demo.js both
depend on it), but must not keep tab-btn's LOOK: .positions-page .tab-btn (~line 546)
sets border:0, a -1px margin and label-style type (uppercase, letter-spacing, the ui
font) for the old horizontal tab strip, and — being a single-class selector at the
same specificity as .btn — wins the border battle by coming later in the file. Without
this reset the gear renders as a bare, misaligned glyph instead of matching the refresh
icon button beside it. border-radius here matches .btn's own 999px pill (what .btn.icon
already inherits), so this isn't a new shape, just restoring the one .tab-btn erased. */
.positions-page .page-actions .tab-btn { margin: 0; border: 1px solid var(--border); border-radius: 999px; letter-spacing: 0; text-transform: none; font-family: inherit; }
/* #tab-settings now only ever wraps