/* * This is a manifest file that'll be compiled into application.css. * * With Propshaft, assets are served efficiently without preprocessing steps. You can still include * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard * cascading order, meaning styles declared later in the document or manifest will override earlier ones, * depending on specificity. * * Consider organizing styles into separate files for maintainability. */ :root { --ink: #1a1d21; --ink-muted: #5c6470; /* Faint, but never below the 4.5:1 body-text minimum: this carries content, not decoration — the form's hints, the "—" that means a question went unanswered, and "Not sent yet" against a client text that did not go. 4.8:1 on white and 4.5:1 on the sunken surface it sits on in table rows. */ --ink-faint: #6b7280; --rule: #e2e5ea; --surface: #ffffff; --surface-sunken: #f6f7f9; /* Provisional figures are not a warning about a mistake — they are a warning that the number will move. Amber, not red: nothing is wrong. */ /* A field the form rejected. 7.3:1 on white and 6.5:1 on its own tint, so the message reads as text rather than only as a colour. Redefined for dark mode below — the tint is an input's *background*, so leaving it light there left the firm typing dark-mode ink onto a near-white fill. */ --error: #a4262c; --error-bg: #fdf0ef; --caution: #8a5a00; --caution-bg: #fdf6e6; --caution-rule: #e8c987; --settled: #2f6b4f; --settled-bg: #eef5f1; --measure: 52rem; /* The width of the page body, which the account bar above it matches. Prose by default; a wide page sets --page-measure on instead. */ --page-measure: var(--measure); --measure-wide: 68rem; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 2.5rem 1.5rem 4rem; background: var(--surface-sunken); color: var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Money and dates are compared down the column, so they need consistent digit widths. Tabular figures keep them from shifting against each other. */ .client__payoff, .client__facts dd { font-variant-numeric: tabular-nums; } /* ---- Flash ------------------------------------------------------------- */ .flash { max-width: var(--measure); margin: 0 auto 1.5rem; padding: 0.75rem 1rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); font-size: 0.9375rem; } .flash--alert { border-color: var(--caution-rule); background: var(--caution-bg); color: var(--caution); } .flash--notice { border-color: #b9d4c6; background: var(--settled-bg); color: var(--settled); } /* ---- Dashboard --------------------------------------------------------- */ .dashboard, .sign-in { max-width: var(--measure); margin: 0 auto; } .dashboard__header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; } .dashboard__header h1 { margin: 0; font-size: 1.75rem; font-weight: 650; letter-spacing: -0.01em; } .dashboard__firm { margin: 0.25rem 0 0; color: var(--ink-muted); font-size: 1rem; } .empty { padding: 2rem; border: 1px dashed var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink-muted); text-align: center; } /* ---- Client cards ------------------------------------------------------ */ .clients { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; } .client { padding: 1.5rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); } .client__name { margin: 0 0 1.25rem; font-size: 1.125rem; font-weight: 620; } .client__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.25rem; margin: 0; } .client__facts > div { min-width: 0; } .client__facts dt { margin-bottom: 0.25rem; color: var(--ink-faint); font-size: 0.75rem; font-weight: 550; letter-spacing: 0.04em; text-transform: uppercase; } .client__facts dd { margin: 0; font-size: 1rem; } /* The payoff is what the firm came to read. It outranks every other fact on the card, so it is the only figure that gets size and weight. Scoped through .client__facts to outrank the `dd` base rule above — as a bare class it loses on specificity and silently renders at body size. */ .client__facts .client__payoff { font-size: 1.5rem; font-weight: 640; line-height: 1.25; letter-spacing: -0.01em; } /* Absence of a price is information, not a blank. Italic and muted so it reads as an explanation rather than as a value. */ .client__facts .client__unavailable { color: var(--ink-muted); font-style: italic; } .client__facts .client__status { font-weight: 570; color: var(--settled); } /* A settled advance is finished business. Muting the whole card keeps the active ones visually first without hiding it. */ .client--paid-off { background: var(--surface-sunken); } .client--paid-off .client__name { color: var(--ink-muted); } /* ---- Payoff note -------------------------------------------------------- */ /* Deliberately quiet. This replaced an amber §1.9 caution that rendered under every active row and could never clear, because nothing in the app supplies net proceeds — a permanent alarm on every line reads as noise and trains firms to ignore it. The line's job now is smaller and factual: name the source of the figure and give a route to question it. Muted body text is correct for that; escalating it back to a caution would restore the original problem. */ .client__payoff-note { margin: 1rem 0 0; color: var(--ink-muted); font-size: 0.8125rem; line-height: 1.45; } /* ---- Account bar ------------------------------------------------------- */ /* The account bar has to line up with the page beneath it, and the pages are not all one width: firm-facing screens are --measure (prose), while the admin queue is 68rem (a table to scan). A fixed --measure here left the email and Sign out floating 16rem short of the queue's right edge. The width now comes from a custom property the body sets, so the two cannot drift. */ .layout--wide { --page-measure: var(--measure-wide); } .account { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; max-width: var(--page-measure, var(--measure)); margin: 0 auto 1.5rem; font-size: 0.875rem; } .account__user { color: var(--ink-muted); } /* Sign out reimplemented the button styles rather than using them, which is how it ended up without the hover and focus treatment every other button has. It is the same control, one size smaller. */ .account__sign-out button { padding: 0.375rem 0.75rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; } .account__sign-out button:hover { background: var(--surface-sunken); border-color: var(--ink-muted); } .account__sign-out button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* ---- Auth pages -------------------------------------------------------- */ .auth { max-width: 26rem; margin: 0 auto; padding: 2rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); } .auth h1 { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 650; } .auth__intro { margin: 0 0 1.5rem; color: var(--ink-muted); font-size: 0.9375rem; } .auth__form { display: grid; gap: 1rem; } .field { display: grid; gap: 0.375rem; } .field label { font-size: 0.8125rem; font-weight: 550; color: var(--ink-muted); } .field input { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; } .field input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; } .field__hint { margin: 0; color: var(--ink-faint); font-size: 0.8125rem; } .button { display: inline-block; padding: 0.625rem 1rem; border: 1px solid transparent; border-radius: 6px; background: var(--ink); color: var(--surface); font: inherit; font-weight: 550; /* a.button would otherwise carry the underline links get */ text-decoration: none; cursor: pointer; } /* Hover has to be visible at a glance, not a 10% opacity shift nobody notices — these buttons text clients and create advances, so knowing which one is under the cursor matters. Darkening the fill reads on any background; the shadow and the press-down confirm it. Keyed on the class rather than the element: button_to renders a