/* ────────────────────────────────────────────────────────────────────────── Omenly Dashboard — Design System ────────────────────────────────────────────────────────────────────────── Foundation file (Step 1). Contains tokens, reset, base body styles, app shell (sidebar + main area), top bar, status indicator, and shared animations/utility classes. Component-level styles (alert cards, stat cards, future feed items, map, donut, etc.) are added in subsequent steps. Conventions: • All colors and surfaces come from CSS custom properties in :root. No raw hex anywhere outside that block. To rebrand or add a light theme later, override the :root block — nothing else. • Component class names follow BEM-lite: .block, .block__element, .block--modifier. Even though we're not on a component framework today, the names are component-shaped so a future migration to React/Vue/Svelte is mechanical. ────────────────────────────────────────────────────────────────────────── */ /* ── Reset ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { /* Dark theme is the default. To add a light theme later: [data-theme="light"] { --navy: #...; --text: #...; ... } and toggle the attribute on . No other CSS changes needed. */ /* Brand — match landing page */ --teal: #2DD4BF; --teal-dim: #1a9e8f; --teal-glow: rgba(45, 212, 191, 0.15); --teal-faint: rgba(45, 212, 191, 0.06); /* Surfaces */ --navy: #060C1A; --navy-mid: #0B1528; --navy-card: #0e1a2e; --navy-deep: #040810; --surface-blur: rgba(6, 12, 26, 0.88); /* topbar / sticky overlays */ /* Text */ --text: #E8EEF8; --muted: #7A90B8; --muted2: #4a6080; /* Borders */ --border: rgba(45, 212, 191, 0.13); --border2: rgba(45, 212, 191, 0.07); /* Status / severity */ --red: #f87171; --red-bg: rgba(248, 113, 113, 0.10); --red-border: rgba(248, 113, 113, 0.30); --red-glow: rgba(248, 113, 113, 0.18); --amber: #fbbf24; --amber-bg: rgba(251, 191, 36, 0.10); --amber-border: rgba(251, 191, 36, 0.30); --amber-glow: rgba(251, 191, 36, 0.18); --green: #34d399; --green-bg: rgba(52, 211, 153, 0.10); --green-border: rgba(52, 211, 153, 0.30); --green-glow: rgba(52, 211, 153, 0.18); /* Composite shadows — depth tokens, opaque to the rest of the system. Treated as a single design unit; do not unbundle. */ --shadow-card-rest: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 -1px 0 rgba(0, 0, 0, 0.40) inset, 0 8px 24px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.09) inset, 0 -1px 0 rgba(0, 0, 0, 0.40) inset, 0 12px 32px rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.40); /* Typography */ --font-display: 'Syne', system-ui, -apple-system, sans-serif; --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, monospace; /* Layout */ --sidebar-width: 210px; --topbar-height: 48px; } /* ── Base ───────────────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } body { background: var(--navy); color: var(--text); font-family: var(--font-display); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--navy-deep); } ::-webkit-scrollbar-thumb { background: var(--teal-dim); border-radius: 3px; } /* Alpine helper — keep elements hidden until Alpine boots and resolves x-show */ [x-cloak] { display: none !important; } /* ── App shell ──────────────────────────────────────────────────────────── */ .app-shell { min-height: 100vh; } .main-area { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; } /* Page = the scrollable content region under the topbar within main-area. Each view (.page--dashboard, .page--settings, .page--profile) can opt into a max width via a modifier — kept generic in the base. */ .page { flex: 1; padding: 1.5rem 1.75rem; } /* ── Sidebar ────────────────────────────────────────────────────────────── */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background: var(--navy-deep); border-right: 1px solid var(--border2); display: flex; flex-direction: column; z-index: 100; } .sidebar__logo { display: flex; align-items: center; gap: 0.6rem; padding: 1.25rem 1.1rem; border-bottom: 1px solid var(--border2); background: none; border-left: none; border-right: none; border-top: none; color: inherit; text-decoration: none; cursor: pointer; width: 100%; text-align: left; } .sidebar__logo img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 0 5px var(--teal-glow)); } .sidebar__logo-text { font-family: var(--font-display); font-size: 0.95rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); } .sidebar__section { font-family: var(--font-mono); font-size: 0.56rem; color: var(--muted2); letter-spacing: 0.18em; text-transform: uppercase; padding: 0.9rem 1.1rem 0.35rem; } .sidebar__item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.55rem 1.1rem; font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; color: var(--muted); background: none; border: none; border-left: 2px solid transparent; letter-spacing: -0.01em; text-align: left; text-decoration: none; cursor: pointer; transition: color 0.2s, background 0.2s, border-left-color 0.2s; } .sidebar__item:hover { color: var(--text); background: var(--teal-faint); } .sidebar__item--active { color: var(--teal); border-left-color: var(--teal); background: var(--teal-faint); } .sidebar__item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; transition: opacity 0.2s; } .sidebar__item:hover svg, .sidebar__item--active svg { opacity: 1; } .sidebar__footer { margin-top: auto; padding: 0.9rem 1.1rem; border-top: 1px solid var(--border2); } .sidebar__status { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.65rem; color: var(--muted); margin-bottom: 0.5rem; } .sidebar__signout { display: block; font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted2); background: none; border: none; padding: 0; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color 0.2s; } .sidebar__signout:hover { color: var(--red); } /* ── Top bar ────────────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 50; height: var(--topbar-height); background: var(--surface-blur); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--border2); display: flex; align-items: center; justify-content: space-between; padding: 0 1.75rem; } .topbar__title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em; } .topbar__right { display: flex; align-items: center; gap: 0.65rem; } .topbar__scan-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.62rem; color: var(--teal); background: var(--teal-faint); border: 1px solid var(--border); padding: 0.28rem 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; } .topbar__scan-trigger { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.62rem; color: var(--teal); background: transparent; border: 1px solid var(--border); padding: 0.28rem 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .topbar__scan-trigger:hover:not(:disabled) { background: var(--teal-glow); color: var(--text); border-color: var(--teal); } .topbar__scan-trigger:disabled { opacity: 0.4; cursor: not-allowed; } .topbar__time { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.05em; min-width: 100px; text-align: right; } /* ── Status indicator (used in sidebar footer + topbar badge) ───────────── */ .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0; animation: blink 2s ease-in-out infinite; } /* ── Animations ─────────────────────────────────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } /* ── Section header (reused across dashboard sections) ──────────────────── */ /* Used by: stats, future feed, alert feed, verified predictions. Pairs with .section-collapse-btn for the chevron toggle. */ .section-header { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.8rem; } .section-header__title { font-family: var(--font-mono); font-size: 0.7rem; color: var(--teal); letter-spacing: 0.15em; text-transform: uppercase; } .section-header__title::before { content: '//'; opacity: 0.45; margin-right: 0.4rem; } .section-header__meta { font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); margin-left: 0.35rem; } .section-collapse-btn { display: inline-flex; align-items: center; background: none; border: none; color: var(--muted); padding: 0.15rem; cursor: pointer; transition: color 0.2s; } .section-collapse-btn:hover { color: var(--text); } .section-collapse-btn svg { width: 14px; height: 14px; transition: transform 0.2s; } .section-collapse-btn--collapsed svg { transform: rotate(-90deg); } /* ── Stat cards (Step 3a) ───────────────────────────────────────────────── */ /* Each card uses a local --stat-accent custom property so the colored value text and the hover hairline both pull from one source. The --modifier class (--teal, --red, --amber, --green) sets that variable. */ .stats-section { margin-bottom: 1.2rem; } .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; } .stat-card { --stat-accent: var(--text); background: var(--navy-card); border: 1px solid var(--border2); padding: 1rem 1.15rem; position: relative; overflow: hidden; transition: border-color 0.3s, transform 0.3s; } .stat-card:hover { border-color: var(--border); transform: translateY(-1px); } .stat-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--stat-accent), transparent); opacity: 0; transition: opacity 0.3s; } .stat-card:hover::after { opacity: 0.4; } .stat-card--teal { --stat-accent: var(--teal); } .stat-card--red { --stat-accent: var(--red); } .stat-card--amber { --stat-accent: var(--amber); } .stat-card--green { --stat-accent: var(--green); } .stat-card__label { font-family: var(--font-mono); font-size: 0.58rem; color: var(--muted); letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 0.45rem; } .stat-card__value { /* Mono font so single-digit values read clearly as numbers; the display font's heavy 800 weight rendered "0" as a closed oval shape that looked like a graphic element instead of a digit. */ font-family: var(--font-mono); font-size: 2rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--stat-accent); } .stat-card__sub { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); margin-top: 0.3rem; } /* ── Pill group (shared by Future Feed time pills, Alert Feed pills, Verified Predictions pills, sort buttons) ─────────────────────────────── */ .pill-group { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; background: var(--navy-card); border: 1px solid var(--border2); padding: 2px; } .pill { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); background: none; border: none; padding: 0.28rem 0.6rem; letter-spacing: 0.06em; cursor: pointer; transition: color 0.2s, background 0.2s; } .pill:hover { color: var(--teal); } .pill--active { color: var(--teal); background: var(--teal-faint); } .sort-row { display: flex; align-items: center; gap: 0.3rem; margin: 0 0 0.7rem 0; } .sort-row__label { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted2); margin-right: 0.2rem; letter-spacing: 0.05em; } /* ── Future Feed (Step 3b) ─────────────────────────────────────────────── */ .future-feed { margin-bottom: 1.2rem; } .future-feed__pulse { display: inline-flex; align-items: center; margin-right: 0.4rem; } .future-feed__pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted2); } .future-feed__pulse-dot--active { background: var(--teal); animation: pulseDot 1.6s ease-out infinite; } @keyframes pulseDot { 0% { box-shadow: 0 0 0 0 var(--teal-glow); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .future-feed__list { display: flex; flex-direction: column; gap: 0.55rem; } .future-feed__empty { background: var(--navy-card); border: 1px solid var(--border2); padding: 1.5rem; text-align: center; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); } .future-feed__empty p { font-size: 0.65rem; color: var(--muted2); margin-top: 0.4rem; } /* Future feed card — color-coded left border by confidence */ .future-card { --future-accent: var(--teal); background: var(--navy-card); border: 1px solid var(--border2); border-left: 5px solid var(--future-accent); padding: 0.85rem 1rem 0.85rem 0.95rem; cursor: pointer; transition: background 0.2s, border-color 0.2s; /* Subtle inset glow on the left edge so the colored band reads as a sticker even on the navy background. */ box-shadow: inset 4px 0 8px -4px var(--future-accent); } .future-card:hover { background: var(--teal-faint); } .future-card--high { --future-accent: var(--red); } .future-card--medium { --future-accent: var(--amber); } .future-card--low { --future-accent: var(--teal); } .future-card__head { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .future-card__conf { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.15rem 0.5rem; color: var(--future-accent); border: 1px solid var(--future-accent); background: transparent; } .future-card__escalating { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); background: var(--red-bg); border: 1px solid var(--red-border); padding: 0.15rem 0.45rem; } .future-card__head-right { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; } .future-card__time { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted2); } .future-card__verify { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); background: none; border: 1px solid transparent; padding: 0.2rem 0.55rem; cursor: pointer; letter-spacing: 0.05em; transition: color 0.2s, background 0.2s, border-color 0.2s; } .future-card__verify:hover { color: var(--green); background: var(--green-bg); border-color: var(--green-border); } .future-card__headline { font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; line-height: 1.35; color: var(--text); margin-bottom: 0.5rem; } .future-card__plat { display: inline-block; font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0.1rem 0.5rem; background: var(--teal-faint); border: 1px solid var(--border2); } /* ── Filter bar (Alert Feed — Step 3c) ─────────────────────────────────── */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem; } .filter-select { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text); background: var(--navy-card); border: 1px solid var(--border2); padding: 0.35rem 0.65rem; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .filter-select:hover, .filter-select:focus { border-color: var(--border); outline: none; } .filter-bar__count { font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); letter-spacing: 0.05em; } /* Right-aligned cluster (count + pill group) — pushes the pill group to the far edge of the filter bar so it visually mirrors the Future Feed pill group's right-anchor in its section header. */ .filter-bar__right { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; } /* Inside the right cluster, the pill group should not pull itself away from the count via its own margin-left:auto default. */ .filter-bar__right .pill-group { margin-left: 0; } /* ── Alert feed state containers ───────────────────────────────────────── */ .alert-feed__section { margin-bottom: 1.2rem; } .alert-feed__empty, .alert-feed__loading { background: var(--navy-card); border: 1px dashed var(--border2); padding: 2rem 1rem; text-align: center; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); } .alert-feed__empty p { font-size: 0.7rem; color: var(--muted2); margin-top: 0.4rem; } .alert-feed__skeleton { background: var(--navy-card); border: 1px solid var(--border2); padding: 1rem; margin-bottom: 0.55rem; opacity: 0.5; animation: skeletonPulse 1.4s ease-in-out infinite; } @keyframes skeletonPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } } .alert-feed__skeleton-line { background: var(--border2); height: 0.7rem; margin-bottom: 0.5rem; border-radius: 2px; } .alert-feed__skeleton-line--short { width: 30%; } .alert-feed__skeleton-line--mid { width: 60%; } .alert-feed__skeleton-line--full { width: 100%; } .alert-feed__banner { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; padding: 0.65rem 1rem; margin-bottom: 0.7rem; border: 1px solid; } .alert-feed__banner--mute { color: var(--red); background: var(--red-bg); border-color: var(--red-border); } .alert-feed__banner--error { color: var(--red); background: var(--red-bg); border-color: var(--red-border); } /* ── Alert cards ───────────────────────────────────────────────────────── */ .alert-list { display: flex; flex-direction: column; gap: 0.55rem; } .alert-card { --alert-accent: var(--muted); background: var(--navy-card); border: 1px solid var(--border2); border-left: 3px solid var(--alert-accent); transition: background 0.2s, border-color 0.2s; position: relative; } .alert-card:hover { background: var(--teal-faint); } .alert-card--high { --alert-accent: var(--red); } .alert-card--medium { --alert-accent: var(--amber); } .alert-card--low { --alert-accent: var(--green); } .alert-card--boosted { --alert-accent: var(--green); background: var(--green-bg); } .alert-card--expanded { background: var(--teal-faint); } .alert-card__head { padding: 0.85rem 1rem; cursor: pointer; } .alert-card__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; } .alert-card__time { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted2); margin-left: auto; } .alert-card__chevron { width: 14px; height: 14px; color: var(--muted); transition: transform 0.2s; } .alert-card__chevron--open { transform: rotate(180deg); } .alert-card__market { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; line-height: 1.3; color: var(--text); margin-bottom: 0.4rem; } .alert-card__summary { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); line-height: 1.55; margin-bottom: 0.4rem; } .alert-card__detail { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); line-height: 1.6; } .alert-card__detail--clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .alert-card__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem; } .alert-card__expand { border-top: 1px solid var(--border2); } .alert-card__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.7rem 1rem; } /* ── Badges (severity / confidence / type / platform / +N more) ────────── */ .badge { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.18rem 0.5rem; border: 1px solid transparent; white-space: nowrap; } .badge--severity-high { color: var(--red); background: var(--red-bg); border-color: var(--red-border); } .badge--severity-medium { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-border); } .badge--severity-low { color: var(--green); background: var(--green-bg); border-color: var(--green-border); } .badge--conf-high { color: var(--red); background: var(--red-bg); border-color: var(--red-border); } .badge--conf-medium { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-border); } .badge--conf-low { color: var(--green); background: var(--green-bg); border-color: var(--green-border); } .badge--conf-base { color: var(--muted); background: var(--teal-faint); border-color: var(--border2); } .badge--type { color: var(--muted); background: var(--teal-faint); border-color: var(--border2); } .badge--more { color: var(--teal); background: var(--teal-faint); border-color: var(--border); } .badge--platform { color: var(--teal); background: var(--teal-faint); border-color: var(--border); } .badge--platform-polymarket { color: var(--teal); background: var(--teal-faint); border-color: var(--border); } .badge--platform-kalshi { color: var(--green); background: var(--green-bg); border-color: var(--green-border); } .badge--platform-manifold { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-border); } .badge--platform-predictit { color: var(--red); background: var(--red-bg); border-color: var(--red-border); } .badge--platform-metaculus { color: var(--text); background: var(--teal-faint); border-color: var(--border); } /* ── Action buttons (alert card actions) ───────────────────────────────── */ .action-btn { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); background: var(--teal-faint); border: 1px solid var(--border2); padding: 0.32rem 0.65rem; cursor: pointer; letter-spacing: 0.05em; text-decoration: none; white-space: nowrap; transition: color 0.2s, background 0.2s, border-color 0.2s; } .action-btn:hover { color: var(--teal); background: var(--teal-glow); border-color: var(--border); } .action-btn--primary { color: var(--teal); border-color: var(--border); } .action-btn--note-active { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-border); } .action-btn--boosted { color: var(--green); background: var(--green-bg); border-color: var(--green-border); } .action-btn--mute:hover { color: var(--red); background: var(--red-bg); border-color: var(--red-border); } /* ── Notes panel ───────────────────────────────────────────────────────── */ .notes-panel { padding: 0 1rem 1rem; } .notes-panel__inner { background: var(--navy-deep); border: 1px solid var(--border2); padding: 0.7rem; } .notes-panel__label { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); margin-bottom: 0.4rem; } .notes-panel__textarea { width: 100%; background: transparent; color: var(--text); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.55; resize: vertical; border: none; outline: none; } .notes-panel__textarea::placeholder { color: var(--muted2); } .notes-panel__save { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.6rem; color: var(--teal); background: var(--teal-faint); border: 1px solid var(--border); padding: 0.3rem 0.7rem; cursor: pointer; letter-spacing: 0.05em; text-transform: uppercase; transition: background 0.2s; } .notes-panel__save:hover { background: var(--teal-glow); } /* ── Pagination ────────────────────────────────────────────────────────── */ .pager { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 1rem; } .pager__btn { font-family: var(--font-mono); font-size: 0.65rem; color: var(--muted); background: var(--navy-card); border: 1px solid var(--border2); padding: 0.35rem 0.85rem; cursor: pointer; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.2s, border-color 0.2s; } .pager__btn:hover:not(:disabled) { color: var(--teal); border-color: var(--border); } .pager__btn:disabled { opacity: 0.35; cursor: not-allowed; } .pager__info { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); } .pager__info strong { color: var(--text); font-weight: 500; } /* ── Sports section divider + sports cards ─────────────────────────────── */ .sports-section { margin-top: 1.5rem; } .sports-section__header { display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem 0.85rem; background: var(--amber-bg); border: 1px solid var(--amber-border); margin-bottom: 0.7rem; } .sports-section__title { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); } .sports-section__count { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; color: var(--amber); background: transparent; border: 1px solid var(--amber-border); padding: 0.12rem 0.5rem; } .sports-section__note { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); margin-left: auto; font-style: italic; } .sports-section__empty { background: var(--navy-card); border: 1px dashed var(--amber-border); padding: 2rem 1rem; text-align: center; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); } /* Sports alert card uses the .alert-card base + this modifier for the amber accent on left border + slight background tint. */ .alert-card--sports { --alert-accent: var(--amber); background: var(--amber-bg); } .alert-card--sports:hover { background: var(--amber-bg); } /* ── Verified Predictions (Step 3d) ────────────────────────────────────── */ .verified { margin-bottom: 1.2rem; } /* Green pulse-dot variant — reuses .future-feed__pulse-dot positioning */ .future-feed__pulse-dot--green { background: var(--green); animation: pulseDotGreen 1.6s ease-out infinite; } @keyframes pulseDotGreen { 0% { box-shadow: 0 0 0 0 var(--green-bg); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .verified__count { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; color: var(--green); background: var(--green-bg); border: 1px solid var(--green-border); padding: 0.15rem 0.5rem; } .verified__time-row { margin: 0 0 0.7rem 0; } .verified__list { display: flex; flex-direction: column; gap: 0.5rem; } .verified__empty { background: var(--navy-card); border: 1px dashed var(--border2); padding: 1.75rem 1rem; text-align: center; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); } .verified__empty p { font-size: 0.66rem; color: var(--muted2); margin-top: 0.4rem; } /* Verified card — outcome-driven accent on left border + circular icon */ .verified-card { --vc-accent: var(--muted); background: var(--navy-card); border: 1px solid var(--border2); border-left: 3px solid var(--vc-accent); padding: 0.7rem 0.9rem; display: flex; gap: 0.85rem; align-items: flex-start; transition: background 0.2s, border-color 0.2s; } .verified-card:hover { background: var(--teal-faint); } .verified-card--correct { --vc-accent: var(--green); } .verified-card--incorrect { --vc-accent: var(--red); } .verified-card--pending { --vc-accent: var(--amber); } .verified-card__icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; color: var(--vc-accent); border: 1px solid var(--vc-accent); background: transparent; flex-shrink: 0; margin-top: 0.15rem; } .verified-card__body { flex: 1; min-width: 0; } .verified-card__market { font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; color: var(--text); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .verified-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; margin-top: 0.3rem; font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); } .verified-card__outcome { font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vc-accent); } .verified-card__plat { text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted2); } .verified-card__link { color: var(--teal); text-decoration: none; transition: color 0.2s; } .verified-card__link:hover { color: var(--text); text-decoration: underline; } .verified-card__note { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); font-style: italic; margin-top: 0.35rem; } .verified-card__delete { background: none; border: none; color: var(--muted2); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0.15rem 0.4rem; flex-shrink: 0; transition: color 0.2s, background 0.2s; } .verified-card__delete:hover { color: var(--red); background: var(--red-bg); } /* ── Visualization panels (Step 4a + 4b) ───────────────────────────────── */ /* Generic .panel base used by the world map card, signal-bars card, and platform-donut card. Tied to dashboard.css color tokens. */ .panel { background: var(--navy-card); border: 1px solid var(--border2); padding: 1rem; position: relative; overflow: hidden; } .panel__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; } .panel__title { font-family: var(--font-mono); font-size: 0.7rem; color: var(--teal); letter-spacing: 0.15em; text-transform: uppercase; } .panel__title::before { content: '//'; opacity: 0.45; margin-right: 0.4rem; } .panel__meta { font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); } /* Map row: world map on the left, side-stack panels on the right. 1-column on narrow screens, 2-column once the viewport accommodates the 340px side stack. */ .map-row { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.2rem; } @media (min-width: 1100px) { .map-row { grid-template-columns: 1fr 340px; } } .map-card__svg-wrap { width: 100%; height: 300px; position: relative; } .map-card__svg-wrap svg { width: 100%; height: 100%; display: block; } .map-tooltip { position: absolute; pointer-events: none; background: var(--navy-mid); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.66rem; padding: 0.5rem 0.75rem; z-index: 10; max-width: 240px; line-height: 1.5; opacity: 0; transition: opacity 0.15s; } .map-tooltip__title { color: var(--text); font-weight: 500; } .map-tooltip__body { color: var(--muted); font-size: 0.6rem; margin-top: 0.2rem; } .map-tooltip__body div + div { margin-top: 0.15rem; } .map-legend { display: flex; align-items: center; gap: 1rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border2); font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); flex-wrap: wrap; } .map-legend__item { display: inline-flex; align-items: center; gap: 0.35rem; } .map-legend__dot { width: 8px; height: 8px; border-radius: 50%; } .map-legend__dot--high { background: var(--red); } .map-legend__dot--medium { background: var(--teal); } .map-legend__hint { margin-left: auto; color: var(--muted2); font-style: italic; } /* ── Side panel stack (Step 4b — signal bars + donut next to map) ──────── */ .panel-stack { display: flex; flex-direction: column; gap: 1rem; } /* Signal Breakdown bars — animated horizontal bars */ .signal-bars { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.65rem; } .signal-bar { display: flex; align-items: center; gap: 0.65rem; } .signal-bar__label { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); width: 102px; flex-shrink: 0; } .signal-bar__track { flex: 1; height: 3px; background: var(--border2); border-radius: 2px; overflow: hidden; } .signal-bar__fill { height: 100%; border-radius: 2px; background: var(--teal); transition: width 1.2s cubic-bezier(.16, 1, .3, 1); } .signal-bar__count { font-family: var(--font-mono); font-size: 0.6rem; color: var(--teal); min-width: 22px; text-align: right; flex-shrink: 0; } .signal-bars__empty, .donut__empty { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted2); text-align: center; padding: 1.1rem 0; } /* Platform donut — D3 pie chart with adjacent legend */ .donut-svg { width: 100%; height: 115px; margin-top: 0.4rem; display: block; } /* ── Map zoom reset button (Step 4d) ───────────────────────────────────── */ /* Sits in the top-right corner of the map svg-wrap, only visible when the user is zoomed in. Click resets the zoom to the initial fit. */ .map-card__reset { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 5; display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.6rem; color: var(--teal); background: var(--surface-blur); border: 1px solid var(--border); padding: 0.3rem 0.6rem; cursor: pointer; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.2s, color 0.2s, border-color 0.2s; } .map-card__reset:hover { background: var(--teal-glow); color: var(--text); } /* ── Map alert tray (Step 4d) ──────────────────────────────────────────── */ /* Sits between the map row and the stat cards row. Hidden until a map dot is clicked. All content built by dashboard-d3.js via the DOM API. */ .map-tray { background: var(--navy-card); border: 1px solid var(--border2); border-left: 3px solid var(--teal); padding: 1rem; margin-bottom: 1.2rem; animation: trayFadeIn 0.25s ease; } @keyframes trayFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .map-tray__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--border2); } .map-tray__title { font-family: var(--font-mono); font-size: 0.72rem; color: var(--teal); letter-spacing: 0.12em; text-transform: uppercase; } .map-tray__title::before { content: '//'; opacity: 0.45; margin-right: 0.4rem; } .map-tray__close { background: none; border: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0.15rem 0.5rem; transition: color 0.2s, background 0.2s; } .map-tray__close:hover { color: var(--red); background: var(--red-bg); } .map-tray__row { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.55rem 0.4rem; background: none; border: none; border-bottom: 1px solid var(--border2); cursor: pointer; text-align: left; transition: background 0.2s; font-family: var(--font-mono); } .map-tray__row:last-of-type { border-bottom: none; } .map-tray__row:hover { background: var(--teal-faint); } .map-tray__market { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .map-tray__arrow { margin-left: auto; flex-shrink: 0; color: var(--muted); font-family: var(--font-mono); font-size: 0.85rem; transition: color 0.2s, transform 0.2s; } .map-tray__row:hover .map-tray__arrow { color: var(--teal); transform: translateX(2px); } .map-tray__more { display: block; margin: 0.6rem auto 0; background: none; border: 1px solid var(--border2); color: var(--teal); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; padding: 0.35rem 0.85rem; cursor: pointer; transition: background 0.2s, border-color 0.2s; } .map-tray__more:hover { background: var(--teal-faint); border-color: var(--border); } /* Alert-card highlight pulse — triggered when a tray row is clicked so the user can find the matching alert card after the scroll. */ .alert-card--highlighted { animation: highlightPulse 1.5s ease forwards; } @keyframes highlightPulse { 0% { box-shadow: 0 0 0 2px var(--teal); } 60% { box-shadow: 0 0 0 2px var(--teal); } 100% { box-shadow: none; } } /* ── Settings page (Step 5) ────────────────────────────────────────────── */ /* Page width modifier: settings/profile are forms, not data dashboards. Cap them at a reasonable reading width so fields don't stretch. */ .page--narrow { max-width: 1100px; margin-inline: auto; } /* Two-column grid for settings cards (single-column below 900px). Cards opt into the full row via the .panel--full modifier. */ .settings-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 900px) { .settings-grid { grid-template-columns: 1fr 1fr; } } .settings-grid > .panel--full { grid-column: 1 / -1; } /* Settings page header — title left, primary action right */ .settings-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .settings-header__title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } /* Reusable .field — a single setting (label + value control + sub) */ .field + .field { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--border2); } .field__row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.55rem; } .field__row--align-top { align-items: flex-start; } .field__label { font-family: var(--font-display); font-size: 0.8rem; color: var(--text); font-weight: 500; flex: 1; min-width: 0; } .field__value { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; } /* Number input — also reused by topic add-form input */ .field__number, .topic-add__input, .topic-input { background: var(--teal-faint); border: 1px solid var(--border); color: var(--text); font-family: var(--font-mono); font-size: 0.72rem; padding: 0.32rem 0.55rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .field__number { width: 5rem; text-align: right; } .field__number--wide { width: 7rem; } .field__number--narrow { width: 4rem; } .field__number:focus, .topic-add__input:focus, .topic-input:focus { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-glow); } .field__number::-webkit-inner-spin-button, .field__number::-webkit-outer-spin-button { opacity: 0.4; } .field__suffix { font-family: var(--font-mono); font-size: 0.65rem; color: var(--muted); } .field__slider { width: 100%; height: 4px; background: var(--border2); border-radius: 2px; outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; accent-color: var(--teal); margin-top: 0.1rem; } .field__slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--teal); border: 2px solid var(--navy-card); cursor: pointer; } .field__slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--teal); border: 2px solid var(--navy-card); cursor: pointer; } .field__sub { font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); margin-top: 0.45rem; line-height: 1.55; } .field__sub em { color: var(--text); font-style: normal; } /* Dual-handle range pattern (contested-range min/max) */ .field__dual-numbers { display: inline-flex; align-items: center; gap: 0.4rem; } .field__dual-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } /* Toggle switch — pill shape, knob slides on .toggle--on */ .toggle { position: relative; display: inline-block; width: 36px; height: 18px; border-radius: 999px; background: var(--muted2); border: none; padding: 0; cursor: pointer; transition: background 0.2s; flex-shrink: 0; } .toggle--on { background: var(--teal); } .toggle__knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--navy-card); transition: transform 0.2s, background 0.2s; } .toggle--on .toggle__knob { transform: translateX(18px); background: var(--navy); } /* Primary action button (Save Changes) — landing page style */ .btn-primary { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: var(--navy); background: var(--teal); border: none; padding: 0.65rem 1.3rem; cursor: pointer; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: filter 0.2s, box-shadow 0.2s, transform 0.2s; box-shadow: 0 0 18px -8px var(--teal); } .btn-primary:hover:not(:disabled) { filter: brightness(1.1); box-shadow: 0 0 24px -4px var(--teal); transform: translateY(-1px); } .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; } .btn-primary__spinner { width: 14px; height: 14px; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Channel status row (Alert Channels section) */ .channel-row { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border2); } .channel-row:last-child { border-bottom: none; } .channel-row__main { flex: 1; min-width: 0; } .channel-row__name { font-family: var(--font-display); font-size: 0.78rem; font-weight: 500; color: var(--text); } .channel-row__detail { font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); margin-top: 0.2rem; } .channel-row__right { display: inline-flex; align-items: center; gap: 0.55rem; flex-shrink: 0; } .channel-row__status { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; } .channel-row__status--ok { color: var(--green); } .channel-row__status--off { color: var(--muted); } .channel-row__status--ok::before { content: '✓'; opacity: 0.85; } .channel-row__status--off::before { content: '○'; opacity: 0.6; } /* Test result banner (per-channel) */ .test-result { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.65rem; padding: 0.5rem 0.75rem; margin-top: 0.7rem; border: 1px solid; } .test-result--ok { color: var(--green); background: var(--green-bg); border-color: var(--green-border); } .test-result--error { color: var(--red); background: var(--red-bg); border-color: var(--red-border); } /* Alert-feed banner success modifier (for the Save toast) */ .alert-feed__banner--success { color: var(--green); background: var(--green-bg); border-color: var(--green-border); } /* Trained Topics — inline-editable inputs styled like pills */ .topic-group { margin-bottom: 1.5rem; } .topic-group:last-child { margin-bottom: 0; } .topic-group__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; } .topic-group__title { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600; } .topic-group__title--muted { color: var(--red); } .topic-group__title--boosted { color: var(--green); } .topic-group__hint { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); } .topic-group__divider { height: 1px; background: var(--border2); margin: 0.5rem 0 1.4rem; } .topic-row { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.4rem; } /* Inline-editable keyword input (one per chip) */ .topic-input { flex: 1; min-width: 0; } .topic-input--muted { color: var(--red); background: var(--red-bg); border-color: var(--red-border); } .topic-input--muted:focus { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-glow); } .topic-input--boosted { color: var(--green); background: var(--green-bg); border-color: var(--green-border); } .topic-input--boosted:focus { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-glow); } .topic-remove { width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; font-size: 0.95rem; line-height: 1; cursor: pointer; opacity: 0.55; transition: opacity 0.2s, background 0.2s; } .topic-remove:hover { opacity: 1; } .topic-remove--muted { color: var(--red); } .topic-remove--muted:hover { background: var(--red-bg); } .topic-remove--boosted { color: var(--green); } .topic-remove--boosted:hover { background: var(--green-bg); } .topic-empty { font-family: var(--font-mono); font-size: 0.65rem; color: var(--muted2); font-style: italic; margin: 0.4rem 0 0.7rem; } .topic-add { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .topic-add__input { flex: 1; min-width: 0; } .topic-add__btn { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; background: none; border: 1px solid; padding: 0.35rem 0.85rem; cursor: pointer; white-space: nowrap; transition: filter 0.2s, background 0.2s; } .topic-add__btn--muted { color: var(--red); background: var(--red-bg); border-color: var(--red-border); } .topic-add__btn--boosted { color: var(--green); background: var(--green-bg); border-color: var(--green-border); } .topic-add__btn:hover { filter: brightness(1.15); } /* ── Profile page (Step 6) ─────────────────────────────────────────────── */ /* Profile is a narrow form, narrower than the settings page. Uses .page + .page--profile inside .page--narrow's spirit. */ .page--profile { max-width: 640px; margin-inline: auto; } /* Account-info row: label + value, no input. Reuses .field rhythm. */ .account-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; } .account-row + .account-row { border-top: 1px solid var(--border2); } .account-row__label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); } .account-row__value { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text); text-align: right; word-break: break-all; } /* Password input — matches Settings number-input feel but full-width. */ .pw-field { margin-bottom: 0.95rem; } .pw-field__label { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; } .pw-input { width: 100%; background: var(--teal-faint); border: 1px solid var(--border); color: var(--text); font-family: var(--font-mono); font-size: 0.78rem; padding: 0.6rem 0.75rem; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .pw-input::placeholder { color: var(--muted2); } .pw-input:focus { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-glow); } /* Sign-out row sits below the cards, edge-to-edge inside .page--profile. */ .signout-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding: 0.8rem 1rem; background: var(--navy-card); border: 1px solid var(--border2); } .signout-row__who { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); word-break: break-all; } .signout-row__who em { color: var(--text); font-style: normal; } .signout-btn { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: transparent; border: 1px solid var(--border2); padding: 0.45rem 1rem; cursor: pointer; white-space: nowrap; transition: color 0.15s, border-color 0.15s, background 0.15s; } .signout-btn:hover { color: var(--red); border-color: var(--red-border); background: var(--red-bg); } /* ── Utility classes ────────────────────────────────────────────────────── */ .fade-in { animation: fadeIn 0.2s ease; } .card-3d { box-shadow: var(--shadow-card-rest); } .card-3d:hover { box-shadow: var(--shadow-card-hover); }