/* ========================================================================= Site Ledger — hand-written CSS. No framework. Structure: tokens → reset → layout → components → states → responsive. Design restraint (per brief): 2 heading sizes, 1 body size, 1 accent colour, one 4px-based spacing scale. ========================================================================= */ /* ---- Theming model ----------------------------------------------------- A tiny inline script in resolves the theme (stored choice, else the OS preference) and sets `data-theme="light|dark"` on BEFORE first paint — so there is no flash of the wrong theme (FOUC). Because that script always writes a concrete value, the dark palette lives in exactly ONE place (`:root[data-theme='dark']`) with no media-query duplication to drift. Every colour below is a token; components never hard-code a hue, so a theme swap is just a different set of variables. Contrast pairs are WCAG-AA verified (see scripts/contrast audit) — notably `--accent-contrast`, the text colour that sits ON the accent, flips to near-black in dark mode where the accent is bright yellow (white-on-yellow fails AA at 1.67:1). ------------------------------------------------------------------------ */ :root, :root[data-theme='light'] { color-scheme: light; /* Accent (one colour, plus tints) + the text colour that sits on it */ --accent: #b45309; /* construction amber */ --accent-strong: #92400e; --accent-tint: #fef3c7; --accent-contrast: #ffffff; /* white on #b45309 = 5.02:1 (AA) */ /* Neutrals */ --bg: #f8fafc; --surface: #ffffff; --surface-2: #f1f5f9; --border: #e2e8f0; --text: #0f172a; --text-muted: #475569; /* 7.58:1 on white */ /* Semantic */ --danger: #b91c1c; --danger-tint: #fee2e2; --ok: #15803d; --ok-tint: #dcfce7; /* Category badge colours — all AA (>=4.5:1) with white text */ --cat-materials: #6d28d9; --cat-labour: #1d4ed8; --cat-transport: #0e7490; --cat-equipment: #a16207; --cat-other: #475569; /* Spacing scale (4px base) */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; /* Type scale: 2 heading sizes + 1 body */ --fs-body: 1rem; --fs-h2: 1.25rem; --fs-h1: 1.75rem; --radius: 0.75rem; --radius-sm: 0.5rem; --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.05); --ring: 0 0 0 3px rgba(180, 83, 9, 0.45); } :root[data-theme='dark'] { color-scheme: dark; --accent: #fbbf24; --accent-strong: #fcd34d; /* 10.6:1 on the dark surface */ --accent-tint: #422006; --accent-contrast: #1a1200; /* near-black on yellow = 11.1:1 (was white, 1.67) */ --bg: #0b1120; --surface: #111827; --surface-2: #1e293b; --border: #334155; --text: #e2e8f0; --text-muted: #94a3b8; /* 6.9:1 on --surface */ --danger: #fca5a5; --danger-tint: #450a0a; --ok: #86efac; --ok-tint: #052e16; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.4); --ring: 0 0 0 3px rgba(251, 191, 36, 0.5); } /* ---- Reset / base ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; /* padding + border stay inside the declared width */ } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: var(--fs-body); line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: 1.2; } a { color: var(--accent-strong); } button { font: inherit; cursor: pointer; } input, select { font: inherit; color: inherit; } :where(a, button, input, select, [tabindex]):focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); } /* ---- Accessibility helpers ------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--sp-2); top: -3rem; z-index: 10; padding: var(--sp-2) var(--sp-3); background: var(--accent); color: var(--accent-contrast); border-radius: var(--radius-sm); transition: top 0.15s ease; } .skip-link:focus { top: var(--sp-2); } /* ---- Header ----------------------------------------------------------- */ .app-header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; } .app-header__inner { max-width: 960px; margin-inline: auto; padding: var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); } .app-header__brand { display: flex; align-items: center; gap: var(--sp-2); } .app-header__logo { font-size: 1.5rem; } .app-header__title { font-size: var(--fs-h1); letter-spacing: -0.02em; } .app-header__actions { display: flex; align-items: center; gap: var(--sp-3); } /* Icon-only button (theme toggle). Square, high-contrast focus, no text. */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; font-size: 1.15rem; line-height: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); } .icon-btn:hover { background: var(--border); } .budget { font-weight: 600; padding: var(--sp-2) var(--sp-3); border-radius: 999px; background: var(--ok-tint); color: var(--ok); font-variant-numeric: tabular-nums; } .budget.budget--over { background: var(--danger-tint); color: var(--danger); } /* ---- Layout ----------------------------------------------------------- */ .layout { max-width: 960px; margin-inline: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-5); } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow); } .panel__title { font-size: var(--fs-h2); margin-bottom: var(--sp-4); } /* ---- Summary cards (GRID: 2×2 mobile → 4-up desktop) ------------------ */ .summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } .card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-4); } .card__label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .card__value { margin-top: var(--sp-1); font-size: var(--fs-h2); font-weight: 700; font-variant-numeric: tabular-nums; } .card--danger { background: var(--danger-tint); border-color: var(--danger); } .card--danger .card__value { color: var(--danger); } .card--ok .card__value { color: var(--ok); } /* ---- Category breakdown ---------------------------------------------- */ .breakdown-wrap { margin-top: var(--sp-4); } .breakdown-wrap > summary { cursor: pointer; color: var(--text-muted); font-weight: 600; padding: var(--sp-2) 0; } .breakdown { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); } .breakdown__head { display: flex; justify-content: space-between; font-size: 0.9rem; margin-bottom: var(--sp-1); } .breakdown__value { font-variant-numeric: tabular-nums; color: var(--text-muted); } .breakdown__bar { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .breakdown__fill { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width 0.25s ease; } /* ---- Form ------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4); } .field label { font-weight: 600; font-size: 0.9rem; } .field input, .field select { padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); width: 100%; } .field input[aria-invalid='true'], .field select[aria-invalid='true'] { border-color: var(--danger); } .field__error { min-height: 1.1rem; /* reserve space so layout doesn't jump when shown */ font-size: 0.82rem; color: var(--danger); } .field-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); } .field-row > .field { flex: 1 1 10rem; margin-bottom: var(--sp-4); } .form-actions { display: flex; gap: var(--sp-3); } /* ---- Buttons ---------------------------------------------------------- */ .btn { border: 1px solid transparent; border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); font-weight: 600; transition: background 0.15s ease, transform 0.05s ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); color: var(--accent-contrast); } .btn--primary:hover { background: var(--accent-strong); } .btn--ghost { background: transparent; border-color: var(--border); color: var(--text); } .btn--ghost:hover { background: var(--surface-2); } .btn--danger { background: transparent; border-color: var(--border); color: var(--danger); } .btn--danger:hover { background: var(--danger-tint); } /* ---- Ledger controls: search, sort, filters -------------------------- */ .ledger-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); } .ledger-controls { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } .search input { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); min-width: 12rem; } .sort-controls { display: flex; gap: var(--sp-2); } .sort { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); font-size: 0.9rem; color: var(--text-muted); } .sort--active { background: var(--accent-tint); color: var(--accent-strong); border-color: var(--accent); } /* Filter tabs (FLEX, wraps on mobile) */ .filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); } .tab { background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: var(--sp-2) var(--sp-4); font-size: 0.9rem; color: var(--text-muted); } .tab:hover { background: var(--surface-2); } .tab--active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } /* ---- Ledger list (FLEX rows) ----------------------------------------- */ .ledger-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); } /* Mobile-first: the row stacks. Description sits on its own line above the amount + action buttons, so a long description never gets crushed into a one-word-per-line sliver. The desktop layer below switches to one line. */ .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .row__main { flex: 1 1 100%; /* full width on mobile */ min-width: 0; /* allow text to wrap/truncate instead of overflowing */ } .row__side { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .row__desc { font-weight: 600; overflow-wrap: anywhere; } .row__meta { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); } .row__date { font-size: 0.82rem; color: var(--text-muted); } .row__amount { flex: 0 0 auto; /* fixed — never shrinks */ font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .row__amount--large { color: var(--accent-strong); } .row__actions { flex: 0 0 auto; display: flex; gap: var(--sp-2); } .row__actions .btn { padding: var(--sp-1) var(--sp-3); font-size: 0.85rem; } /* Category badges */ .badge { display: inline-block; padding: 0.1rem var(--sp-2); border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; } .badge--materials { background: var(--cat-materials); } .badge--labour { background: var(--cat-labour); } .badge--transport { background: var(--cat-transport); } .badge--equipment { background: var(--cat-equipment); } .badge--other { background: var(--cat-other); } /* ---- Empty state ------------------------------------------------------ */ .empty { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--text-muted); } .empty__icon { font-size: 2.5rem; margin-bottom: var(--sp-2); } /* ---- Footer ----------------------------------------------------------- */ .app-footer { max-width: 960px; margin: var(--sp-6) auto 0; padding: var(--sp-5) var(--sp-4); color: var(--text-muted); font-size: 0.85rem; text-align: center; } /* ---- Responsive: desktop layer (≥ 720px) ----------------------------- */ @media (min-width: 720px) { .summary-grid { grid-template-columns: repeat(4, 1fr); /* one row of four */ } .layout { padding-block: var(--sp-6); } /* Ledger rows collapse to a single line: description grows, amount and actions hold their natural width on the right. */ .row { flex-wrap: nowrap; gap: var(--sp-4); } .row__main { flex: 1 1 auto; } .row__side { flex: 0 0 auto; justify-content: flex-end; gap: var(--sp-4); } } /* Respect reduced-motion preferences. */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }