<!doctype html><html><head><meta charset="utf-8"><style>
:root{
--ink:#0e0f13; --inkpanel:#15171d; --inkbd:#23262f;
--cream:#f4f1ea; --creampanel:#fbf9f4; --creambd:#e2ddd0; --inktx:#1a1a16;
--g:#1f9e57; --gsoft:#2fb86a; --r:#d8425f; --gold:#c9a84a;
--tx:#ece9e1; --mut:#9a958a;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',-apple-system,'Segoe UI',sans-serif}
.serif{font-family:Georgia,'Times New Roman',serif}
.mono{font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace}
body{background:#0a0b0f;padding:48px 44px;display:flex;gap:30px;align-items:flex-start;width:1320px;position:relative}
/* faint chrome bleed */
.bleed{position:absolute;width:360px;height:360px;background-image:url('ref-07.jpeg');background-size:300% 300%;opacity:.10;filter:grayscale(.3) blur(1px);pointer-events:none}
.bleed.sh{top:0;left:-60px;background-position:6% 12%}
.bleed.sk{top:30px;right:-70px;background-position:95% 8%}
.col{display:flex;flex-direction:column;gap:13px;z-index:1}
.cap{color:#9fb0cc;font-size:14px;font-weight:700;text-align:center}
.cap b{color:#fff}
.ph{width:368px;height:760px;border-radius:46px;border:1px solid #2a2f3a;padding:0;overflow:hidden;position:relative;box-shadow:0 36px 90px rgba(0,0,0,.6),inset 0 0 0 8px #07080c,inset 0 0 0 9px #20242e}
.scr{position:absolute;inset:9px;border-radius:38px;overflow:hidden}
.notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:120px;height:30px;background:#000;border-radius:18px;z-index:9}
.sb{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;padding:15px 24px 0}
.pad{padding:0 22px}
/* ===== dark editorial (leaders / portfolio) ===== */
.dk{background:var(--ink);height:100%;color:var(--tx)}
.dk .sb{color:#fff}
.toptag{font-size:11px;letter-spacing:2px;color:var(--mut);font-weight:700;text-transform:uppercase}
.pill{display:inline-flex;border:1px solid var(--inkbd);border-radius:30px;overflow:hidden;font-size:13px;font-weight:700;margin:6px 0}
.pill .c{padding:8px 16px;background:rgba(31,158,87,.14);color:var(--gsoft);display:flex;align-items:center;gap:6px}
.pill .x{padding:8px 16px;color:var(--mut)}
.h1{font-size:40px;line-height:1.04;font-weight:400;letter-spacing:-.5px;margin:14px 0 6px;color:#fff}
.rule{height:1px;background:var(--inkbd);margin:10px 0}
.lbl{font-size:10px;letter-spacing:1.5px;color:var(--mut);font-weight:700;text-transform:uppercase;margin:16px 0 8px}
.lrow{display:flex;align-items:center;gap:13px;padding:11px 0;border-bottom:1px solid #1b1d24}
.rk{font-size:15px;color:var(--mut);width:16px;text-align:center}
.av{width:38px;height:38px;border-radius:50%;flex:0 0 38px;background-image:url('ref-07.jpeg');background-size:360% 360%;border:1px solid #333;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.av.shark{background-position:7% 13%}
.av.skull{background-position:94% 9%}
.av.shark2{background-position:13% 78%}
.av.skull2{background-position:90% 80%}
.who{flex:1}
.who .nm{font-size:16px;font-weight:600;color:#fff}
.who .sd{font-size:10px;font-weight:800;letter-spacing:.5px;padding:1px 6px;border-radius:5px;display:inline-block;margin-top:2px}
.sd.c{background:rgba(31,158,87,.16);color:var(--gsoft)}.sd.f{background:rgba(216,66,95,.16);color:var(--r)}
.edge{text-align:right}
.edge .e{font-size:9px;color:var(--mut);letter-spacing:1px}
.edge .v{font-size:18px;font-weight:700}.v.pos{color:var(--gsoft)}.v.neg{color:var(--r)}
.nav{position:absolute;bottom:0;left:0;right:0;height:62px;display:flex;align-items:center;justify-content:space-around;border-top:1px solid var(--inkbd);background:var(--ink)}
.nav .i{width:22px;height:22px;color:#5a5f6b}.nav .i.on{color:var(--gold)}
/* portfolio */
.big{font-size:46px;font-weight:400;letter-spacing:-1px;color:#fff;margin-top:4px}
.big .u{font-size:15px;color:var(--gsoft);font-weight:600}
.pcard{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #1b1d24}
.pcard .t{flex:1}.pcard .t .q{font-size:13.5px;color:#e8e5dc;font-weight:500;line-height:1.25}
.pcard .t .yn{font-size:11px;margin-top:3px}
.yes{color:var(--gsoft);font-weight:700}.no{color:var(--r);font-weight:700}
.pcard .pl{text-align:right;font-weight:700;font-size:15px}
/* ===== cream editorial (profile) ===== */
.cr{background:var(--cream);height:100%;color:var(--inktx)}
.cr .sb{color:#1a1a16}
.cr .back{font-size:20px;color:#1a1a16}
.cr .title{text-align:center;font-size:13px;letter-spacing:2px;color:#8a8576;font-weight:700;text-transform:uppercase;padding-top:2px}
.hero{width:150px;height:150px;margin:14px auto 6px;border-radius:50%;background-image:url('ref-07.jpeg');background-size:240% 240%;background-position:50% 33%;border:1px solid var(--creambd);box-shadow:0 10px 30px rgba(0,0,0,.12),inset 0 0 0 6px #fff}
.cr .tn{text-align:center;font-size:22px;font-weight:600}
.cr .tag{text-align:center;margin:6px 0 2px}
.cr .tag span{font-size:11px;font-weight:800;letter-spacing:1px;background:rgba(31,158,87,.12);color:var(--g);padding:4px 12px;border-radius:20px}
.cr .ed{text-align:center;margin:14px 0 2px}
.cr .ed .l{font-size:11px;letter-spacing:3px;color:#8a8576}
.cr .ed .n{font-size:62px;font-weight:400;line-height:1;letter-spacing:-1px}
.cr .ed .t3{font-size:13px;letter-spacing:2px;color:#8a8576;font-weight:600}
.eq{margin:14px 22px 0}
.eq .h{display:flex;justify-content:space-between;font-size:11px;color:#8a8576;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
.eq .h b{color:var(--g)}
.cr .btns{display:flex;gap:12px;padding:16px 22px 0}
.cr .b{flex:1;border-radius:14px;padding:13px 0;text-align:center;border:1.5px solid}
.cr .b.y{border-color:var(--g);color:var(--g)}.cr .b.n{border-color:var(--r);color:var(--r)}
.cr .b .big2{font-size:16px;font-weight:800;letter-spacing:.5px}
.cr .b .sm{font-size:10px;letter-spacing:1px;text-transform:uppercase;opacity:.7}
.cr .mk{padding:16px 22px 0}
.cr .mkrow{display:flex;justify-content:space-between;font-size:13px;padding:8px 0;border-bottom:1px solid var(--creambd)}
.cr .mkrow .p{color:var(--g);font-weight:700}
</style></head><body>
<div class="bleed sh"></div><div class="bleed sk"></div>
<!-- 1 LEADERS (dark editorial) -->
<div class="col"><div class="cap">1 · <b>Leaders</b> — editorial dark</div>
<div class="ph"><div class="notch"></div><div class="scr dk">
<div class="sb"><span class="mono">9:41</span><span class="mono">●●● ⌃ ▮</span></div>
<div class="pad">
<div style="display:flex;justify-content:space-between;align-items:center;margin-top:14px"><span class="toptag">Prediction Market</span>
<span class="pill"><span class="c">⇄ COPY</span><span class="x">FADE</span></span></div>
<div class="h1 serif">Two sides.<br>One market.</div>
<div class="lbl">Leaders · this month</div>
<div class="lrow"><span class="rk serif">1</span><div class="av shark"></div><div class="who"><div class="nm serif">Veritas Capital</div><span class="sd c">COPY</span></div><div class="edge"><div class="e mono">EDGE</div><div class="v pos mono">92.4</div></div></div>
<div class="lrow"><span class="rk serif">2</span><div class="av skull"></div><div class="who"><div class="nm serif">M. H. Ellington</div><span class="sd f">FADE</span></div><div class="edge"><div class="e mono">EDGE</div><div class="v neg mono">88.7</div></div></div>
<div class="lrow"><span class="rk serif">3</span><div class="av shark2"></div><div class="who"><div class="nm serif">Pembroke Holdings</div><span class="sd c">COPY</span></div><div class="edge"><div class="e mono">EDGE</div><div class="v pos mono">85.1</div></div></div>
<div class="lrow"><span class="rk serif">4</span><div class="av skull2"></div><div class="who"><div class="nm serif">Northmoor Partners</div><span class="sd f">FADE</span></div><div class="edge"><div class="e mono">EDGE</div><div class="v neg mono">81.3</div></div></div>
<div class="lrow"><span class="rk serif">5</span><div class="av shark"></div><div class="who"><div class="nm serif">A. de Vesci</div><span class="sd c">COPY</span></div><div class="edge"><div class="e mono">EDGE</div><div class="v pos mono">78.9</div></div></div>
</div>
<div class="nav"><svg class="i on" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 12l9-9 9 9M5 10v10h14V10"/></svg>
<svg class="i" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 19V5m6 14V9m6 10V13"/></svg>
<svg class="i" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="4" y="4" width="16" height="16" rx="3"/></svg>
<svg class="i" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0116 0"/></svg></div>
</div></div></div>
<!-- 2 PROFILE (cream editorial + chrome hero) -->
<div class="col"><div class="cap">2 · <b>Trader Profile</b> — cream + chrome shark</div>
<div class="ph"><div class="notch"></div><div class="scr cr">
<div class="sb"><span class="mono">9:41</span><span class="mono">●●● ⌃ ▮</span></div>
<div style="display:flex;align-items:center;padding:6px 22px 0"><span class="back">‹</span><span class="title" style="flex:1">Trader</span><span style="width:14px"></span></div>
<div class="hero"></div>
<div class="tn serif">Veritas Capital</div>
<div class="tag"><span>✓ COPY TRADER</span></div>
<div class="ed"><div class="l mono">EDGE</div><div class="n serif">92</div><div class="t3 mono">TOP 3%</div></div>
<div class="eq"><div class="h"><span>Equity · 30d</span><b class="mono">+28.4%</b></div>
<svg viewBox="0 0 320 70" preserveAspectRatio="none" style="width:100%;height:62px"><defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#1f9e57" stop-opacity=".25"/><stop offset="1" stop-color="#1f9e57" stop-opacity="0"/></linearGradient></defs>
<path d="M0 58 L32 54 L64 56 L96 44 L128 47 L160 34 L192 37 L224 24 L256 27 L288 14 L320 9 L320 70 L0 70Z" fill="url(#g)"/>
<path d="M0 58 L32 54 L64 56 L96 44 L128 47 L160 34 L192 37 L224 24 L256 27 L288 14 L320 9" fill="none" stroke="#1f9e57" stroke-width="2"/></svg></div>
<div class="btns"><div class="b y"><div class="big2 serif">YES</div><div class="sm">copy</div></div><div class="b n"><div class="big2 serif">NO</div><div class="sm">fade</div></div></div>
<div class="mk"><div class="mkrow" style="color:#8a8576;font-size:11px;letter-spacing:1px"><span>MARKETS</span><span>6 ACTIVE</span></div>
<div class="mkrow"><span>Global Policy Stability</span><span class="p mono">YES 0.55</span></div>
<div class="mkrow"><span>Central Bank Path</span><span class="p mono">YES 0.61</span></div></div>
</div></div></div>
<!-- 3 PORTFOLIO (dark editorial) -->
<div class="col"><div class="cap">3 · <b>Portfolio</b> — editorial dark</div>
<div class="ph"><div class="notch"></div><div class="scr dk">
<div class="sb"><span class="mono">9:41</span><span class="mono">●●● ⌃ ▮</span></div>
<div class="pad">
<div class="toptag" style="margin-top:14px">Portfolio · live</div>
<div class="big serif">+23.41%<span class="u mono"> +$11.7k</span></div>
<div class="rule"></div>
<div class="lbl">Open Positions</div>
<div class="pcard"><div class="av shark"></div><div class="t"><div class="q serif">Monetary Policy Decision</div><div class="yn"><span class="yes mono">YES @ 0.55</span> · vs Veritas</div></div><div class="pl pos" style="color:var(--gsoft)">+$2.3k</div></div>
<div class="pcard"><div class="av skull"></div><div class="t"><div class="q serif">Election Outcome</div><div class="yn"><span class="no mono">NO @ 0.38</span> · fade Ellington</div></div><div class="pl" style="color:var(--gsoft)">+$1.6k</div></div>
<div class="pcard"><div class="av shark2"></div><div class="t"><div class="q serif">Economic Indicator</div><div class="yn"><span class="yes mono">YES @ 0.48</span> · vs Pembroke</div></div><div class="pl" style="color:var(--gsoft)">+$0.9k</div></div>
<div class="pcard"><div class="av skull2"></div><div class="t"><div class="q serif">Rate Cut in September</div><div class="yn"><span class="no mono">NO @ 0.41</span> · fade Northmoor</div></div><div class="pl" style="color:var(--r)">−$0.2k</div></div>
<div class="lbl">P&L Breakdown</div>
<div style="display:flex;justify-content:space-between;font-size:13px;padding:6px 0"><span style="color:var(--mut)">Realized</span><span class="mono" style="color:var(--gsoft)">+9.18%</span></div>
<div style="display:flex;justify-content:space-between;font-size:13px;padding:6px 0"><span style="color:var(--mut)">Unrealized</span><span class="mono" style="color:var(--gsoft)">+8.14%</span></div>
</div>
<div class="nav"><svg class="i" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 12l9-9 9 9M5 10v10h14V10"/></svg>
<svg class="i" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 19V5m6 14V9m6 10V13"/></svg>
<svg class="i on" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="4" y="4" width="16" height="16" rx="3"/></svg>
<svg class="i" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0116 0"/></svg></div>
</div></div></div>
</body></html>
📜 Git History
4a1a2fedesign(poli): lock editorial+chrome style guide & CSS tokens (chunk 1)11 days ago
Show last diff
Loading...