/* ================================================================= Trading journal — "trading-desk ledger" Semantic green/red are the protagonists; brass-gold is the single structural accent. No marketing gradient on this page. ================================================================= */ :root { --ink: #0a0c10; --ink-2: #0d1015; --ink-3: #11151c; --ink-line: rgba(255, 255, 255, 0.07); --ink-line-2: rgba(255, 255, 255, 0.12); --paper: #e8e6df; --t-1: #e9ecf1; --t-2: #9aa3b0; --t-3: #5b6472; --up: #3fd17a; --up-deep: #2bbd68; --down: #ff5d5d; --gold: #d8a657; --gold-soft: rgba(216, 166, 87, 0.14); --r: 5px; --mono: 'JetBrains Mono', ui-monospace, monospace; } /* ── page shell ─────────────────────────────────────────── */ .trading-body { background: var(--ink); background-image: linear-gradient(var(--ink-line) 1px, transparent 1px), linear-gradient(90deg, var(--ink-line) 1px, transparent 1px); background-size: 46px 46px; background-position: center top; cursor: auto; } .trading-body::before { /* fade the chart grid so it stays atmospheric, never busy */ content: ''; position: fixed; inset: 0; background: radial-gradient(120% 90% at 50% 0%, transparent 40%, var(--ink) 92%); pointer-events: none; z-index: 0; } .trading-page { position: relative; z-index: 1; } .page-body { min-height: 100vh; cursor: auto; } /* keep injected nav legible (no scroll handler on inner pages) + retint to gold */ .blog-nav { background: rgba(10, 12, 16, 0.86) !important; border-bottom: 1px solid var(--ink-line) !important; backdrop-filter: saturate(140%) blur(18px); } .blog-nav .nav-links a[data-nav]::after { background: var(--gold) !important; } .blog-nav .nav-links a[data-nav].active { color: var(--t-1); } .blog-nav .nav-cta { background: transparent !important; color: var(--gold) !important; border: 1px solid rgba(216, 166, 87, 0.4) !important; border-radius: 4px !important; } .blog-nav .nav-cta:hover { background: var(--gold-soft) !important; } .pos { color: var(--up); } .neg { color: var(--down); } .muted { color: var(--t-3); } .dot { color: var(--t-3); margin: 0 8px; } .eyebrow { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } /* ── hero ───────────────────────────────────────────────── */ .trading-page { padding: calc(var(--nav-h) + 64px) 0 110px; } .ledger-hero__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid var(--ink-line); } .net { display: grid; grid-template-columns: minmax(220px, 0.8fr) 1.6fr; gap: 12px 48px; align-items: end; padding: 40px 0 28px; } .net__head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } /* ── live / demo mode toggle ────────────────────────────── */ .mode-toggle { display: inline-flex; gap: 3px; padding: 3px; margin-bottom: 6px; border: 1px solid var(--ink-line); border-radius: 999px; background: var(--ink-2); } .mode-toggle__btn { font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-3); background: none; border: 0; padding: 5px 15px; border-radius: 999px; cursor: pointer; transition: color 0.18s ease, background 0.18s ease; } .mode-toggle__btn:hover { color: var(--t-1); } .mode-toggle__btn.is-active { color: var(--ink); } .mode-toggle__btn[data-mode="live"].is-active { background: var(--up); } /* Demo active pill glows cyan — its own identity, not the brass live accent. */ .mode-toggle__btn[data-mode="demo"].is-active { background: var(--demo); box-shadow: 0 0 14px var(--demo-glow); } /* ── demo mode: a cool cyan skin ──────────────────────────── Scoped on so it reaches the day drawer and modals too. Everything retints at once by re-pointing the theme variables: the brass accent → cyan, and even the P&L green/red → a cooler teal / magenta pair so a demo screenshot can't be mistaken for the live book. Direction (win = bright, loss = hot) is preserved. */ :root { --demo: #35d0e0; --demo-glow: rgba(53, 208, 224, 0.45); } body.is-demo { --gold: #35d0e0; --gold-soft: rgba(53, 208, 224, 0.14); --up: #2ee6c0; /* demo win — teal */ --down: #ff5c8a; /* demo loss — cool magenta */ } /* Neutral (flat) net number reads cyan instead of plain white in demo. */ body.is-demo .net__value:not(.pos):not(.neg) { color: var(--demo); } /* Cooler ambient wash + cyan glow on the equity line so demo feels like a lab. */ body.is-demo .trading-page { background: radial-gradient(120% 60% at 50% -10%, rgba(53, 208, 224, 0.06), transparent 60%); } body.is-demo .equity__line { filter: drop-shadow(0 0 10px var(--demo-glow)); } body.is-demo .eyebrow::after { content: '· sandbox'; color: var(--demo); opacity: 0.7; margin-left: 0.5em; } /* Direction badges in the drawer carry hardcoded green/red fills — cool them. */ body.is-demo .trade-row__dir--long { background: rgba(46, 230, 192, 0.14); } body.is-demo .trade-row__dir--short { background: rgba(255, 92, 138, 0.14); } .net__label { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-3); } .net__value { font-family: var(--mono); font-weight: 700; font-size: clamp(3rem, 8.5vw, 6rem); line-height: 0.92; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--t-1); align-self: stretch; white-space: nowrap; /* keep on one line so JS can measure & shrink to fit */ } .net__value.pos { color: var(--up); } .net__value.neg { color: var(--down); } .net__meta { font-family: var(--mono); font-size: 0.82rem; color: var(--t-2); letter-spacing: 0.01em; } /* ── equity curve (the signature) ───────────────────────── */ .equity { position: relative; height: 150px; align-self: stretch; } .equity__svg { width: 100%; height: 100%; display: block; overflow: visible; } .equity__zero { stroke: var(--ink-line-2); stroke-width: 1; stroke-dasharray: 2 5; } .equity__line { stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: equityDraw 1.6s var(--ease, ease-out) 0.15s forwards; filter: drop-shadow(0 0 10px rgba(63, 209, 122, 0.25)); } .equity__dot { opacity: 0; animation: equityDot 0.4s ease 1.5s forwards; } .equity__empty { height: 100%; display: flex; align-items: center; font-family: var(--mono); font-size: 0.84rem; color: var(--t-3); border-bottom: 1px dashed var(--ink-line-2); } @keyframes equityDraw { to { stroke-dashoffset: 0; } } @keyframes equityDot { to { opacity: 1; } } /* ── ledger strip (stats as a terminal status bar) ──────── */ .ledger-strip { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--ink-line); border-radius: var(--r); background: var(--ink-2); margin-top: 8px; overflow: hidden; } .ledger__cell { padding: 18px 22px; border-left: 1px solid var(--ink-line); display: flex; flex-direction: column; gap: 7px; } .ledger__cell:first-child { border-left: none; } .ledger__k { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--t-3); } .ledger__v { font-family: var(--mono); font-size: 1.32rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--t-1); } /* ── calendar ───────────────────────────────────────────── */ .calendar { margin-top: 72px; } .calendar__head { display: flex; align-items: baseline; gap: 18px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--ink-line); } .calendar__title { font-family: var(--mono); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; color: var(--t-1); } .calendar__summary { font-family: var(--mono); font-size: 0.82rem; color: var(--t-2); } .calendar__summary .pos, .calendar__summary .neg { font-weight: 600; } .calendar__nav { margin-left: auto; display: flex; gap: 8px; } .cal-nav { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--ink-line); border-radius: 4px; background: var(--ink-2); color: var(--t-2); cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; } .cal-nav:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line); border-radius: var(--r); overflow: hidden; } .cal-weekday { background: var(--ink-2); text-align: left; padding: 9px 12px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-3); } .cal-cell { position: relative; min-height: 96px; padding: 10px 12px; background: var(--ink-2); display: flex; flex-direction: column; transition: box-shadow 0.18s, transform 0.18s; } .cal-cell--empty { background: var(--ink); } .cal-cell__num { font-family: var(--mono); font-size: 0.82rem; color: var(--t-3); font-variant-numeric: tabular-nums; } .cal-cell__pnl { margin-top: auto; font-family: var(--mono); font-size: 1.02rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .cal-cell__count { position: absolute; top: 10px; right: 12px; font-family: var(--mono); font-size: 0.64rem; color: var(--t-3); } .cal-cell--pos .cal-cell__pnl { color: var(--up); } .cal-cell--neg .cal-cell__pnl { color: var(--down); } .cal-cell--flat .cal-cell__pnl { color: var(--t-2); } .cal-cell--clickable { cursor: pointer; } .cal-cell--clickable:hover { box-shadow: inset 0 0 0 1px var(--ink-line-2); transform: translateY(-1px); z-index: 1; } .cal-cell--today .cal-cell__num { color: var(--gold); } .cal-cell--today::after { content: ''; position: absolute; left: 12px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); transform: translateX(16px); } /* ── buttons ────────────────────────────────────────────── */ .btn-solid { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: 1px solid var(--gold); border-radius: 4px; background: var(--gold); color: #1a1206; font-family: var(--mono); font-size: 0.84rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: transform 0.2s var(--ease, ease), background 0.2s, box-shadow 0.2s; } .btn-solid:hover { background: #e6b76a; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(216, 166, 87, 0.22); } .btn-block { width: 100%; } .btn-google { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border: 1px solid var(--ink-line-2); border-radius: 4px; background: var(--ink-3); color: var(--t-1); font-family: var(--mono); font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.2s; } .btn-google:hover { border-color: var(--t-3); transform: translateY(-1px); } .link-btn { background: none; border: none; color: var(--t-2); font-family: var(--mono); font-size: 0.76rem; cursor: pointer; padding: 4px 2px; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .link-btn:hover { color: var(--t-1); border-color: var(--t-3); } .link-btn--danger { color: var(--down); } .link-btn--danger:hover { color: var(--down); border-color: var(--down); } .btn-line { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid rgba(216, 166, 87, 0.4); border-radius: 4px; background: transparent; color: var(--gold); font-family: var(--mono); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.2s; } .btn-line:hover { background: var(--gold-soft); border-color: var(--gold); transform: translateY(-1px); } .btn-line[hidden] { display: none; } .ledger-hero__tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--ink-line); border-radius: 4px; background: transparent; color: var(--t-2); cursor: pointer; flex-shrink: 0; transition: border-color 0.2s, color 0.2s; } .icon-btn:hover { border-color: var(--ink-line-2); color: var(--t-1); } /* ── auth chip ──────────────────────────────────────────── */ .auth-user { display: flex; align-items: center; gap: 11px; padding: 6px 6px 6px 12px; border: 1px solid var(--ink-line); border-radius: 4px; background: var(--ink-2); } .auth-avatar { width: 30px; height: 30px; border-radius: 3px; } .auth-user__meta { display: flex; flex-direction: column; line-height: 1.25; } .auth-user__name { font-size: 0.82rem; font-weight: 500; color: var(--t-1); } .auth-role { font-family: var(--mono); font-size: 0.66rem; color: var(--t-3); letter-spacing: 0.04em; } .auth-role--admin { color: var(--up); } /* ── setup notice ───────────────────────────────────────── */ .setup-notice { margin: 4px 0 0; padding: 13px 18px; border: 1px solid var(--ink-line); border-left: 2px solid var(--gold); border-radius: var(--r); background: var(--ink-2); color: var(--t-2); font-size: 0.86rem; } .setup-notice strong { color: var(--t-1); } .setup-notice code { font-family: var(--mono); color: var(--gold); } /* ── day drawer ─────────────────────────────────────────── */ .day-panel { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 92vw); z-index: 1200; background: var(--ink-2); border-left: 1px solid var(--ink-line-2); box-shadow: -30px 0 70px rgba(0, 0, 0, 0.6); transform: translateX(101%); transition: transform 0.42s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)); display: flex; flex-direction: column; padding: 30px 26px; } .day-panel.open { transform: translateX(0); } .day-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .day-panel__eyebrow { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } .day-panel__head h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.3; margin: 7px 0 5px; color: var(--t-1); } .day-panel__summary { font-family: var(--mono); font-size: 0.8rem; color: var(--t-2); } .day-panel__trades { flex: 1; overflow-y: auto; margin: 22px -4px; padding: 0 4px; display: flex; flex-direction: column; gap: 10px; } .day-empty { color: var(--t-3); font-size: 0.88rem; padding: 24px 0; line-height: 1.5; } .trade-row { position: relative; padding: 14px 16px; border: 1px solid var(--ink-line); border-left: 2px solid var(--ink-line-2); border-radius: 4px; background: var(--ink-3); } .trade-row.pos { border-left-color: var(--up); } .trade-row.neg { border-left-color: var(--down); } .trade-row__head { display: flex; align-items: center; gap: 10px; } .trade-row__sym { font-family: var(--mono); font-weight: 600; font-size: 0.92rem; color: var(--t-1); } .trade-row__dir { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; } .trade-row__dir--long { background: rgba(63, 209, 122, 0.14); color: var(--up); } .trade-row__dir--short { background: rgba(255, 93, 93, 0.14); color: var(--down); } .trade-row__pnl { margin-left: auto; font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; } .trade-row.pos .trade-row__pnl { color: var(--up); } .trade-row.neg .trade-row__pnl { color: var(--down); } .trade-row__detail { display: block; margin-top: 9px; font-family: var(--mono); font-size: 0.74rem; color: var(--t-3); } .trade-row__notes { display: block; margin-top: 8px; font-size: 0.84rem; color: var(--t-2); line-height: 1.5; } .trade-row__edit { margin-top: 10px; background: none; border: none; padding: 0; font-family: var(--mono); font-size: 0.7rem; color: var(--gold); cursor: pointer; } .trade-row__edit:hover { text-decoration: underline; } /* ── modal ──────────────────────────────────────────────── */ .modal { position: fixed; inset: 0; z-index: 1400; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(4, 6, 9, 0.7); backdrop-filter: blur(5px); } .modal.open { display: flex; } .modal__card { width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; background: var(--ink-2); border: 1px solid var(--ink-line-2); border-radius: var(--r); padding: 26px 28px 28px; } .modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .modal__head h3 { font-family: var(--mono); font-size: 1.05rem; font-weight: 600; color: var(--t-1); } .modal__actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 24px; } .modal__actions #tradeDelete { margin-right: auto; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .field { display: flex; flex-direction: column; gap: 7px; } .field--full { grid-column: 1 / -1; } .field span { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-2); } .field span em { color: var(--t-3); font-style: normal; text-transform: none; letter-spacing: 0; } .field input, .field select, .field textarea { font-family: var(--mono); font-size: 0.88rem; color: var(--t-1); background: var(--ink); border: 1px solid var(--ink-line); border-radius: 4px; padding: 11px 12px; transition: border-color 0.18s, box-shadow 0.18s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); } .field textarea { resize: vertical; font-family: 'Space Grotesk', sans-serif; } .field input[type="date"] { color-scheme: dark; } /* ── MT5 import ──────────────────────────────────────────── */ .import-steps { font-size: 0.84rem; color: var(--t-2); line-height: 1.55; margin-bottom: 18px; padding: 12px 14px; border: 1px solid var(--ink-line); border-left: 2px solid var(--gold); border-radius: 4px; background: var(--ink); } .import-steps strong { color: var(--t-1); font-weight: 600; } .field input[type="file"] { font-family: var(--mono); font-size: 0.78rem; color: var(--t-2); padding: 9px 10px; } .field input[type="file"]::file-selector-button { font-family: var(--mono); font-size: 0.74rem; color: var(--gold); background: var(--gold-soft); border: 1px solid rgba(216, 166, 87, 0.4); border-radius: 3px; padding: 6px 10px; margin-right: 12px; cursor: pointer; } .import-preview { margin-top: 18px; } .import-hint { font-family: var(--mono); font-size: 0.78rem; color: var(--t-3); line-height: 1.5; } .import-error { font-family: var(--mono); font-size: 0.8rem; color: var(--down); line-height: 1.5; } .import-warn { font-family: var(--mono); font-size: 0.74rem; color: var(--gold); margin-top: 6px; } .import-summary { font-family: var(--mono); font-size: 0.9rem; color: var(--t-1); padding-bottom: 12px; border-bottom: 1px solid var(--ink-line); } .import-summary strong { font-size: 1.05rem; } .import-range { display: block; margin-top: 4px; font-size: 0.74rem; color: var(--t-3); } .import-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 1px; } .import-row { display: grid; grid-template-columns: 92px 1fr 48px auto; gap: 10px; align-items: center; padding: 8px 4px; font-family: var(--mono); font-size: 0.78rem; border-bottom: 1px solid var(--ink-line); } .import-row__date { color: var(--t-3); } .import-row__sym { color: var(--t-1); font-weight: 600; } .import-row__dir { color: var(--t-3); font-size: 0.68rem; text-transform: uppercase; } .import-row__pnl { text-align: right; font-weight: 600; } .import-row.pos .import-row__pnl { color: var(--up); } .import-row.neg .import-row__pnl { color: var(--down); } /* ── toast ──────────────────────────────────────────────── */ .toast { position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 18px); z-index: 1600; padding: 12px 20px; background: var(--ink-3); border: 1px solid var(--ink-line-2); border-left: 2px solid var(--gold); border-radius: 4px; font-family: var(--mono); font-size: 0.82rem; color: var(--t-1); opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s var(--ease, ease); } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ── privacy page (shares this sheet) ───────────────────── */ .privacy-page { padding: calc(var(--nav-h) + 56px) 0 120px; position: relative; z-index: 1; } .privacy-page h1 { font-family: var(--mono); font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 600; margin-bottom: 8px; color: var(--t-1); } .privacy-page h2 { font-size: 1.15rem; font-weight: 600; margin: 32px 0 10px; color: var(--t-1); } .privacy-page p { color: var(--t-2); margin-bottom: 12px; } .privacy-page a { color: var(--gold); } .link-back { display: inline-block; margin-top: 32px; color: var(--gold) !important; font-family: var(--mono); font-size: 0.85rem; } /* ── responsive ─────────────────────────────────────────── */ @media (max-width: 860px) { .net { grid-template-columns: 1fr; gap: 20px; } .equity { height: 120px; } .ledger-strip { grid-template-columns: repeat(2, 1fr); } .ledger__cell:nth-child(3) { border-left: none; } } @media (max-width: 560px) { .trading-page { padding-top: calc(var(--nav-h) + 40px); } .net__value { font-size: clamp(2.6rem, 14vw, 3.4rem); } .ledger-strip { grid-template-columns: 1fr 1fr; } .calendar__head { flex-wrap: wrap; } .calendar__nav { margin-left: auto; } .cal-grid { gap: 1px; } .cal-cell { min-height: 58px; padding: 6px 7px; } .cal-cell__pnl { font-size: 0.74rem; } .cal-cell__count { display: none; } .cal-weekday { padding: 7px 7px; font-size: 0.56rem; letter-spacing: 0.08em; text-align: center; } .form-grid { grid-template-columns: 1fr; } } /* ── reduced motion ─────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .equity__line { animation: none; stroke-dashoffset: 0; } .equity__dot { animation: none; opacity: 1; } .day-panel { transition: none; } }