/* ═══════════════════════════════════════════════════════════════ PROTOTYPE SKIN — scratch/ia/elv-skin.css The landing (`--elv-*`) design language applied to authenticated app surfaces. Shared by sources-v2.html + source-detail-v2.html so the two pages prove they're one system. This file is the SHAPE of the proposed "skin bridge" CR: a palette source of truth, app tokens aliased onto it, plus the two token families the landing never needed (radius scale, semantic status). Nothing here is wired to user.css yet. ═══════════════════════════════════════════════════════════════ */ @font-face { font-family:'Manrope'; src:url('static/fonts/manrope-600.woff2') format('woff2'); font-weight:200 800; font-style:normal; font-display:swap; } @font-face { font-family:'Public Sans'; src:url('static/fonts/public-sans-400.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; } @font-face { font-family:'IBM Plex Mono'; src:url('static/fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight:100 700; font-style:normal; font-display:swap; } /* ── palette · dark is default ─────────────────────────────────── */ :root { --elv-bg:#080b14; --elv-surface:#161e30; --elv-surface-2:#0f1624; --elv-border:#2b3852; --elv-border-2:#3c4a67; --elv-ink:#f4f7fd; --elv-ink-2:#c6cfe0; --elv-ink-3:#93a0b8; --elv-muted:#818fa6; --elv-accent:#6e8aff; --elv-accent-2:#8aa0ff; --elv-accent-soft:rgba(110,138,255,.20); --elv-on-accent:#ffffff; /* SEMANTIC status — deliberately off the periwinkle axis so a state never reads as the brand. Desaturated to sit on navy. */ --st-ok:#4bb98a; --st-warn:#dfa03c; --st-bad:#ef6a72; --st-off:#5d6b85; --st-ok-soft:rgba(75,185,138,.14); --st-warn-soft:rgba(223,160,60,.14); --st-bad-soft:rgba(239,106,114,.14); --st-off-soft:rgba(93,107,133,.16); --elv-shadow:0 1px 2px rgba(0,0,0,.55), 0 12px 34px -14px rgba(0,0,0,.7); } /* LIGHT — re-derived for dense UI, NOT inherited from the landing. The landing's light values were tuned for a marketing page: huge display type, lots of air, almost no chrome. Dense app surfaces are the opposite — 10–11px mono microtext, hairline separators and tinted fills doing real work — and the muted end of that ramp collapsed. Measured failures it fixes: · muted #9aa4b6 on ground = 2.43:1 — and it carried hostnames, timestamps, column headers, every eyebrow. Now 5.00:1. · ground→card was dL* 1.4 where dark is 8.3 — six times flatter, so nothing read as elevated. Now 4.5 with a dL* 15.3 border (dark: 16.3) carrying the rest of the separation. · tint fills sat at .09–.14 alpha on near-white: the yield chart and every status pill were effectively invisible. Now explicit tints, dL* 3.6–5.3 from ground. Structure mirrors dark: chrome sits BELOW the ground, content cards ABOVE it. Every text token clears 4.5:1 on ground AND card. */ /* LIGHT — matches what actually shipped in user.css. Declared on `html.light` as well as `body.light`: paints the canvas and is the PARENT of , and custom properties inherit downward only — declare the palette solely on body and the canvas (below the footer, the overscroll area) stays dark. That bug shipped once; the mockups keep the corrected shape so they don't teach it. An earlier revision of this file carried a denser ramp (ground #f0f2f7, borders #ccd4e3, accent #2f4ae6) derived for 10-11px app microtext. It was wrong for marketing-weight surfaces and was reverted in production; only the two darkened TEXT tokens were kept, which is all the measured contrast failure ever required. */ html.light, body.light { --elv-bg:#fafbfd; --elv-surface:#ffffff; --elv-surface-2:#f1f4fb; --elv-border:#e2e7f0; --elv-border-2:#cdd5e4; --elv-ink:#0c1220; --elv-ink-2:#454f63; --elv-ink-3:#46516a; /* darkened for AA (was #6a7488) */ --elv-muted:#5c6880; /* darkened for AA: 2.43:1 -> 5.41:1 (was #9aa4b6) */ --elv-accent:#3b5bff; --elv-accent-2:#2b44e0; --elv-accent-soft:#eaefff; --st-ok:#0f7057; --st-warn:#8a5a0b; --st-bad:#b52b35; --st-off:#5c6880; --st-ok-soft:#d3ece1; --st-warn-soft:#f6e6cb; --st-bad-soft:#fadde0; --st-off-soft:#e3e7ef; --elv-shadow:0 1px 2px rgba(12,18,32,.04), 0 10px 30px -14px rgba(12,18,32,.14); } /* ── type + geometry · theme-independent, so written once ──────── */ :root { --display:'Manrope', ui-sans-serif, system-ui, sans-serif; --mono:'IBM Plex Mono', ui-monospace, "SFMono-Regular", Menlo, monospace; --body:'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --r-sm:2px; --r-md:4px; --r-lg:8px; --r-pill:999px; } *{margin:0;padding:0;box-sizing:border-box} body{ background:var(--elv-bg); color:var(--elv-ink-2); font-family:var(--body); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,h5,h6{font-family:var(--display);font-weight:500;color:var(--elv-ink);letter-spacing:-.005em} a{color:inherit;text-decoration:none} button,select,input,textarea{font:inherit;color:inherit} code{font-family:var(--mono);font-size:.92em} :focus-visible{outline:2px solid var(--elv-accent);outline-offset:2px;border-radius:var(--r-sm)} /* ── app frame (context only — the real sidebar keeps its markup) ─ */ .shell{display:grid;grid-template-columns:212px 1fr;min-height:100vh} .side{ border-right:1px solid var(--elv-border); background:var(--elv-surface-2); padding:18px 0; display:flex; flex-direction:column; gap:22px; } .side__mark{font-family:var(--display);font-weight:700;letter-spacing:.14em;font-size:15px;color:var(--elv-ink);padding:0 18px} .side__group{display:flex;flex-direction:column;gap:1px} .side__label{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--elv-muted);padding:0 18px 6px} .side__item{padding:6px 18px;color:var(--elv-ink-3);font-size:13.5px} .side__item:hover{color:var(--elv-ink)} .side__item[aria-current]{color:var(--elv-ink);background:var(--elv-accent-soft);box-shadow:inset 2px 0 0 var(--elv-accent)} .main{min-width:0;display:flex;flex-direction:column} /* ── zone 1 · page identity ────────────────────────────────────── */ .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 28px;border-bottom:1px solid var(--elv-border)} .bar__id{display:flex;align-items:baseline;gap:10px;min-width:0} .bar__title{font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:.04em;color:var(--elv-ink)} .bar__sub{font-family:var(--mono);font-size:11px;color:var(--elv-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bar__tools{display:flex;gap:8px;align-items:center} /* ── controls ──────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-sm); border:1px solid var(--elv-border);background:var(--elv-surface);color:var(--elv-ink-2); font-size:13px;cursor:pointer;white-space:nowrap; } .btn:hover{border-color:var(--elv-border-2);color:var(--elv-ink)} .btn--primary{background:var(--elv-accent);border-color:var(--elv-accent);color:var(--elv-on-accent);font-family:var(--display);font-weight:500;letter-spacing:.02em} .btn--primary:hover{background:var(--elv-accent-2);border-color:var(--elv-accent-2);color:var(--elv-on-accent)} .btn--ghost{background:none;border-color:transparent;color:var(--elv-ink-3)} .btn--ghost:hover{background:var(--elv-surface);color:var(--elv-ink)} .btn--danger{color:var(--st-bad);border-color:var(--st-bad-soft);background:var(--st-bad-soft)} .btn--danger:hover{border-color:var(--st-bad);color:var(--st-bad)} .btn--sm{padding:4px 9px;font-size:12px} .search{position:relative;flex:1 1 240px;max-width:340px} .search input{width:100%;background:var(--elv-bg);border:1px solid var(--elv-border);border-radius:var(--r-sm);padding:7px 10px 7px 30px;font-size:13.5px;color:var(--elv-ink)} .search input::placeholder{color:var(--elv-muted)} .search svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--elv-muted)} .seg{display:inline-flex;border:1px solid var(--elv-border);border-radius:var(--r-sm);overflow:hidden} .seg button{background:none;border:0;padding:6px 12px;font-size:13px;color:var(--elv-ink-3);cursor:pointer;border-left:1px solid var(--elv-border)} .seg button:first-child{border-left:0} .seg button:hover{color:var(--elv-ink)} .seg button[aria-pressed="true"]{background:var(--elv-accent-soft);color:var(--elv-ink);box-shadow:inset 0 -2px 0 var(--elv-accent)} .seg .n{font-family:var(--mono);font-size:11px;margin-left:6px;color:var(--elv-muted);font-variant-numeric:tabular-nums} .sel{background:var(--elv-bg);border:1px solid var(--elv-border);border-radius:var(--r-sm);padding:7px 9px;font-size:13px;color:var(--elv-ink-2)} .grow{flex:1 1 auto} /* ── shared vocabulary ─────────────────────────────────────────── */ .chip{ font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase; padding:1px 6px;border-radius:var(--r-sm);border:1px solid var(--elv-border); color:var(--elv-ink-3);white-space:nowrap; } .chip--org{color:var(--elv-accent);border-color:var(--elv-accent-soft);background:var(--elv-accent-soft)} .pill{ display:inline-flex;align-items:center;gap:5px; font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase; padding:3px 8px;border-radius:var(--r-pill);white-space:nowrap; } .pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor} .pill--ok{color:var(--st-ok);background:var(--st-ok-soft)} .pill--warn{color:var(--st-warn);background:var(--st-warn-soft)} .pill--bad{color:var(--st-bad);background:var(--st-bad-soft)} .pill--off{color:var(--st-off);background:var(--st-off-soft)} .pill--flat::before{display:none} .when{font-family:var(--mono);font-size:11px;color:var(--elv-muted);white-space:nowrap;font-variant-numeric:tabular-nums} .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--elv-muted)} /* section rule — a labelled divider, used instead of card chrome */ .rule{display:flex;align-items:center;gap:10px;padding:26px 0 10px} .rule__t{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--elv-ink-3)} .rule__t--warn{color:var(--st-warn)} .rule__t--bad{color:var(--st-bad)} .rule__line{flex:1 1 auto;height:1px;background:var(--elv-border)} .rule__n{font-family:var(--mono);font-size:10.5px;color:var(--elv-muted);font-variant-numeric:tabular-nums} .note{ margin:26px 28px;padding:14px 16px;border:1px dashed var(--elv-border-2); border-radius:var(--r-sm);color:var(--elv-ink-3);font-size:12.5px;max-width:78ch; } .note b{color:var(--elv-ink-2)} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} @media (max-width:900px){ .shell{grid-template-columns:1fr} .side{display:none} }