/* =========================================================================== Two surfaces, one set of variables. Chosen 30 July 2026 from /app/theme-preview.html. OFFICE ("Fresh") -- green accent, light page, generous spacing. What a manager looks at for hours, so it stays calm. CREW ("High contrast") -- blue accent, heavier weights, stronger borders, tighter corners. Used one-handed in a driveway at noon, where contrast beats elegance. BOTH share the navy #17293f top bar. That was originally crew-only, but seeing it on a desktop My Jobs next to a white-barred dashboard made the two look like different products, so the bar is now common chrome and the surfaces differ only below it. The crew surface is applied by api.js setting data-surface="crew" on for the crew-facing pages -- NOT by screen width. A manager checking the schedule on a phone should still get the office styling; the difference is which job the page is doing, not how wide the screen is. Header contrast (white on #17293f) is 14.7:1, far above the 4.5:1 needed. =========================================================================== */ :root { /* Type scale, 1.2 ratio. Previously there was none, which is what made the app read flat regardless of colour. */ --t-xs: 0.75rem; --t-sm: 0.875rem; --t-base: 1rem; --t-lg: 1.2rem; --t-xl: 1.5rem; --t-2xl: 1.85rem; /* Spacing rhythm -- every gap is a multiple, so nothing is arbitrary. */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; /* --- OFFICE: Fresh ---------------------------------------------------- Every colour used for TEXT is measured against the page background (#f4f8f6), not against white -- most office text sits on the tinted page, not on a card, and the tint costs about 0.3:1. The first cut of this palette was picked to look pleasant and measured 4.4:1 on muted text and 4.4:1 on the accent, both of which read washed out on a real monitor. Numbers below are text-on-page-background. */ --bg: #f4f8f6; --card-bg: #ffffff; --text: #17322a; /* 13.1:1 */ --muted: #3f5c53; /* 6.8:1 -- was #5c7a70 at 4.4:1 */ --border: #cddcd5; /* decorative only: card edges, table row rules */ --field-border: #6d8579; /* 4.0:1 -- input/select outlines must be findable */ --accent: #0b6e4b; /* 5.9:1 as text, 6.3:1 white-on-accent for buttons */ --accent-hover: #085538; --danger: #b0261a; --ok: #0b6e4b; --warn: #8a5a00; /* 5.5:1 -- was #c47f17 at 3.3:1 */ --radius: 10px; /* The navy bar is shared with the crew surface -- one piece of chrome across the whole product, phone and desktop alike, so the app looks like one app. The surfaces still differ below the bar: green accent and lighter weights here, blue accent and heavier weights on crew. */ --header-bg: #17293f; --header-text: #ffffff; --header-border: #17293f; --shadow: 0 2px 6px rgba(23, 50, 42, 0.06); --heading-weight: 650; /* Hover/selection tints. These used to be hardcoded pale blues left over from the old theme, which fought the green accent everywhere they appeared. Now they follow the surface. */ --hover-bg: #e7f2ec; --pill-bg: #e7f2ec; /* Light on navy. Kept as a variable rather than a per-surface override on the selector so the contrast audit in tools/check_contrast.py can see it. */ --nav-link: #dfe6f1; --nav-link-hover: #ffffff; } /* --- CREW: high contrast, navy bar -------------------------------------- */ :root[data-surface="crew"] { --bg: #eef0f3; --card-bg: #ffffff; --text: #0b0d10; --muted: #4a5361; --border: #c9cfd8; --field-border: #7c8494; /* 3.8:1 */ --accent: #0b5cd5; --accent-hover: #08409a; --danger: #c00f0f; --ok: #0a7a33; --warn: #a35c00; --radius: 6px; --header-bg: #17293f; --header-text: #ffffff; --header-border: #17293f; --shadow: 0 2px 4px rgba(0, 0, 0, 0.12); --heading-weight: 800; --hover-bg: #e4ecf8; --pill-bg: #e4ecf8; /* Light on navy, not --text (near-black), which would be invisible up there. */ --nav-link: #dfe6f1; --nav-link-hover: #ffffff; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); } /* Headings pick up the surface's weight, which is most of what separates the two looks -- the crew screen needs to be scannable at arm's length. h1 uses --t-xl rather than --t-2xl: 1.85rem is a jarring jump from the 1.4rem these pages have always used, and --t-2xl is held back for the big single figures on the dashboard. 1.5rem / 1.2rem / 1rem still gives a real hierarchy without relaying out 25 existing pages. */ h1 { font-size: var(--t-xl); font-weight: var(--heading-weight); letter-spacing: -0.01em; margin: 0 0 0.75rem; } h2 { font-size: var(--t-lg); font-weight: var(--heading-weight); margin: 0 0 0.75rem; } header.topbar { background: var(--header-bg); color: var(--header-text); border-bottom: 1px solid var(--header-border); padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; } header.topbar .brand { font-weight: 600; font-size: 1.1rem; text-decoration: none; color: inherit; cursor: pointer; } /* Nav links are primary navigation, not secondary text, so they take a full nav colour rather than --muted. At 0.9rem, muted grey on the office surface was the single worst offender -- 4.4:1 and visibly washed out. */ header.topbar nav a { margin-left: 1rem; color: var(--nav-link); text-decoration: none; font-size: 0.9rem; font-weight: 500; } header.topbar nav a:hover, header.topbar nav a:focus { color: var(--nav-link-hover); } /* Who is signed in. Replaces the old ⚙, which identified nobody -- on a shared phone, or a desktop somebody else used last, there was no way to tell whose session you were in without opening a page. Both surfaces run the same navy bar, so one set of colours covers both. */ .whoami { display: inline-flex; align-items: center; gap: 0.45rem; } .avatar-img, .avatar-initials { width: 1.75rem; height: 1.75rem; border-radius: 50%; flex: 0 0 auto; /* 3:1 against the navy -- a non-text boundary still has a contrast minimum, and without it the circle disappears into the bar. */ border: 1px solid rgba(255, 255, 255, 0.55); } .avatar-img { object-fit: cover; /* never squash a portrait into the circle */ display: block; background: rgba(255, 255, 255, 0.12); } .avatar-initials { display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.16); color: var(--nav-link-hover); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; } .whoami-name { font-weight: 600; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* (The crew-specific dropdown-link override that used to live here is gone -- the scoped rule further down now gets this right on BOTH surfaces, and two rules setting the same property was how the office surface came to be missed in the first place.) */ .nav-dropdown { position: relative; display: inline-block; } .nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 1rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); min-width: 140px; z-index: 20; padding: 0.25rem 0; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { display: block; } /* The ⚙ menu is always the last thing in the bar, so a left-anchored panel opens straight off the right edge of the screen. Anchor it to the right. Worse since the panel widened to 200px for the longer module names. */ .nav-dropdown[data-menu="settings"] .nav-dropdown-menu { left: auto; right: 0; } /* Set by api.js on any OTHER dropdown that would overflow -- which one that is depends on the window width and the length of the business name, so it cannot be known from CSS alone. */ .nav-dropdown-menu.flip-right { left: auto; right: 0; } /* ⚠️ The `header.topbar nav` prefix is LOAD-BEARING, not decorative -- do not "simplify" it away. `header.topbar nav a` sets the light-on-navy colour for links in the bar, and at specificity (0,1,3) it outranks a bare `.nav-dropdown-menu a` (0,1,1). Dropdown panels are white, so without this prefix every menu rendered #dfe6f1 text on #ffffff -- about 1.15:1, i.e. invisible. Scoping it here lifts this rule to (0,2,3) so the panel wins for its own children. The static contrast check in tools/check_contrast.py cannot catch this: the variables are individually fine, and only the cascade makes them meet. */ header.topbar nav .nav-dropdown-menu a { display: block; margin-left: 0 !important; padding: 0.5rem 0.8rem; color: var(--text); font-size: 0.85rem; } header.topbar nav .nav-dropdown-menu a:hover { background: var(--hover-bg); color: var(--accent); } /* A module this business has not switched on. Greyed rather than hidden, and only ever the ONE next step up -- anything beyond that is not rendered at all, because a menu full of padlocks reads as a paywall. Clicking opens a short panel explaining what the module does. */ /* Scoped the same way as the rule above, and for the same reason: the base dropdown-link rule now sits at (0,2,3), so an unscoped `.nav-dropdown-menu a.locked` at (0,2,1) would lose to it and locked items would stop looking locked. The drawer's own copy needs no prefix -- it is not inside the bar. */ header.topbar nav .nav-dropdown-menu a.locked, .side-drawer a.locked { color: var(--muted); font-style: italic; } header.topbar nav .nav-dropdown-menu a.locked:hover, .side-drawer a.locked:hover { background: var(--hover-bg); color: var(--text); } /* The upsell panel, and any other modal raised from api.js. Several pages already define their own .modal-overlay/.modal-box locally; these are the shared versions so a page does not have to. */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; } .modal-box { background: var(--card-bg); border-radius: var(--radius); width: min(600px, 96vw); max-height: 88vh; overflow-y: auto; padding: 1rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); } main { max-width: 900px; margin: 0 auto; padding: 1rem; } .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; } label { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 0.6rem; margin-bottom: 0.2rem; } /* Fields use --field-border, not --border. A card edge can be a whisper; the outline of something you are meant to click into cannot, and the old shared value sat at 1.4:1 against white. */ input, select, textarea { width: 100%; padding: 0.55rem; border: 1px solid var(--field-border); border-radius: 6px; font-size: 1rem; background: #fff; color: var(--text); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } /* Button hierarchy, three tiers: - Primary (default): filled accent -- the one main commit per view. - Secondary (.secondary): outline/ghost -- supporting actions. - Tertiary (.btn-text): text link -- low-stakes toggles (Edit, expand). */ button, .btn { display: inline-block; margin-top: 0.9rem; padding: 0.5rem 0.95rem; background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 6px; font-size: 0.9rem; line-height: 1.2; cursor: pointer; text-decoration: none; } button:hover, .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); } button.secondary, .btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--field-border); } button.secondary:hover, .btn.secondary:hover { background: var(--hover-bg); border-color: var(--accent); color: var(--accent); } button.btn-text, .btn.btn-text { background: transparent; color: var(--accent); border: none; padding: 0.2rem 0.35rem; font-weight: 500; } button.btn-text:hover, .btn.btn-text:hover { background: transparent; color: var(--accent-hover); text-decoration: underline; } /* Wide tables scroll INSIDE their own box, never by dragging the whole page sideways. Applied automatically by api.js to every table that isn't already inside a scroll container, so a new page gets it without anyone remembering. The owner is reading these on a phone between jobs -- see commitment #1 in docs/product_narrative.md. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; /* Stops a sideways flick at the end of the table from dragging the page. */ overscroll-behavior-x: contain; } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } /* Columns that earn their place on a 1200px screen but not on a 375px one. Marked per page, because which ones matter depends on what the page is for. Hiding is deliberate rather than shrinking: four readable columns beat eight unreadable ones, and the full set is one rotation away. */ /* The counterpart to .hide-sm: detail folded under a cell that stays, so a hidden column's information is moved rather than lost. */ .show-sm { display: none; } @media (max-width: 640px) { .hide-sm { display: none !important; } .show-sm { display: block; } table { font-size: 0.85rem; } th, td { padding: 0.4rem 0.35rem; } /* A table with few enough columns to fit should not scroll at all. */ .table-scroll table { min-width: 0; } } th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--border); } tr.clickable { cursor: pointer; } tr.clickable:hover { background: var(--hover-bg); } .muted { color: var(--muted); font-size: 0.85rem; } .error { color: var(--danger); font-size: 0.9rem; margin-top: 0.5rem; } .pill { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--pill-bg); color: var(--accent); font-size: 0.75rem; text-transform: capitalize; } @media (max-width: 600px) { main { padding: 0.6rem; } header.topbar nav a { margin-left: 0.6rem; } } /* Eight module menus fit a desktop bar and do not fit a phone. Below the docking breakpoint the bar keeps only what a person standing in a driveway needs -- Today, the language picker and ⚙ -- and everything else moves into the ☰ drawer, which is built from the same definition. Without this the bar wrapped to three lines and pushed the page content down the screen. */ @media (max-width: 900px) { header.topbar nav .nav-dropdown:not([data-menu="settings"]) { display: none; } } /* Some module names are genuinely long ("Accounts & balance sheet"), and at 140px they wrapped mid-phrase. Capped against the viewport so the panel can never be wider than the screen it has to fit on. */ .nav-dropdown-menu { min-width: 200px; max-width: calc(100vw - 1rem); } @media (max-width: 420px) { .nav-dropdown-menu { min-width: 170px; } } /* EN/ES picker in the top bar. Deliberately narrow -- it sits in an already crowded nav, so it shows the language code rather than a full word. */ /* The Ask box. Sits in the navy bar between the company name and the menu, so it borrows the bar's own colours rather than importing a white field into it. It is a direct child of header.topbar, NOT of