/* Budget Manager — design system * * Written in logical properties throughout (`inline-start`, not `left`) so one * stylesheet serves Hebrew and English: flipping `dir` on mirrors the * whole layout with no second set of rules. * * The look follows what finance products settle on for a reason: a calm neutral * ground, one accent, colour reserved for meaning (over budget, money in, money * out), and numbers set in tabular figures so columns of money line up. */ :root { /* Ground */ --bg: #f7f8fa; --surface: #ffffff; --surface-2: #f2f4f7; --line: #e4e7ec; --line-strong: #d0d5dd; /* Ink */ --ink: #101828; --ink-2: #475467; --ink-3: #98a2b3; /* Meaning */ --accent: #1d6f4c; --accent-ink: #ffffff; --accent-soft: #e7f2ec; --positive: #157347; --negative: #b42318; --warning: #b54708; --warning-soft: #fef0c7; /* Form */ --radius: 12px; --radius-sm: 8px; --radius-lg: 18px; --shadow-sm: 0 1px 2px rgb(16 24 40 / 6%); --shadow: 0 1px 3px rgb(16 24 40 / 8%), 0 1px 2px rgb(16 24 40 / 4%); --shadow-lg: 0 12px 32px rgb(16 24 40 / 10%); --sidebar: 248px; } @media (prefers-color-scheme: dark) { :root { --bg: #0d1117; --surface: #161b22; --surface-2: #1c232c; --line: #262d36; --line-strong: #333c47; --ink: #e6edf3; --ink-2: #9aa7b4; --ink-3: #6b7684; --accent: #4bbd85; --accent-ink: #06120c; --accent-soft: #16281f; --positive: #4bbd85; --negative: #f27c73; --warning: #e0975a; --warning-soft: #2a2013; --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%); --shadow: 0 1px 3px rgb(0 0 0 / 45%); --shadow-lg: 0 12px 32px rgb(0 0 0 / 45%); } } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Rubik, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { margin: 0; font-weight: 640; letter-spacing: -0.011em; } p { margin: 0; } /* Money and any figure in a column: same width per digit, so they align. */ .num, .money, td.amount, .stat-value, .hero-value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Numbers keep their own direction inside right-to-left sentences. */ .num { unicode-bidi: isolate; direction: ltr; display: inline-block; } .boot { display: grid; place-items: center; height: 100vh; color: var(--ink-3); } /* --- App frame ------------------------------------------------------------ */ .shell { display: grid; min-height: 100vh; } @media (min-width: 900px) { .shell { grid-template-columns: var(--sidebar) 1fr; } } .sidebar { display: none; flex-direction: column; gap: 4px; padding: 20px 14px; background: var(--surface); border-inline-end: 1px solid var(--line); position: sticky; top: 0; height: 100vh; } @media (min-width: 900px) { .sidebar { display: flex; } } .brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; font-weight: 680; font-size: 16px; letter-spacing: -0.01em; } .brand .mark { font-size: 20px; } .nav-link { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--radius-sm); color: var(--ink-2); text-decoration: none; font-size: 14.5px; font-weight: 520; border: 1px solid transparent; cursor: pointer; background: none; width: 100%; text-align: start; font-family: inherit; } .nav-link:hover { background: var(--surface-2); color: var(--ink); } .nav-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 620; } .nav-link .glyph { width: 20px; text-align: center; font-size: 15px; } .badge { background: var(--negative); color: #fff; border-radius: 99px; font-size: 11px; font-weight: 700; padding: 1px 6px; min-width: 18px; text-align: center; } .nav-link .badge { margin-inline-start: auto; } .nav-spacer { flex: 1; } .main { min-width: 0; padding: 0 0 96px; } @media (min-width: 900px) { .main { padding-block-end: 40px; } } .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-block-end: 1px solid var(--line); } @media (min-width: 900px) { .topbar { padding: 16px 28px; } } .topbar h1 { font-size: 19px; } .topbar .sub { color: var(--ink-3); font-size: 13px; margin-block-start: 1px; } .topbar-actions { display: flex; align-items: center; gap: 8px; } .page { padding: 18px 16px 0; display: grid; gap: 16px; } @media (min-width: 900px) { .page { padding: 24px 28px 0; max-width: 1080px; } } /* Bottom tabs on phones — thumb reach beats a hamburger. */ .tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: grid; grid-auto-flow: column; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(180%) blur(14px); border-block-start: 1px solid var(--line); padding-block: 6px; padding-block-end: max(6px, env(safe-area-inset-bottom)); } @media (min-width: 900px) { .tabbar { display: none; } } .tab { position: relative; display: grid; justify-items: center; gap: 2px; padding: 5px 2px; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 10.5px; font-weight: 560; cursor: pointer; } .tab .glyph { font-size: 17px; line-height: 1.1; } .tab.active { color: var(--accent); } /* No room for a number beside a tab label, so the same count reads as a dot. */ .tab .badge { position: absolute; top: 3px; inset-inline-start: 50%; margin-inline-start: 7px; padding: 0; min-width: 8px; height: 8px; font-size: 0; } /* --- Cards ---------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); } .card.flush { padding: 0; overflow: hidden; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 14px; } .card-title { font-size: 12.5px; font-weight: 640; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; } .grid { display: grid; gap: 14px; } .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 700px) { .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .grid.two, .grid.three { grid-template-columns: 1fr; } } /* --- Hero + stats --------------------------------------------------------- */ .hero { display: grid; gap: 4px; } .hero-label { color: var(--ink-3); font-size: 13px; font-weight: 560; } .hero-value { font-size: clamp(30px, 7vw, 40px); font-weight: 700; letter-spacing: -0.025em; } .hero-value.negative { color: var(--negative); } .hero-note { color: var(--ink-2); font-size: 13.5px; } .stat-label { color: var(--ink-3); font-size: 12px; font-weight: 620; text-transform: uppercase; letter-spacing: 0.045em; } .stat-value { font-size: 21px; font-weight: 670; letter-spacing: -0.015em; margin-block-start: 3px; } .stat-value.positive { color: var(--positive); } .stat-value.negative { color: var(--negative); } .stat-note { color: var(--ink-3); font-size: 12.5px; margin-block-start: 2px; } /* --- Bars ----------------------------------------------------------------- */ .bar { height: 7px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .bar > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1); } .bar.over > span { background: var(--negative); } .bar.thick { height: 10px; } /* --- Envelope rows -------------------------------------------------------- */ .env-row { padding: 13px 0; border-block-end: 1px solid var(--line); } .env-row:last-child { border-block-end: 0; padding-block-end: 0; } .env-row:first-child { padding-block-start: 0; } .env-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block-end: 7px; } .env-name { font-weight: 590; font-size: 14.5px; } .env-figs { color: var(--ink-2); font-size: 13px; white-space: nowrap; } .env-row.over .env-figs { color: var(--negative); font-weight: 560; } .env-children { margin-block-start: 8px; display: grid; gap: 3px; } .env-child { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-3); padding-inline-start: 14px; } /* --- Lists / tables ------------------------------------------------------- */ .list { display: grid; } .list-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-block-end: 1px solid var(--line); text-align: start; } .list-row:last-child { border-block-end: 0; } .list-row:hover { background: var(--surface-2); } .list-main { flex: 1; min-width: 0; } .list-title { font-weight: 540; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-sub { color: var(--ink-3); font-size: 12.5px; margin-block-start: 1px; } .list-amount { font-weight: 620; font-size: 14.5px; white-space: nowrap; } .list-amount.income { color: var(--positive); } .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 15px; flex: none; } /* --- Controls ------------------------------------------------------------- */ button, .button { font: inherit; font-weight: 560; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: var(--radius-sm); padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; white-space: nowrap; transition: background 120ms, border-color 120ms, opacity 120ms; } button:hover, .button:hover { background: var(--surface-2); } button:disabled { opacity: 0.5; cursor: not-allowed; } button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 620; } button.primary:hover, .button.primary:hover { opacity: 0.9; background: var(--accent); } button.ghost { border-color: transparent; background: none; color: var(--ink-2); } button.ghost:hover { background: var(--surface-2); color: var(--ink); } button.danger { color: var(--negative); border-color: transparent; background: none; } button.danger:hover { background: color-mix(in srgb, var(--negative) 10%, transparent); } button.sm, .button.sm { padding: 5px 10px; font-size: 13px; } button.block { width: 100%; } input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 11px; width: 100%; min-width: 0; } input::placeholder { color: var(--ink-3); } input[type="checkbox"] { width: auto; accent-color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .field { display: grid; gap: 5px; } .field > label { font-size: 12.5px; font-weight: 580; color: var(--ink-2); } .row { display: flex; gap: 8px; align-items: center; } .row.wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 560; border: 1px solid var(--line); } .chip.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .chip.warn { background: var(--warning-soft); color: var(--warning); border-color: transparent; } .segmented { display: inline-flex; background: var(--surface-2); border-radius: var(--radius-sm); padding: 3px; gap: 3px; } .segmented button { border: 0; background: none; padding: 5px 12px; font-size: 13px; border-radius: 6px; color: var(--ink-2); } .segmented button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 620; } /* --- Notices -------------------------------------------------------------- */ .notice { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13.5px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid transparent; } .notice.info { background: var(--accent-soft); color: var(--accent); } .notice.warn { background: var(--warning-soft); color: var(--warning); } .notice.error { background: color-mix(in srgb, var(--negative) 10%, transparent); color: var(--negative); } .toast { position: fixed; inset-inline: 0; bottom: 84px; z-index: 60; margin-inline: auto; width: max-content; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 99px; background: var(--ink); color: var(--bg); font-size: 13.5px; font-weight: 560; box-shadow: var(--shadow-lg); animation: rise 200ms ease; } @media (min-width: 900px) { .toast { bottom: 28px; } } .toast.error { background: var(--negative); color: #fff; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } } .empty { text-align: center; color: var(--ink-3); padding: 34px 16px; font-size: 14px; } .empty .glyph { font-size: 26px; display: block; margin-block-end: 8px; opacity: 0.7; } /* --- Modal ---------------------------------------------------------------- */ .scrim { position: fixed; inset: 0; z-index: 50; background: rgb(16 24 40 / 45%); display: grid; place-items: end center; padding: 0; animation: fade 140ms ease; } @media (min-width: 700px) { .scrim { place-items: center; padding: 24px; } } @keyframes fade { from { opacity: 0; } } .sheet { background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; width: 100%; max-width: 520px; padding: 20px; box-shadow: var(--shadow-lg); animation: rise 220ms cubic-bezier(0.32, 0.72, 0, 1); max-height: 92vh; overflow-y: auto; } @media (min-width: 700px) { .sheet { border-radius: var(--radius-lg); } } .sheet-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 16px; } .sheet-head h2 { font-size: 17px; } /* --- Charts --------------------------------------------------------------- */ .chart { width: 100%; display: block; overflow: visible; } .chart .bar-mark { fill: var(--accent); } .chart .bar-mark.muted { fill: var(--line-strong); } .chart .axis { fill: var(--ink-3); font-size: 10px; } .chart .grid-line { stroke: var(--line); stroke-width: 1; } .legend { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 10px; } .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); } .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; } /* --- Auth / wizard -------------------------------------------------------- */ .centered { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .panel { width: 100%; max-width: 400px; } .panel h1 { font-size: 23px; text-align: center; margin-block-end: 4px; } .panel .lede { text-align: center; color: var(--ink-2); font-size: 14px; margin-block-end: 20px; } .divider { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12.5px; margin-block: 16px; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .steps { display: flex; gap: 5px; margin-block-end: 18px; } .steps > span { flex: 1; height: 3px; border-radius: 99px; background: var(--line); } .steps > span.done { background: var(--accent); } .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: var(--radius-sm); } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }