/* ===== Barlow — the display and UI face ================================== The stack used to start at Bahnschrift and fall back through Segoe UI. Both of those ship only on Windows, so on a phone, a Mac or an Android tablet the entire display identity -- the tracked DOSSAN/REALTY lockup, every heading, every dashboard figure -- silently degraded to whatever system-ui happened to be. This app has real mobile work in it (the phone-specific row grids, the 375px pass), so that was a screen the brand simply did not render on. Barlow rather than an arbitrary grotesque, because the thing being replaced matters: Bahnschrift is a DIN 1451 derivative -- the German industrial standard drawing face, the type on technical drawings and road signs. That lineage is *why* it suited a plat sheet. Barlow is drawn from the same public-infrastructure tradition (highway signage), so the concept survives the substitution. It is SIL OFL, so it can be self-hosted; the licence sits next to the files in public/fonts/. Self-hosted rather than linked from Google: this is a private CRM that two people rely on, and it should not make a third-party request on every load or stop looking like itself when the network is flaky. Barlow goes FIRST, ahead of Bahnschrift. Leaving Bahnschrift in front would mean the Windows user and the phone user see two different products, which is the problem this is meant to fix, not a fallback. The old stack stays behind it as the fallback chain, and font-display: swap means text paints immediately in it rather than blocking. */ @font-face { font-family: "Barlow"; src: url("/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow"; src: url("/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow"; src: url("/fonts/barlow-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ===== THE PLAT — Dossan Realty brand tokens ===== A plat sheet, read literally: plat books, deed books and surveyor's field notes are buff paper annotated in ink-blue and red pencil, not cool grey. The ground is warm; the marks on it are cool. That combination is also what reads comfortably for the hours this app gets used in one sitting. THREE RULES THIS FILE ENFORCES 1. Every hue has three steps: --x (fills, borders, large figures), --x-ink (ANY text at body/label size), --x-bg (the chip tint). Never use a bare --x as small text. See the contrast note below. 2. Vivid means a person, muted means a status. --fran and --juan are the only saturated colours in the system; every status hue is muted. So a name can never be mistaken for a state. 3. --marker is urgency only (hot lead, destructive, error). If you want something to "pop", you want --survey, not --marker. PRINT DIVERGES ON PURPOSE. The Click2Mail letterhead spec (docs/brand.md) stays pinned to #2B2B2B ink and #1B3A5C rules on white stock. Screen and print are separate systems now — do not "fix" the drift by dragging one to the other. */ /* ---- warm ground ------------------------------------------------------- paper is the field; surface is a card/row lifted off it; raised is a modal above that. Each step is lighter than the last. */ --paper: #f2ede3; --surface: #faf7f0; --surface-raised: #fffdf8; --line: #ddd5c7; --line-strong: #a79c88; --ink: #2a2622; --muted: #5a5348; --faint: #625b4e; /* ---- contrast ---------------------------------------------------------- Measured against --paper (the worse of the two grounds; every pair scores higher on --surface). The floor is WCAG AA 4.5:1 for small text, but the previous palette sat at 4.52/4.56/4.61 — inside a rounding error of failing, so any future tweak broke it silently. Everything here is built to 5:1 with headroom instead. Weakest pair in the system is 5.02:1. --ink 12.87:1 --muted 6.51:1 --faint 5.76:1 --survey 9.96:1 --survey-mid 6.25:1 --marker-ink 5.76:1 --warn-ink 5.79:1 --good-ink 5.73:1 --fran 7.89:1 --juan 6.47:1 And each -ink on its own -bg tint: marker 5.06, warn 5.05, good 5.04, survey 8.71, fran 6.88, juan 5.68, neutral 5.06. --faint is the one token checked against EVERY ground rather than just the two page ones, because a tint became a page field when the call session started using --survey-bg for its whole surface. At the old #6b6355 it measured 4.43-4.47 on all seven tints -- passing on paper, failing everywhere else, and nothing in the app happened to put it on a tint until the session did. #625b4e is the lightest value that clears 5:1 on paper, surface, raised AND all seven tints, and it still sits a clear step below --muted (5.76 vs 6.51 on paper). */ /* ---- structure: the surveyor's pencil ---------------------------------- */ --survey: #1b3a5c; /* links, primary actions, active states */ --survey-ink: #ffffff; /* text on a --survey fill */ --survey-deep: #12293f; /* pressed/active state of a --survey fill */ --survey-mid: #36597d; /* secondary structure — absorbed --watch's job */ --survey-bg: #dedfdf; /* chip tint */ /* ---- urgency: the red pencil. HOT / destructive / error ONLY ----------- */ --marker: #c8502a; /* fills, borders, large figures */ --marker-ink: #9c3e21; /* any small text, incl. on --marker-bg */ --marker-bg: #f2dbd0; /* ---- status ------------------------------------------------------------ */ --good: #3e6b4f; --good-ink: #3a654a; --good-bg: #dde1d8; --warn: #99700f; --warn-ink: #76560c; --warn-bg: #e8dec7; /* --warn is the one hue that cannot carry white text (4.49:1 — just under). It is a tint-and-ink colour, never a filled button. */ --cold-bg: #e3dfd7; /* neutral chip tint, pairs with --muted */ /* The call session's field. A page field and a chip tint have different jobs, so this is its own token rather than a reused --survey-bg: that value is 13% navy into warm white, which desaturates to a near-neutral grey. Fine as a chip, but as a whole-screen field it made the room you spend the most time in the coldest surface in the app. This is the same warm family as --paper, one step deeper, so the session reads as the app dimmed around you rather than somewhere clinical. Contrast is identical to the grey it replaces (--faint 5.03:1, --muted 5.69:1, card 1.31:1). */ --session-field: #e6ded0; /* ---- identity: the only saturated colours in the system ---------------- Was --fran #1b5c53 (teal), which sat ΔE 13 from --good — close enough that a person's name read as a positive status. The pair is now indigo / magenta-plum: ΔE 38 from each other, 83+ from --good, and 72+ from --marker so neither can be mistaken for urgency. */ --fran: #2f3d9e; --fran-bg: #dedee6; --juan: #8e2a7e; --juan-bg: #ecdbe2; /* ---- type -------------------------------------------------------------- */ /* Barlow leads both stacks; see the @font-face block at the top of this file for why. Bahnschrift and Segoe UI stay behind it as the fallback chain -- they are the faces this was designed against, so if the webfont ever fails to load the app degrades to what it used to be rather than to something arbitrary. --font-display keeps the Semibold fallback, which only matters on the Windows path. */ --font-ui: "Barlow", "Bahnschrift", "Segoe UI", system-ui, -apple-system, sans-serif; --font-display: "Barlow", "Bahnschrift", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif; --track-wide: 0.18em; /* wordmark/eyebrow tracking */ /* ---- type scale ---------------------------------------------------------- The app had grown 23 distinct font-size values, many of them only a half-pixel apart (13 vs 13.5, 14 vs 14.5, 16 vs 16.5...). A half-pixel is not perceptible as hierarchy -- nobody reads 13.5px as "a little more important" than 13px -- so the effect wasn't a fine-grained scale, it was inconsistency: the same kind of text rendered at a dozen slightly different sizes depending on which component wrote it. These seven steps replace all of that with one deliberate scale, reused everywhere a given weight of text appears. The middle of the scale (--fs-meta, --fs-body, --fs-strong) is deliberately tight -- 13/15/17px, two steps apart -- because this is a dense operator tool where a lot of text lives on screen at once. Row names have to sit close to their metadata and body copy, not float apart from it, while still reading as more important on a quick scan. The outer steps (--fs-micro and --fs-title/--fs-display/--fs-figure) can afford to spread out more because they carry less text and more signal -- eyebrows and tags at one end, dashboard and calling-session numerals at the other. */ --fs-micro: 11px; /* uppercase eyebrows, tags, sig badges, section labels */ --fs-meta: 13px; /* metadata, counts, captions, parcel ids, phone types */ --fs-body: 15px; /* default UI text, inputs, buttons, body copy */ --fs-strong: 17px; /* row names -- the most-scanned text in the app */ --fs-title: 21px; /* modal names, dash figures */ --fs-display: 27px; /* dashboard stat numerals */ --fs-figure: 34px; /* the calling session's largest numerals */ /* ---- motion ------------------------------------------------------------ A calling session is hundreds of repetitions of the same three actions, so those actions get physicality: rows press, toggles pop. Everything here is decoration and is switched off wholesale by the prefers-reduced-motion block at the end of base.css. */ --dur-fast: 90ms; --dur: 160ms; --dur-slow: 240ms; --ease: cubic-bezier(.2, .7, .3, 1); /* Shared page measure. The masthead, the tab strip and the panels all sit on it, so the brand lockup lines up with the content beneath it. A contact row carries ~400px of ink; past this width the row stops reading as one unit and becomes a left cluster and a right cluster with a gap between. */ --measure: clamp(1200px, 90vw, 1800px); --shadow: 0 1px 2px rgba(42,38,34,.06), 0 6px 20px rgba(42,38,34,.05); --shadow-lg: 0 4px 10px rgba(42,38,34,.08), 0 20px 50px rgba(42,38,34,.16); /* ---- legacy aliases (old rules keep working; retire in later phases) ---- --watch is retired, not renamed: it was ΔE 24 from --survey, a lighter greyer duplicate carrying no meaning the survey family could not. It resolves into that family so any rule still asking for it gets something sensible rather than an unset variable. */ --watch: var(--survey-mid); --watch-bg: var(--survey-bg); --bg: var(--paper); --accent: var(--survey); --accent-ink: var(--survey-ink); --link: var(--survey); --hot: var(--marker); --hot-bg: var(--marker-bg); --warm: var(--warn); --warm-bg: var(--warn-bg); --topbar-bg: var(--paper); --topbar-bg-alt: var(--paper); --topbar-ink: var(--ink); --topbar-muted: var(--muted); --topbar-line: var(--line-strong); --topbar-accent: var(--survey); }