/* DankProxies V2 — public marketing surface (dankproxies.com/v2/).
*
* ┌─ WHY THIS FILE DUPLICATES THE PANEL'S DESIGN SYSTEM ──────────────────┐
* │ The panel is served from app.dankproxies.com and its CSS lives at │
* │ its own stylesheet bundle there. The marketing site is a different │
* │ host with `default-src 'self'`, so it cannot link the panel's │
* │ stylesheets — a cross-origin is exactly what the CSP exists to │
* │ stop. The only way for the two surfaces to look like one product is │
* │ to carry the same bytes on both hosts. │
* │ │
* │ SECTION 1 BELOW IS A VERBATIM COPY OF app/web/static/v2/tokens.css. │
* │ It must stay byte-identical: edit that file and re-copy it here in │
* │ the same commit, or the storefront and the dashboard drift apart the │
* │ way site/style.css and app/web/static/panel.css did before 7211e45. │
* │ │
* │ SECTION 2 is a verbatim subset of app/web/static/v2/components.css — │
* │ only the component families this page actually uses. Same rule: │
* │ copied, never forked. If a component here needs to change, it changes │
* │ in components.css first. │
* │ │
* │ SECTION 3 is the only original CSS in this file: the marketing-only │
* │ furniture (utility bar, marketing nav, hero, quote ticket, stat band, │
* │ generator preview, footer) that has no equivalent in the app shell. │
* └───────────────────────────────────────────────────────────────────────┘
*
* CSP: no @import, no external fonts, no url() to another origin. Every
* image referenced from here is a data: URI or a same-origin path.
*/
/* ═══════════════════════════════════════════════════════════════════════
SECTION 1 — TOKENS. Verbatim copy of app/web/static/v2/tokens.css.
Generated by scripts/sync_v2_site_css.py — do not edit in place.
═══════════════════════════════════════════════════════════════════════ */
/* DankProxies V2 — dark glass design system.
*
* Ported from the reference-site mechanics (glass surfaces, ambient mesh,
* tinted depth) onto the DankProxies identity: near-black ground, brand red,
* tight radii. Everything here is CSP-safe. `default-src 'self'` means
* font-src is 'self' too, so the display face is a system stack until a woff2
* is self-hosted — swap --font-display in one place when it is.
*/
/* Space Grotesk, self-hosted. SIL OFL 1.1 — see fonts/OFL.txt, which ships
* beside the files as the licence requires.
*
* Self-hosted rather than linked because `default-src 'self'` covers font-src:
* a Google Fonts does not load slowly here, it does not load at all.
*
* The src path is RELATIVE on purpose. This block is byte-copied into
* site/v2/v2-site.css, and the two stylesheets sit at different depths on
* different origins — /static/v2/tokens.css and /v2/v2-site.css — so an
* absolute path could only ever be right for one of them. `fonts/…` resolves
* correctly from both, given each origin carries its own copy of the files.
*
* One variable face covers 300-700, so weight changes cost no extra request.
* font-display:swap: the system stack renders immediately and is replaced when
* the 22 KB latin subset lands. */
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("fonts/space-grotesk-latin.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+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("fonts/space-grotesk-latin-ext.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-20AB, U+20AD-20C0, U+2113,
U+2C60-2C7F, U+A720-A7FF;
}
:root {
color-scheme: dark;
/* ---- ground ------------------------------------------------------- */
--bg: #08080a;
--bg-raise: #0d0d11; /* rails and wells: anything *under* glass */
--bg-sink: #050506; /* code panels, telemetry, inset surfaces */
/* ---- glass -------------------------------------------------------- */
/* One recipe, three weights. The inset white top-edge is what makes it read
as glass rather than as a flat grey box — do not drop it. */
--glass: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
--glass-hi: linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.030));
--glass-lo: linear-gradient(160deg, rgba(255,255,255,.032), rgba(255,255,255,.012));
--glass-blur: blur(22px) saturate(1.35);
--glass-edge: inset 0 1px 0 rgba(255,255,255,.075);
/* ---- lines -------------------------------------------------------- */
--line: rgba(255,255,255,.075); /* hairline: table rows, dividers */
--line-2: rgba(255,255,255,.13); /* chrome: inputs, ghost buttons */
--line-hot: rgba(217,26,34,.34); /* accent-tinted edge */
/* ---- ink ---------------------------------------------------------- */
/* Contrast against --bg, measured: text 17.9:1, muted 7.9:1, dim 4.9:1.
--dim carries the small uppercase labels (table headers, tile labels,
placeholders), so it has to clear 4.5:1 — the obvious #6e6e7a lands at
3.98 and quietly fails every one of them. */
--text: #f2f2f5;
--muted: #a2a2ae;
--dim: #7d7d8a;
/* ---- brand -------------------------------------------------------- */
--accent: #d91a22;
--accent-hi: #ff3b45;
--accent-deep: #8f0f16;
--accent-soft: rgba(217,26,34,.13);
--accent-glow: rgba(217,26,34,.42);
/* The fill gradient stops short of --accent-hi on purpose: white on #ff3b45
is 3.5:1, so a button label sitting on the light end would fail AA. This
ramp keeps white at 4.8:1 or better across the whole sweep, and the vivid
stop still appears in the glow and the hover sheen. */
--accent-grad: linear-gradient(135deg, #e01f28, #d91a22 45%, #a5121a);
/* ---- data / status ------------------------------------------------ */
/* Carried over from the Order IQ palette so that workspace stops being a
separate design system and starts being this one. */
--ok: #2fe1a7;
--warn: #f5a524;
--info: #32c8ff;
--violet: #9f8cff;
--ok-soft: rgba(47,225,167,.12);
--warn-soft: rgba(245,165,36,.12);
--info-soft: rgba(50,200,255,.12);
--violet-soft: rgba(159,140,255,.12);
/* ---- depth -------------------------------------------------------- */
/* Shadows are red-tinted, never neutral. That single choice is most of why
the surface reads as lit by the brand rather than as a grey card. */
--shadow: 0 30px 70px -34px rgba(217,26,34,.40), 0 2px 10px -4px rgba(0,0,0,.65);
--shadow-sm: 0 14px 34px -20px rgba(217,26,34,.34), 0 1px 4px -2px rgba(0,0,0,.55);
--shadow-lg: 0 48px 110px -40px rgba(217,26,34,.46), 0 4px 18px -6px rgba(0,0,0,.70);
--ring: 0 0 0 3px rgba(217,26,34,.28);
/* ---- geometry ----------------------------------------------------- */
--r: 14px; /* cards, panels */
--r-sm: 9px; /* inputs, buttons, chips */
--r-xs: 6px; /* pills, tiny badges */
--r-pill: 999px;
--maxw: 1320px;
--maxw-narrow: 980px;
--gutter: clamp(16px, 3vw, 32px);
--sidebar-w: 244px;
--sidebar-w-min: 68px;
--topbar-h: 60px;
/* ---- motion ------------------------------------------------------- */
--t-fast: 120ms cubic-bezier(.4,0,.2,1);
--t: 200ms cubic-bezier(.4,0,.2,1);
--t-slow: 420ms cubic-bezier(.22,1,.36,1);
--t-spring: 520ms cubic-bezier(.2,1.5,.4,1);
/* ---- type --------------------------------------------------------- */
/* Space Grotesk carries the display voice: headings, prices, stat values,
the wordmark's neighbours. The fallbacks matter — font-display:swap means
they are what renders for the first paint — so they are metric-adjacent
grotesques rather than a bare `sans-serif`.
Body text stays on the system UI stack: Space Grotesk is a display face
and gets tiring at 13px across a dense table. */
--font-display: "Space Grotesk", "Segoe UI Variable Display", "SF Pro Display",
Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-ui: "Segoe UI Variable Text", "SF Pro Text", Inter,
system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", "JetBrains Mono",
Consolas, "Liberation Mono", monospace;
/* A real scale, not 46 hand-tuned rem values. */
--fs-3xl: clamp(2.4rem, 5.2vw, 3.9rem);
--fs-2xl: clamp(1.85rem, 3.4vw, 2.6rem);
--fs-xl: clamp(1.35rem, 2.1vw, 1.72rem);
--fs-lg: 1.15rem;
--fs-md: 1rem;
--fs: .875rem;
--fs-sm: .8125rem;
--fs-xs: .75rem;
--fs-2xs: .6875rem;
}
/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.v2 {
margin: 0;
min-height: 100vh;
background: var(--bg);
color: var(--text);
font: 400 var(--fs)/1.6 var(--font-ui);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow-x: hidden;
}
/* Ambient mesh: five radial stops at low alpha, fixed to the viewport so it
behaves like light in the room rather than a background that scrolls away. */
body.v2::before {
content: "";
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background:
radial-gradient(58vw 42vw at 12% -8%, rgba(217,26,34,.16), transparent 62%),
radial-gradient(46vw 38vw at 92% 4%, rgba(255,59,69,.10), transparent 60%),
radial-gradient(52vw 44vw at 78% 88%, rgba(159,140,255,.055),transparent 64%),
radial-gradient(40vw 36vw at 8% 96%, rgba(50,200,255,.045), transparent 62%),
radial-gradient(90vw 70vw at 50% 42%, rgba(217,26,34,.035), transparent 70%);
}
/* Film grain: one inline SVG, no image request, kills the gradient banding
that large dark washes produce on 8-bit panels. */
body.v2::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: .5;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* The ambient layers sit at negative z-index rather than lifting every content
element to z-index 1. The obvious `body.v2 > * { position: relative }` looks
equivalent and is not: at (0,1,1) it outranks both `.v2-orbs` and
`.skip-link` at (0,1,0), stripping their positioning, dropping them into
flow, and shoving the whole app 22px down the page.
body's own background still paints behind all of this, because with no
background on it is propagated to the canvas. */
/* Three orbs, blurred hard, drifting slowly. They are what stops a dark page
from reading as a dead rectangle when nothing else is animating. */
.v2-orbs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.v2-orb {
position: absolute;
border-radius: 50%;
filter: blur(78px);
opacity: .5;
will-change: transform;
animation: orbDrift 22s ease-in-out infinite;
}
.v2-orb.a { width: 460px; height: 460px; top: -14%; left: -6%;
background: radial-gradient(circle, rgba(217,26,34,.55), transparent 68%); }
.v2-orb.b { width: 380px; height: 380px; top: 34%; right: -8%; animation-delay: -7s;
background: radial-gradient(circle, rgba(255,59,69,.34), transparent 68%); }
.v2-orb.c { width: 520px; height: 520px; bottom: -18%; left: 32%; animation-delay: -14s;
background: radial-gradient(circle, rgba(159,140,255,.22), transparent 70%); }
@keyframes orbDrift {
0%, 100% { transform: translate3d(0,0,0) scale(1); }
33% { transform: translate3d(38px,-30px,0) scale(1.09); }
66% { transform: translate3d(-26px,26px,0) scale(.94); }
}
/* ------------------------------------------------------------- typography */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -.022em;
line-height: 1.14;
margin: 0;
text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); letter-spacing: -.030em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); letter-spacing: -.015em; }
h4 { font-size: var(--fs-md); letter-spacing: -.010em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-hi); }
.mono, code, kbd, pre, .tabular {
font-family: var(--font-mono);
font-variant-ligatures: none;
}
.tnum { font-variant-numeric: tabular-nums; }
.display { font-family: var(--font-display); }
.hero-type {
font-family: var(--font-display);
font-size: var(--fs-3xl);
font-weight: 800;
letter-spacing: -.038em;
line-height: 1.02;
}
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.lead { color: var(--muted); font-size: var(--fs-md); line-height: 1.62; text-wrap: pretty; }
/* --accent on --bg is 4.1:1 — fine for large text, short of AA for the small
accent labels that appear everywhere, so emphasis text uses the light stop. */
.accent { color: var(--accent-hi); }
/* background-clip:text needs the explicit -webkit-text-fill-color or Safari
paints the solid colour straight over the gradient. */
.grad {
background: linear-gradient(96deg, #ff5d66, #d91a22 46%, #ff3b45);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Hand-underline, drawn rather than typed, scaling with the word. */
.ul { position: relative; white-space: nowrap; }
.ul::after {
content: "";
position: absolute;
left: -.04em; right: -.04em; bottom: -.06em;
height: .10em;
border-radius: var(--r-pill);
background: var(--accent-grad);
transform: scaleX(var(--ul-scale, 1));
transform-origin: left;
}
/* ------------------------------------------------------------------ focus */
:focus-visible {
outline: 2px solid var(--accent-hi);
outline-offset: 2px;
border-radius: var(--r-xs);
}
.skip-link {
position: absolute; left: -9999px;
background: var(--accent); color: #fff;
padding: 10px 16px; border-radius: var(--r-sm); z-index: 999;
}
.skip-link:focus { left: 12px; top: 12px; }
::selection { background: rgba(217,26,34,.35); color: #fff; }
/* --------------------------------------------------------- scroll reveal */
[data-reveal] {
opacity: 0;
transform: translateY(18px);
transition: opacity var(--t-slow), transform var(--t-slow);
transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
[data-reveal] { opacity: 1; transform: none; }
/* Anything whose only job is to move is removed, not merely frozen. */
.v2-orbs, body.v2::after { display: none; }
}
/* ------------------------------------------------------------- utilities */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.row-between{ display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wrap { flex-wrap: wrap; }
.g-4 { gap: 4px; } .g-6 { gap: 6px; } .g-8 { gap: 8px; }
.g-10 { gap: 10px; } .g-12 { gap: 12px; } .g-16 { gap: 16px; }
.g-20 { gap: 20px; } .g-24 { gap: 24px; } .g-32 { gap: 32px; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ═══════════════════════════════════════════════════════════════════════
SECTION 2 — COMPONENTS. Verbatim copy of app/web/static/v2/components.css.
Generated by scripts/sync_v2_site_css.py — do not edit in place.
The whole file is carried rather than a hand-picked subset: choosing a
subset means re-choosing it every time the page uses one more component,
and the few KB saved are not worth a second thing to keep in sync.
═══════════════════════════════════════════════════════════════════════ */
/* DankProxies V2 — component layer.
*
* Every component here is a single class family with no page-specific
* overrides. The old panel.css problem was four parallel design systems
* (.card / .oi-* / .customer-shell / .rental-*) sharing nothing; this file is
* the one shared layer they should all have been built on.
*/
/* =========================================================== 1. surfaces */
.card {
position: relative;
background: var(--glass);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow-sm), var(--glass-edge);
padding: 20px;
}
.card.pad-lg { padding: 28px; }
.card.pad-sm { padding: 14px; }
.card.flush { padding: 0; overflow: hidden; }
.card.hi { background: var(--glass-hi); }
.card.lo { background: var(--glass-lo); box-shadow: var(--glass-edge); }
.card.sink { background: var(--bg-sink); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Interactive cards get lift + an accent edge, never a colour flip. */
.card.link {
cursor: pointer;
transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.card.link:hover {
transform: translateY(-3px);
border-color: var(--line-hot);
box-shadow: var(--shadow), var(--glass-edge);
}
/* The top-edge accent hairline: a 1px gradient rule that fades at both ends.
Cheapest possible way to make a card feel deliberately placed. */
.card.edged::before {
content: "";
position: absolute;
top: -1px; left: 14%; right: 14%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-hi), transparent);
opacity: .75;
}
/* Cursor glare. v2.js writes --gx/--gy as a percentage of the card box; with
no JS the layer simply never becomes visible. */
.card.glare::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity var(--t);
background: radial-gradient(340px circle at var(--gx,50%) var(--gy,50%),
rgba(255,59,69,.10), transparent 62%);
}
.card.glare:hover::after { opacity: 1; }
.section { padding: clamp(56px, 8vw, 108px) 0; }
.section-tight { padding: clamp(36px, 5vw, 64px) 0; }
.container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.container.narrow { max-width: var(--maxw-narrow); }
/* Section boundary: a gradient hairline, brightest at the centre. */
.rule {
height: 1px;
border: 0;
margin: 0;
background: linear-gradient(90deg, transparent, var(--line-2) 22%, var(--line-hot) 50%, var(--line-2) 78%, transparent);
}
/* ============================================================ 2. eyebrow */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 12px 5px 10px;
border: 1px solid var(--line-hot);
border-radius: var(--r-pill);
background: var(--accent-soft);
color: var(--accent-hi);
font: 700 var(--fs-2xs)/1 var(--font-ui);
letter-spacing: .11em;
text-transform: uppercase;
}
.eyebrow .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 0 currentColor;
animation: pulseDot 2.4s ease-out infinite;
}
@keyframes pulseDot {
0% { box-shadow: 0 0 0 0 rgba(255,59,69,.55); }
70% { box-shadow: 0 0 0 7px rgba(255,59,69,0); }
100% { box-shadow: 0 0 0 0 rgba(255,59,69,0); }
}
.eyebrow.ok { border-color: rgba(47,225,167,.34); background: var(--ok-soft); color: var(--ok); }
.eyebrow.warn { border-color: rgba(245,165,36,.34); background: var(--warn-soft); color: var(--warn); }
.eyebrow.info { border-color: rgba(50,200,255,.34); background: var(--info-soft); color: var(--info); }
.eyebrow.plain { border-color: var(--line-2); background: rgba(255,255,255,.04); color: var(--muted); }
/* ============================================================ 3. buttons */
.btn {
--btn-bg: var(--glass);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 18px;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
background: var(--btn-bg);
color: var(--text);
font: 600 var(--fs)/1 var(--font-ui);
letter-spacing: -.005em;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transition: transform var(--t-fast), border-color var(--t-fast),
box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
/* Magnetic offset, written by v2.js. Absent JS it stays 0 and nothing moves. */
translate: var(--mx, 0) var(--my, 0);
}
.btn:hover { border-color: var(--line-hot); color: var(--text); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn[disabled], .btn.is-disabled {
opacity: .45; pointer-events: none; cursor: not-allowed;
}
/* Primary: gradient fill + red glow. The ::after is a brightness wipe that
only exists on hover, so the idle button costs nothing to composite. */
.btn.primary {
border-color: transparent;
background: var(--accent-grad);
color: #fff;
box-shadow: 0 10px 28px -12px var(--accent-glow), var(--glass-edge);
position: relative;
overflow: hidden;
}
.btn.primary:hover {
box-shadow: 0 16px 40px -14px var(--accent-glow), var(--glass-edge);
color: #fff;
}
.btn.primary::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28), transparent 70%);
transform: translateX(-120%);
transition: transform var(--t-slow);
}
.btn.primary:hover::after { transform: translateX(120%); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: rgba(255,255,255,.045); }
.btn.subtle { border-color: transparent; background: rgba(255,255,255,.045); }
.btn.subtle:hover { background: rgba(255,255,255,.08); border-color: var(--line-2); }
.btn.danger {
border-color: rgba(217,26,34,.4);
background: rgba(217,26,34,.14);
color: #ff8f95;
}
.btn.danger:hover { background: rgba(217,26,34,.22); color: #ffb4b8; }
.btn.sm { padding: 7px 13px; font-size: var(--fs-sm); border-radius: var(--r-xs); }
.btn.lg { padding: 14px 26px; font-size: var(--fs-md); border-radius: var(--r-sm); }
.btn.block { width: 100%; }
.btn.icon { padding: 9px; width: 36px; height: 36px; }
.btn svg { width: 16px; height: 16px; flex: none; }
/* Small square control used in toolbars and card headers. */
.icon-btn {
display: inline-grid;
place-items: center;
width: 34px; height: 34px;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
background: transparent;
color: var(--muted);
cursor: pointer;
transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.icon-btn:hover { color: var(--text); border-color: var(--line-hot); background: rgba(255,255,255,.045); }
.icon-btn svg { width: 17px; height: 17px; }
/* ============================================================== 4. pills */
.pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
border: 1px solid var(--line-2);
border-radius: var(--r-pill);
background: rgba(255,255,255,.04);
color: var(--muted);
font: 600 var(--fs-2xs)/1.5 var(--font-ui);
letter-spacing: .01em;
white-space: nowrap;
}
.pill::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
background: currentColor;
flex: none;
}
.pill.bare::before { display: none; }
.pill.ok { color: var(--ok); background: var(--ok-soft); border-color: rgba(47,225,167,.28); }
.pill.warn { color: var(--warn); background: var(--warn-soft); border-color: rgba(245,165,36,.28); }
.pill.info { color: var(--info); background: var(--info-soft); border-color: rgba(50,200,255,.28); }
.pill.danger { color: #ff8f95; background: var(--accent-soft); border-color: rgba(217,26,34,.30); }
.pill.violet { color: var(--violet); background: var(--violet-soft); border-color: rgba(159,140,255,.28); }
/* ========================================================== 5. stat tile */
.tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 14px;
}
.tile {
position: relative;
overflow: hidden;
padding: 18px 18px 16px;
background: var(--glass);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow-sm), var(--glass-edge);
transition: transform var(--t), border-color var(--t);
}
.tile:hover { transform: translateY(-2px); border-color: var(--line-2); }
.tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tile-label {
color: var(--dim);
font: 700 var(--fs-2xs)/1.4 var(--font-ui);
letter-spacing: .10em;
text-transform: uppercase;
}
.tile-icon {
display: grid; place-items: center;
width: 30px; height: 30px;
border-radius: var(--r-xs);
background: var(--accent-soft);
color: var(--accent-hi);
flex: none;
}
.tile-icon svg { width: 15px; height: 15px; }
.tile-icon.ok { background: var(--ok-soft); color: var(--ok); }
.tile-icon.info { background: var(--info-soft); color: var(--info); }
.tile-icon.warn { background: var(--warn-soft); color: var(--warn); }
.tile-value {
margin-top: 10px;
font-family: var(--font-display);
font-size: 1.9rem;
font-weight: 700;
letter-spacing: -.032em;
line-height: 1.05;
font-variant-numeric: tabular-nums;
}
.tile-value .unit { font-size: .5em; font-weight: 600; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.tile-sub { margin-top: 5px; color: var(--muted); font-size: var(--fs-sm); }
.tile-delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.tile-delta.up { color: var(--ok); }
.tile-delta.down { color: #ff8f95; }
/* A hairline progress rail across the bottom edge of the tile. */
.tile-rail { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.06); }
.tile-rail > i {
display: block; height: 100%;
background: var(--accent-grad);
border-radius: 0 var(--r-pill) var(--r-pill) 0;
transform-origin: left;
animation: railIn var(--t-slow) both;
}
.tile-rail.ok > i { background: linear-gradient(90deg, #1c9d76, var(--ok)); }
.tile-rail.warn > i { background: linear-gradient(90deg, #b97a12, var(--warn)); }
@keyframes railIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* ========================================================= 6. odometer */
/* Rolling-digit counter. Each digit is a 10-cell vertical strip translated by
-N*10%. With JS off the strip sits at 0, so markup ships the final value in
a .odo-static twin that JS hides — the number is never missing. */
.odo { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.odo-digit {
display: inline-block;
height: 1em;
overflow: hidden;
line-height: 1;
}
.odo-strip {
display: flex;
flex-direction: column;
transform: translateY(0);
transition: transform 1.15s cubic-bezier(.22,1,.36,1);
transition-delay: var(--odo-delay, 0ms);
}
.odo-strip > span { height: 1em; line-height: 1; display: block; }
.odo-sep { display: inline-block; }
/* ============================================================ 7. tables */
.table-wrap {
overflow-x: auto;
border-radius: var(--r);
-webkit-overflow-scrolling: touch;
}
table.t {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
}
/* thead th only. The blanket `table.t th` version made |
unusable — a row header would render as a dim uppercase label AND stick to
the top of the viewport as you scrolled past it. */
table.t thead th {
padding: 11px 14px;
text-align: left;
color: var(--dim);
font: 700 var(--fs-2xs)/1.4 var(--font-ui);
letter-spacing: .09em;
text-transform: uppercase;
white-space: nowrap;
border-bottom: 1px solid var(--line-2);
background: rgba(255,255,255,.02);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Sticky is opt-in, on the wrapper. A header that sticks inside a page that
scrolls rather than inside its own box floats over unrelated content and
slides under .topbar (z-index 35 against this 2). */
.table-wrap.sticky-head thead th { position: sticky; top: 0; z-index: 2; }
/* Row headers read as content, not as chrome. */
table.t tbody th {
padding: 12px 14px;
text-align: left;
font-weight: 600;
border-bottom: 1px solid var(--line);
vertical-align: middle;
}
table.t td {
padding: 12px 14px;
border-bottom: 1px solid var(--line);
vertical-align: middle;
}
table.t tbody tr { transition: background var(--t-fast); }
table.t tbody tr:hover { background: rgba(255,255,255,.028); }
table.t tbody tr:last-child td { border-bottom: 0; }
table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.t td.mono { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }
table.t.dense td { padding: 8px 12px; }
/* ======================================================== 8. empty state */
/* One empty state, not two. The icon sits in a tinted disc with a soft ring;
the CTA is always present so a dead-end screen never actually dead-ends. */
.empty {
display: grid;
place-items: center;
gap: 6px;
padding: 52px 24px;
text-align: center;
}
.empty-icon {
display: grid; place-items: center;
width: 52px; height: 52px;
margin-bottom: 8px;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent-hi);
box-shadow: 0 0 0 8px rgba(217,26,34,.055);
}
.empty-icon svg { width: 22px; height: 22px; }
.empty h3 { font-size: var(--fs-lg); }
.empty p { color: var(--muted); max-width: 44ch; }
.empty .btn { margin-top: 10px; }
/* ========================================================== 9. code/mono */
.code {
position: relative;
background: var(--bg-sink);
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
font-family: var(--font-mono);
font-size: var(--fs-xs);
line-height: 1.7;
color: #d6d6de;
overflow: auto;
}
.code-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 12px;
border-bottom: 1px solid var(--line);
background: rgba(255,255,255,.022);
position: sticky;
left: 0;
}
.code-body { padding: 12px 14px; margin: 0; white-space: pre; }
.code .tok-c { color: var(--dim); } /* comment */
.code .tok-s { color: #9ee6c0; } /* string */
.code .tok-k { color: #ff8f95; } /* keyword */
.code .tok-n { color: var(--info); } /* number */
/* Single-line copyable value: gateway host, credential line, API key. */
.copyfield {
display: flex;
align-items: stretch;
gap: 0;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
background: var(--bg-sink);
overflow: hidden;
}
.copyfield input, .copyfield .val {
flex: 1 1 auto;
min-width: 0;
padding: 10px 12px;
border: 0;
background: transparent;
color: var(--text);
font-family: var(--font-mono);
font-size: var(--fs-xs);
overflow-x: auto;
white-space: nowrap;
}
.copyfield input:focus { outline: none; }
.copyfield .btn {
border: 0;
border-left: 1px solid var(--line);
border-radius: 0;
background: rgba(255,255,255,.035);
}
.copyfield .btn:hover { background: rgba(255,255,255,.075); transform: none; }
/* Copy confirmation, driven by a data attribute so it needs no extra node. */
[data-copy] { position: relative; }
[data-copy].copied::after {
content: "Copied";
position: absolute;
top: 50%; right: calc(100% + 8px);
transform: translateY(-50%);
padding: 3px 8px;
border-radius: var(--r-xs);
background: var(--ok);
color: #04120d;
font: 700 var(--fs-2xs)/1.4 var(--font-ui);
white-space: nowrap;
animation: copiedIn 180ms cubic-bezier(.2,1.5,.4,1);
}
@keyframes copiedIn { from { opacity: 0; transform: translateY(-50%) scale(.8); } }
/* ============================================================= 10. forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
color: var(--text);
font: 600 var(--fs-sm)/1.4 var(--font-ui);
}
.field .hint { color: var(--dim); font-size: var(--fs-xs); line-height: 1.5; }
.field .err { color: #ff8f95; font-size: var(--fs-xs); }
.input, select.input, textarea.input {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
background: rgba(0,0,0,.28);
color: var(--text);
font: 400 var(--fs)/1.5 var(--font-ui);
transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
appearance: none;
}
.input::placeholder { color: var(--dim); }
.input:hover { border-color: rgba(255,255,255,.2); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); background: rgba(0,0,0,.38); }
.input:disabled { opacity: .5; cursor: not-allowed; }
/* An invalid field has to look invalid, not merely have a red sentence
underneath it that a sighted user may never connect to the control. */
.input[aria-invalid="true"], .input.is-error {
border-color: #ff6b73;
box-shadow: 0 0 0 3px rgba(255,59,69,.14);
}
.input.mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.6; }
/* Native select needs its own chevron once appearance is stripped. */
select.input {
padding-right: 34px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 11px center;
background-size: 15px;
}
select.input option { background: #131318; color: var(--text); }
.check { display: inline-flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.check input {
appearance: none;
width: 17px; height: 17px;
margin: 1px 0 0;
flex: none;
border: 1px solid var(--line-2);
border-radius: 5px;
background: rgba(0,0,0,.3);
cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast);
}
/* Layer order matters: the first background layer paints on TOP. The tick has
to come first or the gradient covers it and a checked box renders as a
plain red square. */
.check input:checked {
background:
url("data:image/svg+xml;utf8,") center / 13px no-repeat,
var(--accent-grad);
border-color: transparent;
}
/* Radio variant: same control, round, and a dot instead of a tick. */
.check.radio input { border-radius: 50%; }
.check.radio input:checked {
background:
radial-gradient(circle at 50% 50%, #fff 0 3.2px, transparent 3.4px),
var(--accent-grad);
}
/* Segmented control — the product/range tab bar. */
.seg {
display: inline-flex;
gap: 3px;
padding: 3px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: rgba(0,0,0,.28);
}
.seg > * {
padding: 7px 14px;
border: 0;
border-radius: var(--r-xs);
background: transparent;
color: var(--muted);
font: 600 var(--fs-sm)/1.2 var(--font-ui);
cursor: pointer;
white-space: nowrap;
transition: color var(--t-fast), background var(--t-fast);
}
.seg > *:hover { color: var(--text); background: rgba(255,255,255,.05); }
.seg > .is-on, .seg > [aria-selected="true"] {
background: var(--accent-soft);
color: var(--accent-hi);
box-shadow: inset 0 0 0 1px rgba(217,26,34,.3);
}
/* Fill the container and share the width evenly, for a control that spans a
card rather than sitting inline in a toolbar. */
.seg.block { display: flex; width: 100%; }
.seg.block > * { flex: 1 1 0; text-align: center; padding-inline: 8px; }
/* Range slider — both engines need explicit thumb styling. */
.range { width: 100%; height: 22px; background: transparent; appearance: none; cursor: pointer; }
.range::-webkit-slider-runnable-track {
height: 5px; border-radius: var(--r-pill);
background: linear-gradient(90deg, var(--accent) var(--range-pct, 0%), rgba(255,255,255,.1) var(--range-pct, 0%));
}
.range::-moz-range-track { height: 5px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); }
.range::-moz-range-progress { height: 5px; border-radius: var(--r-pill); background: var(--accent); }
.range::-webkit-slider-thumb {
appearance: none;
width: 17px; height: 17px;
margin-top: -6px;
border: 2px solid var(--accent-hi);
border-radius: 50%;
background: #14141a;
box-shadow: 0 0 0 4px rgba(217,26,34,.16), 0 2px 8px rgba(0,0,0,.6);
transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.range::-moz-range-thumb {
width: 17px; height: 17px;
border: 2px solid var(--accent-hi);
border-radius: 50%;
background: #14141a;
box-shadow: 0 0 0 4px rgba(217,26,34,.16);
}
.range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 7px rgba(217,26,34,.2), 0 2px 8px rgba(0,0,0,.6); }
.range:active::-webkit-slider-thumb { transform: scale(1.12); }
/* ============================================================ 11. alerts */
.alert {
display: flex;
gap: 11px;
padding: 13px 15px;
border: 1px solid var(--line-2);
border-left-width: 3px;
border-radius: var(--r-sm);
background: rgba(255,255,255,.035);
font-size: var(--fs-sm);
line-height: 1.6;
}
.alert svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.alert strong { display: block; margin-bottom: 2px; font-weight: 650; }
.alert.ok { border-left-color: var(--ok); background: var(--ok-soft); color: #b6f2dc; }
.alert.warn { border-left-color: var(--warn); background: var(--warn-soft); color: #f7dda8; }
.alert.info { border-left-color: var(--info); background: var(--info-soft); color: #b3e9ff; }
.alert.danger { border-left-color: var(--accent); background: var(--accent-soft); color: #ffbabe; }
/* ============================================================ 12. toasts */
/* The panel has no toast at all today: every mutation is a POST→303 reload
with no confirmation. This is the surface for that. */
.toasts {
position: fixed;
right: 18px; bottom: 18px;
z-index: 90;
display: flex;
flex-direction: column;
gap: 9px;
pointer-events: none;
}
.toast {
display: flex;
align-items: center;
gap: 10px;
min-width: 250px;
max-width: 380px;
padding: 12px 15px;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
background: rgba(19,19,24,.94);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--shadow-lg), var(--glass-edge);
font-size: var(--fs-sm);
pointer-events: auto;
animation: toastIn 320ms cubic-bezier(.2,1.4,.4,1);
}
.toast.out { animation: toastOut 200ms ease-in forwards; }
.toast svg { width: 17px; height: 17px; flex: none; }
.toast.ok svg { color: var(--ok); }
.toast.danger svg { color: var(--accent-hi); }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(24px); } }
/* ========================================================== 13. skeleton */
.skel {
border-radius: var(--r-xs);
background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.04) 63%);
background-size: 400% 100%;
animation: shimmer 1.5s linear infinite;
}
.skel.line { height: 11px; margin: 6px 0; }
.skel.line.w60 { width: 60%; }
.skel.line.w40 { width: 40%; }
@keyframes shimmer { to { background-position: -135% 0; } }
/* ========================================================= 14. accordion */
.acc { border-bottom: 1px solid var(--line); }
.acc > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 2px;
cursor: pointer;
list-style: none;
font-weight: 600;
transition: color var(--t-fast);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { color: var(--accent-hi); }
.acc > summary .chev {
flex: none;
width: 17px; height: 17px;
color: var(--accent-hi);
transition: transform var(--t);
}
.acc[open] > summary .chev { transform: rotate(180deg); }
.acc-body { padding: 0 2px 18px; color: var(--muted); line-height: 1.7; max-width: 70ch; }
/* ========================================================== 15. telemetry */
/* Dark inset instrument panel: the one place in the design where contrast is
deliberately maximal, because it reads as a readout rather than a card. */
.telemetry {
background: var(--bg-sink);
border: 1px solid var(--line-2);
border-radius: var(--r);
padding: 16px;
font-family: var(--font-mono);
}
.telemetry-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 13px;
font-size: var(--fs-2xs);
letter-spacing: .13em;
text-transform: uppercase;
color: var(--dim);
}
.telemetry-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
padding: 6px 0;
font-size: var(--fs-xs);
}
.telemetry-row .k { color: var(--muted); }
.telemetry-row .v { color: var(--text); font-variant-numeric: tabular-nums; }
.meter { height: 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.07); overflow: hidden; }
.meter > i {
display: block; height: 100%;
border-radius: inherit;
background: var(--accent-grad);
transform-origin: left;
animation: railIn 900ms cubic-bezier(.22,1,.36,1) both;
}
.meter.ok > i { background: linear-gradient(90deg, #1c9d76, var(--ok)); }
.meter.warn > i { background: linear-gradient(90deg, #b97a12, var(--warn)); }
.meter.info > i { background: linear-gradient(90deg, #1d7fa3, var(--info)); }
/* ============================================================ 16. charts */
/* Pure-SVG bar/area charts. No Chart.js: `script-src 'self'` blocks the CDN
and self-hosting 200 KB for six charts is not a trade worth making. */
.chart { width: 100%; display: block; overflow: visible; }
.chart .grid line { stroke: rgba(255,255,255,.055); stroke-width: 1; }
.chart .axis text { fill: var(--dim); font-size: 10px; font-family: var(--font-ui); }
/* No `fill` here: each chart instance owns a uniquely-named gradient and sets
it as a presentation attribute. A CSS `fill` would outrank that attribute
and point every chart at one shared id, which only the first chart on a
page actually defines. */
.chart .bar {
transform-origin: bottom;
animation: barIn 620ms cubic-bezier(.22,1,.36,1) both;
transition: opacity var(--t-fast);
}
.chart .bar:hover { opacity: .75; }
/* Area charts are hand-authored; give each one its own gradient id and set it
as a `fill` presentation attribute on the path, the way the bar renderer
does. A CSS rule here would pin every area chart on the page to one shared
id that only the first chart defines. */
.chart .area { fill-opacity: 1; }
.chart .line { fill: none; stroke: var(--accent-hi); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
@keyframes barIn { from { transform: scaleY(0); } }
.chart-tip {
position: absolute;
z-index: 20;
padding: 7px 10px;
border: 1px solid var(--line-2);
border-radius: var(--r-xs);
background: rgba(15,15,19,.96);
box-shadow: var(--shadow-sm);
font-size: var(--fs-xs);
pointer-events: none;
white-space: nowrap;
opacity: 0;
transition: opacity var(--t-fast);
}
.chart-tip.on { opacity: 1; }
.chart-wrap { position: relative; }
/* ============================================================ 17. ticker */
/* Seamless loop requires TWO identical .ticker-track children — the keyframe
translates one full track width, so a single track leaves a visible gap on
every wrap. Mark the duplicate aria-hidden so the content is announced once. */
.ticker {
display: flex;
overflow: hidden;
border-block: 1px solid var(--line);
background: rgba(255,255,255,.02);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track {
display: flex;
gap: 34px;
/* Trailing padding, not a gap on .ticker: the keyframe translates one full
track width, and that width includes this padding — so the seam between
the last item of one track and the first of the next gets the same 34px
as every other gap, and the loop still lands exactly. A gap on .ticker
would fall outside the translated distance and make the marquee drift. */
padding: 11px 34px 11px 0;
flex: none;
min-width: 100%;
animation: marquee var(--marquee-dur, 46s) linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track.rev { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-100%); } }
.ticker-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--fs-xs);
color: var(--muted);
white-space: nowrap;
}
/* ========================================================= 18. dialog */
dialog.v2-dialog {
width: min(560px, calc(100vw - 32px));
padding: 0;
border: 1px solid var(--line-2);
border-radius: var(--r);
background: rgba(17,17,21,.97);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
color: var(--text);
box-shadow: var(--shadow-lg);
}
dialog.v2-dialog::backdrop { background: rgba(4,4,6,.72); backdrop-filter: blur(4px); }
.dialog-head { padding: 18px 20px 0; }
.dialog-body { padding: 12px 20px 20px; color: var(--muted); line-height: 1.65; }
.dialog-foot {
display: flex; justify-content: flex-end; gap: 9px;
padding: 14px 20px;
border-top: 1px solid var(--line);
background: rgba(255,255,255,.02);
}
/* ======================================================= 19. page header */
.page-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.page-head h1 { font-size: clamp(1.6rem, 2.6vw, 2.05rem); }
.page-head .lead { margin-top: 5px; font-size: var(--fs); }
.page-actions { display: flex; gap: 9px; flex-wrap: wrap; }
/* ========================================================== 20. sections */
.panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.panel-head h2, .panel-head h3 { font-size: var(--fs-md); }
.panel-head .sub { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
/* ============================================================ 21. grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px; }
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.82fr); gap: 20px; align-items: start; }
.split-side { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 20px; align-items: start; }
/* ================================================== 22. icon safety net */
/* An inline |