/* ─────────────────────────────────────────────────────────── AR3NA — Web portal v0.2.0 Light theme = paper warmth. Dark theme = late-night focus. Switching is via data-theme on . ─────────────────────────────────────────────────────────── */ html, body { height: 100%; } *, *::before, *::after { box-sizing: border-box; } body { background: var(--surface-base); color: var(--ink); font-family: var(--font-body); margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .hidden { display: none !important; } /* ───────── DARK THEME OVERRIDES ───────── tokens.css ships with the light (paper) palette. We override the surface + ink roles for dark mode here. Coral stays coral. */ :root[data-theme="dark"] { --paper: #15171b; --paper-warm: #0e1014; --paper-deep: #1d2026; --paper-tint: #1a1d22; --ink: #ece6da; --ink-soft: #b8ada0; --ink-mute: #8a7f73; --ink-faint: #5a544c; --surface-base: var(--paper-warm); --surface-card: var(--paper); /* Mint as accent on dark feels cleaner than coral; coral stays as alert */ --accent: #5ec9a8; --accent-alert: var(--coral); --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.25); --shadow-md: 0 2px 8px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.3); --shadow-lg: 0 4px 16px rgba(0,0,0,0.5), 0 16px 48px rgba(0,0,0,0.4); } /* ───────── App layout ───────── */ #app { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; } @media (max-width: 720px) { #app { grid-template-columns: 1fr; } #sidebar { display: none; } } /* ───────── Sidebar ───────── */ #sidebar { background: var(--surface-card); border-right: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); padding: 28px 18px 18px; display: flex; flex-direction: column; gap: 18px; } .sidebar-brand { font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; color: var(--ink); padding: 0 4px 4px; } .brand-prefix { color: var(--coral); } .brand-suffix { font-style: italic; } .sidebar-brain-tag { font-size: 11px; color: var(--ink-mute); padding: 0 4px 14px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); letter-spacing: 0.02em; } .sidebar-brain-tag span { color: var(--ink-soft); font-weight: 500; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--ink-soft); font-size: 14px; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .nav-item:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink); } .nav-item.active { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink); font-weight: 500; } .nav-item svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; } .sidebar-footer { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); } .kill-switch { display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: transparent; border: 1px solid color-mix(in srgb, var(--neg) 50%, transparent); color: var(--neg); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 13px; font-weight: 500; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); } .kill-switch:hover { background: var(--neg-tint); } .kill-switch svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .sidebar-version { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); text-align: center; } /* ───────── Main content ───────── */ #content { padding: 32px 40px; overflow-y: auto; max-height: 100vh; } .page { display: none; } .page.active { display: block; } @media (max-width: 720px) { #content { padding: 20px; } } /* ───────── Login overlay ───────── */ .login-overlay { position: fixed; inset: 0; background: var(--surface-base); display: flex; align-items: center; justify-content: center; z-index: 1000; } .login-card { background: var(--surface-card); border-radius: var(--radius-lg); padding: 40px 36px; width: min(380px, 90vw); box-shadow: var(--shadow-lg); text-align: left; } .login-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; color: var(--coral); text-transform: uppercase; margin-bottom: 8px; } .login-title { font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--ink); } .login-body { font-size: 14px; color: var(--ink-mute); margin-bottom: 22px; } .login-input { width: 100%; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: var(--radius-sm); background: var(--surface-base); color: var(--ink); font-family: var(--font-mono); font-size: 14px; margin-bottom: 14px; } .login-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .login-button { width: 100%; padding: 12px; background: var(--coral); color: white; border: none; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer; transition: opacity var(--dur-fast); } .login-button:hover { opacity: 0.9; } .login-button:disabled { opacity: 0.5; cursor: not-allowed; } .login-error { color: var(--neg); font-size: 13px; margin-top: 12px; min-height: 18px; } /* ───────── Modal ───────── */ #modal-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 40%, transparent); display: flex; align-items: center; justify-content: center; z-index: 900; } #modal-box { background: var(--surface-card); border-radius: var(--radius-lg); width: min(540px, 90vw); max-height: 80vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); overflow: hidden; } #modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); } #modal-title { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin: 0; color: var(--ink); } #modal-close { background: none; border: none; font-size: 18px; color: var(--ink-mute); cursor: pointer; padding: 4px 8px; } #modal-close:hover { color: var(--ink); } #modal-body { padding: 24px; overflow-y: auto; flex: 1; color: var(--ink); } /* ───────── Toast ───────── */ #toast-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 1100; } .toast { padding: 12px 16px; border-radius: var(--radius-sm); background: var(--surface-card); color: var(--ink); box-shadow: var(--shadow-md); font-size: 14px; border-left: 3px solid var(--coral); animation: toast-in 0.2s var(--ease-out); } .toast.success { border-left-color: var(--pos); } .toast.error { border-left-color: var(--neg); } @keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* ───────── Headers & titles ───────── */ .page-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; } .page-title { font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: -0.02em; margin: 0; color: var(--ink); } .page-subtitle { font-size: 13px; color: var(--ink-mute); font-family: var(--font-mono); } /* ───────── Cards ───────── */ .card { background: var(--surface-card); border-radius: var(--radius-md); padding: 22px 24px; box-shadow: var(--shadow-sm); margin-bottom: 16px; } .card-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; } .card-mono { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); } .pos { color: var(--pos); } .neg { color: var(--neg); } .muted { color: var(--ink-mute); } /* ───────── Dashboard headline & grid ───────── */ .dash-headline { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; } .dash-headline .page-title em { font-style: italic; color: var(--accent); font-weight: 400; } .combined-equity { text-align: right; } .dash-equity-number { font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -0.01em; } .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .dash-grid .equity-chart-card { grid-column: 1; } .dash-grid .brain-card { grid-column: 2; grid-row: 1 / span 2; } .dash-grid .market-pulse-card { grid-column: 1; } @media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } .dash-grid .equity-chart-card, .dash-grid .brain-card, .dash-grid .market-pulse-card { grid-column: 1; grid-row: auto; } } /* ───────── Equity chart card ───────── */ .equity-chart-card .card-header { margin-bottom: 14px; } #equity-chart, #equity-page-chart { min-height: 180px; width: 100%; } .chart-empty { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); padding: 40px 0; text-align: center; } .chart-footer { margin-top: 12px; font-size: 12px; display: flex; align-items: center; gap: 8px; } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } /* ───────── Brain card ───────── */ .brain-card { border-top: 2px solid var(--coral); padding-top: 20px; } .brain-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 16px; } .brain-name { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); } .brain-model { font-size: 11px; letter-spacing: 0.05em; } .brain-controls { display: flex; gap: 4px; background: color-mix(in srgb, var(--ink) 5%, transparent); padding: 3px; border-radius: var(--radius-pill); } .ctrl-btn { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; padding: 6px 11px; background: transparent; border: none; color: var(--ink-mute); border-radius: var(--radius-pill); cursor: pointer; transition: all var(--dur-fast); } .ctrl-btn.active { background: var(--surface-card); color: var(--accent); font-weight: 600; box-shadow: var(--shadow-sm); } .ctrl-btn:hover:not(.active) { color: var(--ink-soft); } .brain-equity { font-family: var(--font-display); font-size: 44px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin-top: 8px; } .brain-pnl { font-size: 13px; margin-top: 6px; } .brain-divider { border: none; border-top: 1px solid color-mix(in srgb, var(--coral) 40%, transparent); margin: 18px 0; } .latest-decision { margin-top: 8px; } .latest-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .latest-action { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--ink); text-transform: capitalize; } .latest-time { font-size: 11px; color: var(--ink-mute); } .latest-reasoning { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 12px; } .latest-plain { padding: 10px 14px; background: color-mix(in srgb, var(--coral) 7%, transparent); border-radius: var(--radius-sm); font-size: 13px; color: var(--ink-soft); font-style: italic; line-height: 1.55; border-left: 3px solid color-mix(in srgb, var(--coral) 50%, transparent); } .watching-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); } .watch-line { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; line-height: 1.5; } .watch-tag { display: inline-block; font-size: 9px; letter-spacing: 0.15em; font-weight: 600; padding: 2px 6px; border-radius: 3px; margin-right: 8px; vertical-align: 1px; } .watch-tag.long { background: var(--pos-tint); color: var(--pos); } .watch-tag.short { background: var(--neg-tint); color: var(--neg); } .watch-tag.close { background: var(--neutral-tint); color: var(--neutral); } /* ───────── Market pulse card ───────── */ .market-pulse-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; } .pulse-tile { padding: 14px 12px; background: color-mix(in srgb, var(--ink) 3%, transparent); border-radius: var(--radius-sm); } .pulse-asset { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 6px; } .pulse-price { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); } .pulse-label { font-size: 10px; color: var(--pos); margin-top: 4px; } /* ───────── List items (decisions, trades, equity) ───────── */ .list-item { padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); } .list-item:last-child { border-bottom: none; } .list-item-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .list-item-title { font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--ink); text-transform: capitalize; } .list-item-time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); } .list-item-body { font-size: 13px; color: var(--ink-soft); line-height: 1.5; } .list-item-plain { margin-top: 8px; padding: 10px 14px; background: color-mix(in srgb, var(--coral) 7%, transparent); border-radius: var(--radius-sm); font-size: 13px; color: var(--ink-soft); font-style: italic; border-left: 3px solid color-mix(in srgb, var(--coral) 50%, transparent); } /* ───────── Settings page ───────── */ .settings-help { font-size: 13px; color: var(--ink-mute); margin: 4px 0 14px; line-height: 1.5; } .settings-help em { color: var(--accent); font-style: italic; font-weight: 500; } .settings-input { padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: var(--radius-sm); background: var(--surface-base); color: var(--ink); font-family: var(--font-mono); font-size: 14px; flex: 1; min-width: 0; } .settings-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .settings-error { color: var(--neg); font-size: 12px; margin-top: 8px; min-height: 16px; } .brain-name-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .btn-primary, .btn-ghost, .btn-danger { padding: 10px 16px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer; transition: all var(--dur-fast); border: 1px solid transparent; } .btn-primary { background: var(--coral); color: white; } .btn-primary:hover { opacity: 0.9; } .btn-ghost { background: transparent; color: var(--ink-soft); border-color: color-mix(in srgb, var(--ink) 12%, transparent); } .btn-ghost:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink); } .btn-danger { background: var(--neg); color: white; } .btn-danger:hover { opacity: 0.9; } /* Mode row */ .mode-row, .cadence-row, .plain-english-row, .theme-row { display: grid; gap: 10px; } .mode-row { grid-template-columns: repeat(3, 1fr); } .cadence-row { grid-template-columns: repeat(3, 1fr); } .plain-english-row { grid-template-columns: 1fr 1fr; } .theme-row { grid-template-columns: repeat(3, 1fr); } @media (max-width: 720px) { .mode-row, .cadence-row, .theme-row { grid-template-columns: 1fr; } .plain-english-row { grid-template-columns: 1fr; } } .mode-btn, .cadence-btn, .pe-btn, .theme-btn { padding: 14px 16px; background: color-mix(in srgb, var(--ink) 3%, transparent); border: 1.5px solid transparent; border-radius: var(--radius-sm); color: var(--ink-soft); font-family: var(--font-body); text-align: left; cursor: pointer; transition: all var(--dur-fast); } .mode-btn:hover, .cadence-btn:hover, .pe-btn:hover, .theme-btn:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); } .mode-btn.active, .cadence-btn.active, .pe-btn.active, .theme-btn.active { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, transparent); } .mode-btn { text-align: center; font-family: var(--font-display); font-size: 18px; font-weight: 500; } .cadence-name, .pe-name, .theme-name { font-family: var(--font-display); font-size: 17px; font-weight: 500; margin-bottom: 4px; color: var(--ink); } .cadence-sub, .pe-sub, .theme-sub { font-size: 11px; } .pe-btn.active .pe-name { color: var(--accent); } .cadence-btn.active .cadence-name { color: var(--accent); } .theme-btn.active .theme-name { color: var(--accent); } /* v0.2.1: explicit colour on inactive theme labels so Light/Dark/Auto all read with equal weight regardless of theme. The button-container transparency was bleeding through and washing out the inactive state. */ .theme-btn .theme-name { color: var(--ink); } .theme-btn .theme-sub { color: var(--ink-mute); } .theme-btn { color: var(--ink); } .mode-btn { color: var(--ink); } .mode-btn.active { color: var(--ink); } .cadence-btn .cadence-name { color: var(--ink); } .cadence-btn .cadence-sub { color: var(--ink-mute); } .pe-btn .pe-name { color: var(--ink); } .pe-btn .pe-sub { color: var(--ink-mute); } .theme-btn.active .theme-name, .cadence-btn.active .cadence-name, .pe-btn.active .pe-name { color: var(--accent); } .pe-savings { display: inline-block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; padding: 2px 6px; border-radius: 3px; background: color-mix(in srgb, var(--pos) 12%, transparent); color: var(--pos); margin-left: 6px; vertical-align: 3px; } .cost-block { margin-top: 14px; padding: 12px 14px; background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: var(--radius-sm); font-size: 13px; line-height: 1.6; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; font-size: 13px; } .about-grid .muted { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; }