/* Deal Ledger — refined financial-ledger aesthetic. Light, precise, restrained. IBM Plex Sans for UI, IBM Plex Mono for figures. One ink accent; red reserved strictly for amounts owed / negative. */ :root { --paper: #f6f5f1; /* warm off-white background */ --surface: #ffffff; --surface-2: #fbfaf7; --ink: #1a1c1e; /* near-black text */ --ink-soft: #595d63; --ink-faint: #8b9097; --line: #e6e3db; /* hairline borders */ --line-soft: #efede7; --accent: #0f5132; /* deep forest — the brand ink */ --accent-2: #117a4a; --accent-bg: #e8f1ec; --pos: #117a4a; --neg: #b42318; --neg-bg: #fbeae8; --warn-bg: #fef6e7; --shadow: 0 1px 2px rgba(20,22,26,.04), 0 4px 16px rgba(20,22,26,.04); --radius: 12px; } /* Dark theme — same restrained ledger feel, easy on the eyes. Activated by data-theme="dark" on ; toggle remembers your choice. */ :root[data-theme="dark"] { --paper: #121417; /* deep neutral, not pure black */ --surface: #1a1d21; --surface-2: #21252a; --ink: #e7e9ec; --ink-soft: #a4abb3; --ink-faint: #757c85; --line: #2c3138; --line-soft: #24282e; --accent: #4cc38a; /* brighter green so it reads on dark */ --accent-2: #6ad0a0; --accent-bg: #16271f; --pos: #4cc38a; --neg: #f87171; --neg-bg: #2a1b1b; --warn-bg: #2a2415; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.28); } /* accent buttons keep dark text on the bright-green fill for contrast */ :root[data-theme="dark"] button:not(.ghost):not(.del), :root[data-theme="dark"] .topbar nav a.cta { color: #0c1a12; } :root[data-theme="dark"] .topbar { background: rgba(26,29,33,.82); } /* the theme toggle button in the nav */ .theme-toggle { background: none; border: 1px solid var(--line); color: var(--ink-soft); border-radius: 8px; padding: .3rem .55rem; font-size: .95rem; line-height: 1; margin: 0; cursor: pointer; } .theme-toggle:hover { background: var(--surface-2); color: var(--ink); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14.5px; line-height: 1.55; background: var(--paper); color: var(--ink); letter-spacing: -0.005em; } .mono, .amt, td.num, th.num { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 .15rem; letter-spacing: -0.02em; } h2 { font-size: .95rem; font-weight: 600; margin: 0 0 .9rem; letter-spacing: -0.01em; } /* ---- top bar ---- */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1.5rem; padding: .8rem 1.5rem; background: rgba(255,255,255,.82); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--line); } .brand { font-weight: 600; font-size: 1rem; color: var(--ink); display: flex; align-items: center; gap: .55rem; letter-spacing: -0.02em; } .brand .dot { width: 9px; height: 9px; border-radius: 3px; background: var(--accent); display: inline-block; } .topbar nav { display: flex; align-items: center; gap: .35rem; margin-left: auto; } .topbar nav a { color: var(--ink-soft); padding: .35rem .7rem; border-radius: 8px; font-weight: 500; font-size: .9rem; } .topbar nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; } .topbar nav a.cta { background: var(--accent); color: #fff; } .topbar nav a.cta:hover { background: var(--accent-2); } .topbar .who { color: var(--ink-faint); font-size: .85rem; padding-left: .4rem; border-left: 1px solid var(--line); } .wrap { max-width: 1120px; margin: 0 auto; padding: 1.6rem 1.5rem 4rem; } .page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; } .page-head .sub { color: var(--ink-faint); font-size: .9rem; } /* ---- cards ---- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem; margin-bottom: 1.1rem; box-shadow: var(--shadow); } .card.flush { padding: 0; overflow: hidden; } .card-head { padding: 1.05rem 1.25rem .35rem; } /* ---- stat cards ---- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.1rem; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); } .stat .label { color: var(--ink-faint); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .stat .value { font-size: 1.55rem; font-weight: 600; margin-top: .35rem; letter-spacing: -0.02em; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; } .stat .meta { color: var(--ink-faint); font-size: .8rem; margin-top: .1rem; } /* ---- tables ---- */ table { width: 100%; border-collapse: collapse; } thead th { text-align: left; padding: .6rem .9rem; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); border-bottom: 1px solid var(--line); background: var(--surface-2); } tbody td { padding: .68rem .9rem; border-bottom: 1px solid var(--line-soft); font-size: .9rem; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--surface-2); } th.num, td.num { text-align: right; } .flush table thead th:first-child, .flush table tbody td:first-child { padding-left: 1.25rem; } .flush table thead th:last-child, .flush table tbody td:last-child { padding-right: 1.25rem; } table.kv td { padding: .5rem .25rem; border-bottom: 1px solid var(--line-soft); } table.kv tr:last-child td { border-bottom: 0; } table.kv td:first-child { color: var(--ink-soft); } table.kv td:last-child { text-align: right; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; } .pos { color: var(--pos); } .neg { color: var(--neg); } .muted { color: var(--ink-faint); font-size: .85rem; } .hint { color: var(--ink-faint); font-weight: 400; font-size: .8rem; } /* ---- settlement ---- */ .settle-line { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 10px; margin-bottom: .55rem; background: var(--surface-2); font-size: .95rem; } .settle-line .arrow { color: var(--ink-faint); } .settle-line .amt { margin-left: auto; font-weight: 600; color: var(--accent); font-size: 1.02rem; } .allsquare { display: flex; align-items: center; gap: .5rem; color: var(--pos); font-weight: 500; } /* ---- pills / tags ---- */ .pill { font-size: .7rem; padding: .18rem .55rem; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .pill.open { background: var(--accent-bg); color: var(--accent); } .pill.closed { background: #eee9df; color: #7a6f57; } .tx { font-size: .68rem; padding: .14rem .5rem; border-radius: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .tx.cost { background: var(--neg-bg); color: var(--neg); } .tx.revenue { background: var(--accent-bg); color: var(--accent); } .tx.payout { background: #eaf0f7; color: #2c5b8f; } .tx.transfer { background: var(--warn-bg); color: #8a6a16; } /* ---- forms ---- */ form label { display: block; margin: .65rem 0; font-size: .82rem; color: var(--ink-soft); font-weight: 500; } input, select, textarea { width: 100%; margin-top: .3rem; padding: .55rem .65rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; font-size: .92rem; font-family: inherit; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-bg); border-color: var(--accent-2); } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; } .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .8rem; } button { background: var(--accent); color: #fff; border: 0; border-radius: 9px; padding: .58rem 1rem; font-size: .9rem; font-weight: 600; cursor: pointer; font-family: inherit; margin-top: .4rem; } button:hover { background: var(--accent-2); } button.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } button.ghost:hover { background: var(--surface-2); } button.del { background: none; color: var(--ink-faint); padding: .15rem .45rem; font-size: .95rem; margin: 0; } button.del:hover { color: var(--neg); background: var(--neg-bg); } .inline { display: inline; margin: 0; } .split-row { display: flex; align-items: center; gap: .6rem; margin: .45rem 0; } .split-row span { flex: 1; color: var(--ink-soft); } .split-row input { width: 84px; margin: 0; } .hidden { display: none; } /* ---- layout ---- */ .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; } .deal-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .15rem; } /* ---- reports filter chips ---- */ .chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; } .chips a { padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font-size: .85rem; font-weight: 500; } .chips a:hover { background: var(--surface-2); text-decoration: none; } .chips a.active { background: var(--accent); color: #fff; border-color: var(--accent); } .export-row { display: flex; gap: .6rem; margin-top: .3rem; } .export-row a { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .85rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: .85rem; font-weight: 500; } .export-row a:hover { background: var(--surface-2); text-decoration: none; } /* ---- login ---- */ .login-shell { min-height: 78vh; display: flex; align-items: center; justify-content: center; } .login-card { width: 340px; } .login-card .brand { justify-content: center; font-size: 1.15rem; margin-bottom: 1.3rem; } .error { background: var(--neg-bg); color: var(--neg); padding: .55rem .75rem; border-radius: 9px; font-size: .85rem; } /* ---- audit log ---- */ .log-action { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); } /* subtle page-load fade */ .wrap > * { animation: rise .35s ease both; } @keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } .cols { grid-template-columns: 1fr; } .row-3 { grid-template-columns: 1fr; } .topbar { gap: .8rem; padding: .7rem 1rem; } .topbar nav { gap: .15rem; } .topbar nav a { padding: .3rem .5rem; font-size: .85rem; } .topbar .who { display: none; } .wrap { padding: 1.1rem 1rem 3rem; } } /* theme toggle icon: moon in light mode (tap -> dark), sun in dark mode */ .theme-toggle .t-sun { display: none; } .theme-toggle .t-moon { display: inline; } :root[data-theme="dark"] .theme-toggle .t-moon { display: none; } :root[data-theme="dark"] .theme-toggle .t-sun { display: inline; } /* undo/redo cluster in the top bar */ .histnav { display: flex; gap: .2rem; margin-left: .4rem; } .histnav .hist { background: none; border: 1px solid var(--line); color: var(--ink-soft); border-radius: 8px; padding: .22rem .5rem; font-size: 1rem; line-height: 1; margin: 0; cursor: pointer; min-width: 30px; } .histnav .hist:hover:not([disabled]) { background: var(--surface-2); color: var(--ink); } .histnav .hist[disabled] { opacity: .35; cursor: default; } @media (max-width: 860px) { .histnav { margin-left: .2rem; } }