/* ═══════════════════════════════════════════════════════════ Shared shell: tokens, water background, topbar, logos, section heads, state boxes, chart card, segmented control. Used by index.html and pair.html. ═══════════════════════════════════════════════════════════ */ :root { --bg: #0a0a0d; --bg-2: #111114; --panel: #16161b; --panel-2: #1c1c22; --line: #25252d; --line-2: #34343d; --ink: #f4f4f6; --ink-2: #b8b8c0; --ink-3: #75757e; --ink-4: #45454d; --pos: #5dd99b; --pos-soft: rgba(93,217,155,0.12); --neg: #f06453; --neg-soft: rgba(240,100,83,0.12); --accent: #ffffff; --accent-2: #6db5ff; /* ── Flowing-water background blobs (dark navy → deep blue) ── */ --flow-1: rgba(16, 32, 60, 0.52); /* dark navy */ --flow-2: rgba(20, 42, 78, 0.44); /* dark blue */ --flow-3: rgba(30, 60, 108, 0.13); /* subtle blue accent */ } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; font-style: normal; } /* Base color lives ONLY on ; body stays transparent so the fixed water layer (body::before, z-index:-1) is never covered by body's own bg. */ html { background: var(--bg); } body { background: transparent; } /* ── Flowing-water ambient background ── CSS-only, GPU-composited (transform/opacity only), no JS. Sits behind all content; opaque panels/topbar keep full contrast. */ body::before { content: ''; position: fixed; inset: -20%; /* overscan so blobs never expose edges */ z-index: -1; pointer-events: none; background: radial-gradient(15% 16% at 14% 28%, var(--flow-1) 0%, transparent 60%), radial-gradient(13% 14% at 38% 66%, var(--flow-2) 0%, transparent 58%), radial-gradient(12% 13% at 66% 20%, var(--flow-1) 0%, transparent 58%), radial-gradient(16% 15% at 86% 58%, var(--flow-2) 0%, transparent 58%), radial-gradient(11% 12% at 54% 44%, var(--flow-3) 0%, transparent 56%); filter: blur(34px); will-change: transform; animation: flow-a 15s ease-in-out infinite alternate; } body::after { content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none; background: radial-gradient(14% 15% at 26% 52%, var(--flow-2) 0%, transparent 58%), radial-gradient(12% 13% at 72% 38%, var(--flow-1) 0%, transparent 58%), radial-gradient(15% 14% at 48% 84%, var(--flow-2) 0%, transparent 58%), radial-gradient(11% 12% at 90% 12%, var(--flow-3) 0%, transparent 56%), radial-gradient(12% 13% at 8% 78%, var(--flow-1) 0%, transparent 58%); filter: blur(38px); will-change: transform, opacity; animation: flow-b 19s ease-in-out infinite alternate; } @keyframes flow-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(8%, -6%, 0) scale(1.18); } } @keyframes flow-b { 0% { transform: translate3d(0, 0, 0) scale(1.1); opacity: 0.8; } 100% { transform: translate3d(-9%, 7%, 0) scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } } body { font-family: 'Geist', ui-sans-serif, sans-serif; color: var(--ink); font-size: 14px; line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent); color: var(--bg); } .num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; } /* ── Top bar ── */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; border-bottom: 1px solid rgba(255,255,255,0.05); background: rgba(10, 10, 13, 0.45); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); position: sticky; top: 0; z-index: 50; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: #0a0a0d; display: grid; place-items: center; font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 17px; letter-spacing: -0.04em; } .brand-name { font-family: 'Bricolage Grotesque'; font-weight: 600; font-size: 18px; letter-spacing: -0.025em; color: var(--ink); } .brand-tag { font-family: 'JetBrains Mono'; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); border-left: 1px solid var(--line); padding-left: 12px; margin-left: 4px; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); color: var(--ink-2); flex-shrink: 0; transition: border-color 0.15s, color 0.15s; } .social-link:hover { border-color: var(--accent); color: var(--accent); } /* Cross-page navigation. Solid so it reads as the primary action in a bar that is otherwise icons and wordmark. */ .nav-link { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 15px; border-radius: 999px; background: var(--accent); color: #0a0a0d; text-decoration: none; border: 1px solid var(--accent); flex-shrink: 0; font-family: 'JetBrains Mono'; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; transition: background 0.15s, color 0.15s; } .nav-link::after { content: '→'; font-size: 12px; } .nav-link:hover { background: transparent; color: var(--accent); } /* ── Main ── */ main { max-width: 1280px; margin: 0 auto; padding: 28px 24px 80px; } /* ── Section heads ── */ .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; } .section-title { font-family: 'Bricolage Grotesque'; font-weight: 600; font-size: 28px; letter-spacing: -0.025em; line-height: 1; color: var(--ink); } .section-sub { font-family: 'JetBrains Mono'; font-size: 11px; color: var(--ink-3); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px; } .section-side { font-family: 'JetBrains Mono'; font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; text-align: right; line-height: 1.6; } /* ── State boxes ── */ .state-box { border: 1px solid var(--line); border-radius: 14px; padding: 48px 24px; text-align: center; color: var(--ink-3); font-family: 'JetBrains Mono'; font-size: 12px; margin-bottom: 36px; } .state-box.error { border-color: rgba(240,100,83,0.4); color: var(--neg); background: var(--neg-soft); } .state-icon { font-size: 28px; display: block; margin-bottom: 12px; } /* ── Logos ── */ /* SVG rendered as a single-color silhouette via CSS mask. */ .logo { width: 22px; height: 22px; flex-shrink: 0; background-color: var(--ink-2); -webkit-mask: var(--logo-url) center/contain no-repeat; mask: var(--logo-url) center/contain no-repeat; } .logo.large { width: 28px; height: 28px; } .logo.tiny { width: 16px; height: 16px; } .logo.xl { width: 36px; height: 36px; } /* Fallback monogram */ .logo-fallback { width: 22px; height: 22px; flex-shrink: 0; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-2); display: inline-grid; place-items: center; font-family: 'JetBrains Mono'; font-size: 9px; font-weight: 600; letter-spacing: -0.04em; text-transform: uppercase; } .logo-fallback.large { width: 28px; height: 28px; font-size: 10px; } .logo-fallback.tiny { width: 16px; height: 16px; font-size: 7px; } .logo-fallback.xl { width: 36px; height: 36px; font-size: 13px; } /* ── Venue links ── */ /* Outbound links to the venues wear the colour of whatever names them, so a linked exchange reads as text until it is hovered. Layout stays with the caller's own class; this rule only owns colour. */ .venue-link { color: inherit; text-decoration: none; } .venue-link:hover { color: var(--accent-2); } .venue-link:hover .logo { background-color: var(--accent-2); } /* ── Chart card ── */ .chart-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 24px 28px 28px; margin-bottom: 36px; } .chart-controls { display: flex; gap: 8px; align-items: center; } .chart-canvas-wrap { position: relative; height: 480px; } /* ── Segmented control ── */ .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--bg-2); } .seg button { background: transparent; border: none; font-family: 'JetBrains Mono'; font-size: 11px; color: var(--ink-3); padding: 6px 12px; border-radius: 999px; cursor: pointer; letter-spacing: 0.06em; text-transform: uppercase; } .seg button.on { background: var(--accent); color: #0a0a0d; } /* ── Value colors ── */ .pos { color: var(--pos); } .neg { color: var(--neg); } .zero, .na { color: var(--ink-4); } @media (max-width: 880px) { .topbar { padding: 14px 18px; } main { padding: 20px 16px 60px; } .chart-canvas-wrap { height: 360px; } }