:root { /* Warm neutrals, but cleaner and further apart than they were. The old set sat inside six shades of the same khaki, which is what made every screen read as one flat grey field. */ --cream: #f2eee4; --cream-2: #e6e0d1; --paper: #fffefb; --graphite: #22262a; --graphite-2: #363c42; --ink: #171a1d; --muted: #6b665c; --line: #d6cfbf; /* Brass with the dust taken off — it is the brand colour and it should look like metal, not like cardboard. */ --brass: #c08f3e; --brass-lt: #e8c98a; --brass-dk: #8a6420; --brass-wash: #fbf2e0; /* Status colours. The palette had exactly one (danger) and everything else was grey, so nothing on screen ever told you anything by colour alone. */ --danger: #a8352a; --danger-wash: #fbeceb; --good: #3f7a4b; --good-wash: #eaf4ec; --warn: #a86a12; --warn-wash: #fcf1de; --info: #2c6379; --info-wash: #e8f2f6; --radius: 4px; --shadow: 0 1px 2px rgba(23,26,29,.07), 0 4px 14px rgba(23,26,29,.06); } * { box-sizing: border-box; } /* Any bare `display:` rule outranks the UA stylesheet's [hidden]{display:none}, which silently leaves JS-hidden elements on screen. Bitten three times now (lightbox, mention menu, assignee chip), so settle it globally. */ [hidden] { display: none !important; } body { margin: 0; background: var(--cream); color: var(--ink); font: 15px/1.5 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--brass-dk); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- chrome ---------- */ .topbar { background: var(--graphite); color: var(--cream); display: flex; align-items: center; gap: 28px; padding: 0 20px; height: 52px; position: sticky; top: 0; z-index: 50; } .brand { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: var(--cream); } .brand span { color: var(--brass); } /* nav scrolls; More must not be inside it. Setting overflow-x on an element makes the browser compute overflow-y to `auto` too, so a sideways-scrolling nav is a scroll container in BOTH axes and clips anything drawn below it — which is exactly what hid the More panel when it lived in here. The wrapper holds both and does not scroll, so the panel has nothing to be clipped by. Same failure tip.js works around by drawing tooltips fixed and appended to . min-width:0 because a flex item will not shrink below its content by default: without it the nav keeps its full width on a narrow screen and the links spill out past the dark bar instead of staying inside it. */ /* flex-basis auto, not 0, now that the search box shares this row. With a basis of 0 the nav asked for no width at all, so the search kept its full 250px and the nav gave up the difference — on a 1100px window that meant "Invoices" cut off mid-word behind the scroller. Sized from its content, the two shrink in proportion and the last link stays whole for longer. */ .navwrap { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; } .topbar nav { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .topbar nav::-webkit-scrollbar { display: none; } .topbar nav a { color: #c9c3b6; padding: 6px 12px; border-radius: var(--radius); font-size: 14px; text-decoration: none; /* "Production Board" broke onto two lines inside a 52px bar. */ white-space: nowrap; } .topbar nav a:hover { background: var(--graphite-2); color: var(--cream); } .topbar nav a.on { background: var(--graphite-2); color: #fff; box-shadow: inset 0 -3px 0 var(--brass); } .topbar nav a.on::first-letter { color: inherit; } /* The More menu. A native
, so it opens and takes the keyboard without a script — seven pages live in here and must not depend on one loading. more.js only adds Escape and click-away. */ .more { position: relative; flex: none; } .more > summary { /* Same shape as a nav link, so the bar reads as one row of controls. */ color: #c9c3b6; padding: 6px 12px; border-radius: var(--radius); font-size: 14px; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; white-space: nowrap; list-style: none; /* Firefox */ } .more > summary::-webkit-details-marker { display: none; } /* Safari, older Chrome */ .more > summary:hover { background: var(--graphite-2); color: var(--cream); } .more > summary:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; } /* Active when the page you are on lives inside the menu, so "where am I" survives being one level down. Matches .topbar nav a.on exactly. */ .more > summary.on { background: var(--graphite-2); color: #fff; box-shadow: inset 0 -3px 0 var(--brass); } .more > summary .chev { width: 0; height: 0; flex: none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .7; } .more[open] > summary .chev { transform: rotate(180deg); } .more[open] > summary { background: var(--graphite-2); color: var(--cream); } /* Drawn below the bar rather than inside it — the topbar is only 52px tall and clips anything taller. No fade in: a CSS transition does not advance in a throttled tab, which is what left tooltips invisible before tip.js stopped animating opacity. The panel is simply there or not. */ .morepanel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 178px; z-index: 60; background: var(--graphite); border: 1px solid #3a3f43; border-radius: var(--radius); padding: 6px; box-shadow: 0 10px 28px rgba(0,0,0,.38); display: flex; flex-direction: column; gap: 1px; } .morepanel a { color: #c9c3b6; text-decoration: none; font-size: 13.5px; padding: 7px 10px; border-radius: 5px; white-space: nowrap; } .morepanel a:hover { background: var(--graphite-2); color: var(--cream); } .morepanel a.on { color: #fff; box-shadow: inset 2px 0 0 var(--brass); } /* Setting the board up and working a claim are different errands, so the admin half is called out rather than run on from the working pages. */ .moresep { font: 700 9.5px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #7d776c; padding: 9px 10px 4px; margin-top: 5px; border-top: 1px solid #3a3f43; } /* Narrow screens: give the links the room back. The bar is brand + nav + bell + name + sign out, and on a phone the fixed parts leave the nav squeezed to a sliver — the links are technically scrollable but there is nothing to grab. So the wordmark drops to its logo and the signed-in name goes, both of which are decoration here: the name is on the profile page and the mark still goes home. Sign out stays, because hunting for it is worse than the space it costs. */ @media screen and (max-width: 760px) { .topbar { gap: 12px; padding: 0 12px; } .brand.has-mark > span { display: none; } .topbar .who > a { display: none; } .topbar .who { gap: 8px; } } /* nowrap: with the search box on the bar there is less slack, and "Sign out" broke onto two lines inside a 52px bar rather than the bar simply being tighter. This end of the row is fixed furniture — it should be the last thing to give, not the first. */ .topbar .who { font-size: 13px; color: #a9a396; display: flex; align-items: center; gap: 12px; flex: none; white-space: nowrap; } .topbar .who form { margin: 0; } /* A link-shaped button. The colours here were written for the dark topbar — grey going to cream — and every use on a light background has had to defend against them with an inline colour. One that did not, the Invoice link on a supplement round, turned near-white on hover and vanished. So the default is now the light background case, which is almost all of them, and the topbar states its own. */ .linkbtn { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: 13px; padding: 0; } .linkbtn:hover { color: var(--graphite); text-decoration: underline; } .topbar .linkbtn { color: #a9a396; } .topbar .linkbtn:hover { color: var(--cream); } /* Search, in the bar, on every page. flex: 0 1 250px — it may shrink when the nav needs the room but never grows into it, because the nav is how you get anywhere and this is only how you get somewhere faster. */ .topsearch { position: relative; flex: 0 1 250px; min-width: 0; margin: 0; } /* .topbar in front of every one of these, and it is load-bearing. `input[type=search]` further down the file is (0,1,1) — an attribute selector counts as a class — so a bare `.topsearch input` tied with it and lost on source order. The result: a box that was paper-white with near-black text at rest, then turned dark on focus while the text stayed near-black, because only the background had been overridden. Black on black, the moment you clicked into it. Settled by making it the same white box as every other input in the app — which is what it has actually been showing — and saying so at a specificity that wins, so the focused state cannot drift away from the resting one. */ .topbar .topsearch input { width: 100%; height: 32px; font: inherit; font-size: 13px; padding: 0 30px 0 10px; border-radius: var(--radius); border: 1px solid #5a6066; background: var(--paper); color: var(--ink); } .topbar .topsearch input::placeholder { color: var(--muted); } .topbar .topsearch input:focus { outline: none; background: var(--paper); color: var(--ink); border-color: var(--brass); box-shadow: 0 0 0 3px rgba(192,143,62,.35); } /* Safari draws its own clear button inside a type=search, on top of the hint. */ .topsearch input::-webkit-search-cancel-button { display: none; } /* The shortcut, shown until you are using the box — at which point saying how to reach a box you are already in is just clutter. After the input in the HTML so a plain sibling selector can do it, with no script involved. */ .topsearch kbd { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 3px 5px; pointer-events: none; } .topsearch input:focus ~ kbd { display: none; } /* The box is narrow; its results need not be. Right-aligned so a wider menu grows back under the bar instead of off the edge of the window. */ .topsearch .tamenu { width: 360px; left: auto; right: 0; } /* A 1100px window was 33px short of fitting the whole nav, so "Invoices" was cut off mid-word behind its scroller. The bar's own 28px gaps are the cheapest thing to spend: three of them, and nobody has ever asked for more air between the wordmark and the first link. */ @media screen and (max-width: 1200px) { .topbar { gap: 18px; } .topsearch { flex-basis: 170px; } .topsearch kbd { display: none; } } @media screen and (max-width: 900px) { .topsearch { flex-basis: 140px; } .topsearch .tamenu { width: 300px; } } /* Your account from the top bar, and sign out. A computer shows your name, as it always has. A phone shows a circle with your photo or initials in its place, and moves Sign out into More along with a "My account" link. Before this the phone hid your name and showed nothing instead, so your account page — where phone notifications are switched on — could not be reached from a phone at all. `a.whome` beats the older phone rule `.topbar .who > a { display: none }`, which would otherwise hide this link exactly the way it hid the name. */ .whome .avatar { display: none; } .morephone { display: none; } .morepanel form { margin: 0; } .morepanel .morebtn { display: block; width: 100%; text-align: left; cursor: pointer; background: none; border: 0; font: inherit; color: #c9c3b6; font-size: 13.5px; padding: 7px 10px; border-radius: 5px; white-space: nowrap; } .morepanel .morebtn:hover { background: var(--graphite-2); color: var(--cream); } @media screen and (max-width: 760px) { .topbar .who > a.whome { display: inline-flex; align-items: center; } .whome .whoname { display: none; } .whome .avatar { display: inline-grid; border-color: var(--graphite); box-shadow: 0 0 0 1.5px #5a6066; } .topbar .who > form { display: none; } .morephone { display: flex; flex-direction: column; gap: 1px; } } /* ---------- phones ---------- On a phone the bar is two rows, not one squeezed row. On a single 375px row the fixed parts — helmet, bell, sign out — left the search box a 34px white square and the menu room for "Dashbo" before its scroller cut it off. Row one: helmet, search filling the width, bell, sign out. Row two: the menu as a strip that slides sideways, More at its end — the same gesture as the board, which was the part of the phone view that already made sense. All of it is inside this query, so the desktop bar is exactly as it was. Placed after every base rule for these elements on purpose. Several of them (.topsearch, .topbar .who) are defined further down the file than the older phone block above, and a media rule loses to a later rule of equal weight — part of why that block never fixed this. */ @media screen and (max-width: 760px) { .topbar { height: auto; flex-wrap: wrap; gap: 0 10px; padding: 7px 12px 0; } .topbar .brand { order: 1; } .topbar .topsearch { order: 2; flex: 1 1 auto; } .topbar .who { order: 3; gap: 10px; } .topbar .navwrap { order: 4; flex: 1 0 100%; margin: 7px -12px 0; padding: 3px 8px; border-top: 1px solid #33383c; } .topbar nav a, .more > summary { padding: 7px 10px; } /* The strip's right edge fades out, so a link half-hidden by the scroller reads as "there is more this way" instead of a stray letter — "Tasks" was cut to a lone T beside More. The padding is wider than the fade (32 vs 30), so the last link can scroll fully clear of it: at 24 the end of "Invoices" still sat 6px inside the fade. */ .topbar nav { padding-right: 32px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent); } /* More sits at the right-hand end of the strip, so it opens leftward. Opening rightward from there put most of it off the edge of the phone. */ .morepanel { left: auto; right: 0; } /* Search results and notifications, full width under the whole bar. Their own boxes stop being the anchor (position: static), so the bar is — it is sticky, and a sticky element anchors absolute children. Anchored to the narrow search box or the bell, both panels ran off one side of the screen: notifications already sat 25px off the left edge. */ .topbar .topsearch.tawrap, .topbar .bellwrap { position: static; } .topbar .topsearch .tamenu { left: 8px; right: 8px; width: auto; top: calc(100% + 4px); } .topbar .bellpanel { left: 8px; right: 8px; width: auto; max-width: none; top: calc(100% + 4px); } /* Tabs slide sideways rather than stretching the page. Five tabs across is wider than a phone, and a row that would neither wrap nor scroll made the whole job page lay out at 603px — so the phone shrank it to fit, or cut off the right edge. */ .tabs { overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs a { flex: none; white-space: nowrap; } /* Tables scroll inside themselves. display:block makes a table its own scroll box with no wrapper element, so all of them are covered at once; the ones already inside a .tablescroll are left to it. A table narrower than the screen stops stretching to full width here, which on a phone is rare and costs nothing. */ main table:not(.tablescroll > table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } .pill { background: var(--brass); color: #1b1e20; border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 700; } .wrap { padding: 24px 20px 60px; max-width: 1180px; margin: 0 auto; } .wrap-wide { max-width: none; padding-bottom: 8px; } .pagehead { display: flex; align-items: baseline; gap: 16px; margin: 0 0 18px; flex-wrap: wrap; } .pagehead h1 { font-size: 22px; margin: 0; font-weight: 650; letter-spacing: -.01em; } .pagehead .sub { color: var(--muted); font-size: 13px; } .pagehead .spacer { flex: 1; } /* The job header carries more than a title: who the contractor is, who is handling the claim, and which of the homeowner's addresses this one is. A homeowner can own eight houses, so the name alone does not identify the job and the address had to be scrolled to. */ /* Open / Closed on the task list. A pair rather than a dropdown: there are two answers, one is the default, and both counts are worth seeing without opening anything. */ .segtoggle { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; } /* Buttons on the job panel (an in-page swap), links on the Tasks page (a different query). Same control either way, so they share the styling. */ .segtoggle button, .segtoggle a { font: inherit; font-size: 11.5px; font-weight: 650; text-decoration: none; text-transform: none; letter-spacing: 0; padding: 3px 9px; border: 0; background: none; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; } .segtoggle button + button, .segtoggle a + a { border-left: 1px solid var(--line); } .segtoggle button:hover:not(:disabled):not(.on), .segtoggle a:hover:not(.on) { background: #f4f0e6; color: var(--ink); } .segtoggle button.on, .segtoggle a.on { background: var(--graphite); color: var(--cream); } .segtoggle button:disabled { opacity: .45; cursor: default; } /* The count rides inside the button, so the pair reads as "Open 3 / Closed 5" without a separate label. */ .segtoggle .n { font-size: 10.5px; opacity: .75; font-variant-numeric: tabular-nums; } .segtoggle button.on .n, .segtoggle a.on .n { opacity: .9; } /* An empty list, sitting between the toggle above it and the new-task form below. Left-aligned it read as a stray line of text hard against the panel edge, with nothing between it and the form's heading. Centred and ruled off, it reads as the answer to "what is in here" rather than as a label for what follows. */ /* One manager per row: their name, the roles they cover, and Save. Rows rather than a table because the middle column is a wrapping set of checkboxes, which a table cell handles badly at narrow widths. */ .manages { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 0; border-top: 1px solid var(--line); } .manages:first-of-type { border-top: 0; padding-top: 0; } .manages__who { font-weight: 650; min-width: 130px; } .manages__roles { display: flex; flex-wrap: wrap; gap: 6px 14px; flex: 1; } .manages__role { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400; cursor: pointer; margin: 0; } .manages__role input { margin: 0; accent-color: var(--brass-dk); } /* Whose list you are looking at. Sits with the Open/Closed pair, so it is sized to match rather than to match the buttons beside it. */ .whopick select { font: inherit; font-size: 13px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; max-width: 190px; } /* The bar under the supplement rounds. Reads as an instruction until something is ticked, then as a count. */ /* Says why an action is missing from a menu, rather than leaving a gap. */ /* Where a contractor stands with Armor. Two figures big enough to read at a glance — what they have paid and what is still out — over the detail. */ .finrow { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .finrow .finstat { min-width: 118px; } .finstat { flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fbf7ee; } .finstat .v { display: block; font-size: 19px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; } .finstat .k { display: block; margin-top: 2px; font: 700 9.5px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } /* Money in reads green, money out reads red. */ .finstat--paid { background: var(--good-wash); border-color: #b9d6c0; } .finstat--paid .v { color: var(--good); } .finstat--owing { background: var(--danger-wash); border-color: #e8bdb8; } .finstat--owing .v { color: var(--danger); } /* The return is the contractor's number rather than Armor's, so it is brass rather than a verdict colour. */ .finstat--roi { background: var(--brass-wash); border-color: var(--brass-lt); } .finstat--roi .v { color: var(--brass-dk); } /* Credit is money Armor owes back, so it reads as the exception it is. */ .fincredit { color: var(--brass-dk); } /* Credit sitting on a contractor's account, offered against this invoice. Never applied on its own — a total that moves without being asked is worse than one you have to set. */ .creditbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 14px; border: 1px solid var(--brass-lt); border-radius: 6px; background: var(--brass-wash); font-size: 13px; } .creditbar select { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--brass-lt); border-radius: 5px; background: #fff; } .creditraise .two { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; margin-bottom: 12px; } @media screen and (max-width: 620px) { .creditraise .two { grid-template-columns: 1fr; } } .menunote { display: block; padding: 7px 12px; font-size: 12px; color: var(--muted); white-space: nowrap; } .billbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 12px; border: 1px dashed var(--line); border-radius: 6px; background: #fbf7ee; } .billbar__msg { font-size: 12.5px; color: var(--muted); flex: 1; } .billbar button[disabled] { opacity: .5; cursor: default; } .roundtable .pickcol { width: 26px; padding-right: 0; } .roundtable .pickcol input { margin: 0; accent-color: var(--brass-dk); } .taskempty { margin: 0; padding: 16px 14px 18px; text-align: center; font-size: 12.5px; color: var(--muted); border-bottom: 1px dashed var(--line); } /* Stands in for `required` on the chip picker: present and focusable so the browser will validate and point its bubble at it, but taking no space. */ .assignguard { width: 0; height: 0; padding: 0; margin: 0; border: 0; opacity: 0; position: absolute; pointer-events: none; } /* Bigger than the text it separates, so the contractor and the claim handler read as two facts rather than one run-on line. */ .pagehead .dot { color: var(--muted); opacity: .55; font-size: 19px; line-height: 0; margin: 0 7px; position: relative; top: 2px; } /* Black, not brass. In brass it was the same colour as the contractor link beside it and the two ran together. */ .chtag { color: var(--ink); font-weight: 650; white-space: nowrap; } /* Full basis so it wraps onto its own line beneath the title row. It is last in the source for the same reason — earlier, it would push the buttons down. */ /* The row it sits on is full width; the LINK is only as wide as the address. Before this the whole strip to the right of the text was clickable, which put a link under the mouse on its way to Edit. */ /* The line under a job's name carries the two things read off a job while somebody is on the phone: where the house is, and where to send the mail. Side by side, wrapping onto two lines when the window is narrow rather than squeezing either one. */ .pagehead__addrline { flex-basis: 100%; margin-top: -8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; } /* Blue, in a faint blue pill. On a page of brass and grey the claim email blended into everything around it, and it is the one thing on this line somebody is hunting for with a phone to their ear. Blue because nothing else in the header is: it reads as its own thing at a glance. Red when there is no email, the same red as "No claim email" on the Clients list. */ .pagehead__claim { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; padding: 2px 4px 2px 10px; border-radius: 12px; background: #eaf2fa; border: 1px solid #c5dbef; } .pagehead__claim .k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--link-blue-dk); } .pagehead__claim a { color: var(--link-blue); font-weight: 650; } .pagehead__claim a:hover { color: var(--link-blue-dk); } .pagehead__claim--missing { background: var(--danger-wash); border-color: #e8bdb8; padding-right: 10px; } .pagehead__claim--missing .k { color: var(--danger); } .pagehead__claim a.pagehead__claimmissing { color: var(--danger); font-weight: 600; } /* A small copy button beside a value. Quieter than a .btn because it sits inside a line of text, and it turns green for a moment to say it worked — copying is otherwise invisible, and "did that take?" means doing it twice. */ .copybtn { font: inherit; font-size: 11.5px; line-height: 1.5; padding: 0 7px; cursor: pointer; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); color: var(--muted); } .copybtn:hover { border-color: var(--brass); color: var(--brass-dk); } .copybtn.done { border-color: #b9d6c0; background: var(--good-wash); color: var(--good); } /* A tick box with its words beside it, at reading size — not the small uppercase of a field label, which is what a bare