/* ============================================================================
VIP Carry Ops — styles.css v2.0 ("Refined Orange", mockup option 1a)
----------------------------------------------------------------------------
DROP-IN REPLACEMENT for public/styles.css.
Design goals (see design_handoff_ui_2_0/README.md for the full rationale):
1. One brand orange (#F26B00) that actually reads as primary.
2. Fix the leftover navy-era sidebar label colour (#cfe0ee on orange).
3. Warm the neutral palette so nothing fights the orange.
4. Real type scale + tabular figures for money/dates/plates.
5. Identical rendering on macOS and Windows (see the FONTS block).
COMPATIBILITY CONTRACT
Every class name and CSS variable from v1 is preserved, including the
historical --navy / --navy-dark names (their VALUES change, their call
sites do not). This file can be swapped in with ZERO markup changes and
the app will look like v2 immediately.
A handful of NEW, purely additive classes are provided at the bottom
(.grid-5, .stat-hero, .alert-strip, .chip, .segmented, .month-stepper,
.doc-chip, .mono, .tnum, .sidebar-group). Markup that adopts them gets
the full 1a design; markup that ignores them still looks correct.
NOTE ON THE INVESTOR DASHBOARD
/investor was explicitly out of scope for this pass, but it shares these
tokens, so it inherits the new palette and typography automatically. Its
own layout rules are carried over unchanged at the end of this file.
Review it once after deploying.
========================================================================= */
/* ---------------------------------------------------------------- FONTS ----
Self-hosted on purpose: this app is documented as running with no external
dependencies and possibly no outbound internet (see README.md "How this was
built"). A Google Fonts would make first paint depend on the
network. Download the woff2 files once and drop them in public/fonts/:
Manrope 400 500 600 700 800 (SIL OFL)
JetBrains Mono 400 500 700 (SIL OFL)
If the host DOES have reliable internet and you'd rather not self-host,
delete the 8 @font-face blocks below and add this to the in
lib/render.js instead:
The fallback stacks are deliberately platform-matched so the app is legible
and correctly-proportioned even before/without the webfonts:
macOS -> -apple-system / SF Mono / Menlo
Windows -> Segoe UI Variable Text / Cascadia Mono / Consolas
------------------------------------------------------------------------- */
/* Self-hosted (2026-09-04): 8 static per-weight woff2 files in public/fonts/,
served by server.js's existing generic /static/ handler — no new server
code needed. Static per-weight files rather than one variable-font file
(the build environment this shipped from couldn't fetch the true variable
woff2 — see the CDN-fallback note this replaced), which is actually the
more broadly-compatible choice anyway: "woff2-variations" needs a newer
browser than plain "woff2" does. Five Manrope weights (400/500/600/700/800)
cover every weight this file's type scale actually uses; JetBrains Mono
stays at its original three (400/500/700). Both SIL OFL. */
@font-face {
font-family: "Manrope";
src: url("/static/fonts/manrope-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url("/static/fonts/manrope-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url("/static/fonts/manrope-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url("/static/fonts/manrope-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url("/static/fonts/manrope-800.woff2") format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("/static/fonts/jetbrains-mono-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("/static/fonts/jetbrains-mono-medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("/static/fonts/jetbrains-mono-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
:root {
/* --- Type -------------------------------------------------------------
Cross-platform note: "Segoe UI Variable Text" is Windows 11, "Segoe UI"
covers Windows 10 and earlier. Keeping both means Windows never falls
through to Arial, which is noticeably narrower than Manrope and used to
make the old layout reflow differently on the two platforms. */
--font-ui: "Manrope", system-ui, "Segoe UI Variable Text", "Segoe UI",
-apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono",
"Segoe UI Mono", Consolas, Menlo, monospace;
/* --- Brand ------------------------------------------------------------
Pantone 3564 C / #F26B00 remains the single brand colour, per the
2026-07-16 rebrand. What changes is the SUPPORTING shades:
--navy topbar. Unchanged: #F26B00.
--navy-dark sidebar. Was #C25600 — one notch off the topbar, so the two
read as "almost the same orange" rather than a deliberate
hierarchy. Deepened to #A84A00, which (a) separates the rail
from the bar, and (b) lets a WHITE active pill sit on it at
7.4:1 instead of the old orange-on-orange pill at 1.4:1.
--accent-ink NEW. #F26B00 as *text* on a white card is only 2.9:1 — it
fails AA for the table links and .linklike buttons that use
it today. This is the same hue at AA-passing lightness
(4.9:1) and should be used for every orange TEXT/link.
Orange as a BACKGROUND with white text stays #F26B00. */
--navy: #F26B00;
--navy-dark: #A84A00;
--accent: #F26B00;
--accent-hover: #D35F00;
--accent-ink: #C25600;
--accent-wash: #FFF7F0;
/* Sidebar/topbar label colours. --nav-label replaces the hard-coded
#cfe0ee (a pale BLUE, left over from the navy chrome) that is currently
used for every sidebar link and .navuser element. Warm white at 5.1:1
on --navy-dark. */
--nav-label: #FFF2E6;
--nav-label-dim: rgba(255, 255, 255, 0.52);
--nav-hover: rgba(255, 255, 255, 0.10);
/* --- Warm neutrals ---------------------------------------------------
v1's greys were cool (#f4f6f8 / #e1e6ea / #22303c — blue-leaning, also
navy-era leftovers). Against orange, cool greys read slightly green.
These are the same lightness values, rotated warm. */
--bg: #F7F5F2;
--card: #FFFFFF;
--surface: #FFFFFF;
--surface-alt: #F2EDE7;
--surface-alt-hover: #E9E2DA;
--row-hover: #FBF9F6;
--border: #E6E0D8;
--border-strong: #DDD5CC;
--text: #1D1A17;
--muted: #6B6156;
--faint: #8A7F74;
--ink: #1D1A17; /* dark surfaces (hero stat tile) */
/* --- Status ----------------------------------------------------------
Unchanged from v1 — these already work and are referenced by exported
Excel styling and the Telegram report copy. */
--green: #1C8A4B;
--green-hover: #156B39;
--amber: #B9770E;
--red: #C0392B;
--red-hover: #A03226;
--grey: #8A7F74;
--cyan: #0E7C86;
--export-btn: #0E7C86;
--export-btn-hover: #0B626A;
--badge-available-bg: #E3F5E9;
--badge-rented-bg: #FCE7D6;
--badge-maintenance-bg: #FDF1DE;
--badge-out-bg: #FBE7E5;
--badge-cancelled-bg: #F2EDE7;
--badge-washing-bg: #DFF3F5;
--badge-rented-text: #8A3D00;
--tag-pill-bg: #FDF1DE;
--flash-error-bg: #FBE7E5;
--flash-ok-bg: #E3F5E9;
/* --- Geometry --------------------------------------------------------- */
--r-sm: 6px;
--r-md: 8px;
--r-lg: 12px;
--r-pill: 999px;
--shadow-sm: 0 1px 2px rgba(29, 26, 23, 0.06);
--shadow-md: 0 2px 8px rgba(29, 26, 23, 0.08);
--shadow-pop: 0 10px 30px rgba(29, 26, 23, 0.18);
}
[data-theme="dark"] {
/* v1's dark block was cool blue-grey (--bg #0f1720, --card #17212c) — the
same navy leftover as the light greys, and it makes the brand orange read
slightly acid at night. Same lightness, rotated warm, so light and dark
share one temperature. The topbar stays #F26B00 in both themes as the
rebrand intended; the SIDEBAR drops to ink here, because a full-height lit
orange rail is the main source of glare in a dark room. */
--navy: #F26B00;
--navy-dark: #1C1713;
--accent: #F26B00;
--accent-hover: #FF8A33;
--accent-ink: #FF8A33;
--accent-wash: rgba(242, 107, 0, 0.14);
--nav-label: #B3A79C;
--nav-label-dim: #7D7167;
--nav-hover: rgba(255, 255, 255, 0.07);
--bg: #14100D;
--card: #1C1713;
--surface: #1C1713;
--surface-alt: #262019;
--surface-alt-hover: #302820;
--row-hover: #201A15;
--border: #2E2620;
--border-strong: #38302A;
--text: #EFE7DF;
--muted: #A3968A;
--faint: #8D8177;
--ink: #221B16;
/* Dark status values carried over from v1 unchanged. */
--green: #3FBD77;
--green-hover: #34A468;
--amber: #E0A83E;
--red: #E2564A;
--red-hover: #C94538;
--grey: #9AA7AD;
--cyan: #4FD1DD;
--export-btn: #1A99A3;
--export-btn-hover: #157F88;
--badge-available-bg: rgba(63, 189, 119, 0.16);
--badge-rented-bg: rgba(242, 107, 0, 0.16);
--badge-maintenance-bg: rgba(224, 168, 62, 0.16);
--badge-out-bg: rgba(226, 86, 74, 0.16);
--badge-cancelled-bg: rgba(154, 167, 173, 0.16);
--badge-washing-bg: rgba(79, 209, 221, 0.16);
--badge-rented-text: var(--accent-ink);
--tag-pill-bg: rgba(224, 168, 62, 0.16);
--flash-error-bg: rgba(226, 86, 74, 0.16);
--flash-ok-bg: rgba(63, 189, 119, 0.16);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
--shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.55);
}
/* =============================================================== BASE ==== */
* { box-sizing: border-box; }
html, body { height: 100%; }
html, body { overflow-x: hidden; }
html { touch-action: manipulation; }
body {
margin: 0;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
line-height: 1.45;
background: var(--bg);
color: var(--text);
/* Cross-platform: -webkit-font-smoothing is a macOS-only property and makes
text noticeably LIGHTER there. Applying it unconditionally is what makes
a design look correct on a Mac and anaemic on Windows (which uses
DirectWrite and ignores it). We deliberately do NOT set it, and instead
use weight 500 for body text so both platforms land in the same place.
Do not add -webkit-font-smoothing: antialiased to this file. */
text-rendering: optimizeLegibility;
font-variant-numeric: tabular-nums;
-moz-osx-font-smoothing: auto;
}
/* Every figure, plate, timestamp and ID in this app is a number that gets
compared down a column, so tabular figures are the default everywhere and
proportional figures are never wanted. */
input, select, textarea, button, table { font-variant-numeric: tabular-nums; }
a { color: var(--accent-ink); }
a:hover { color: var(--accent); }
::selection { background: rgba(242, 107, 0, 0.22); }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 3px;
}
/* Cross-platform: macOS overlay scrollbars are invisible until scrolled;
Windows/Chromium draws a permanent 16px light-grey bar that looked broken
against the dark sidebar. Style it to match the surface it's on. */
* { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: var(--r-pill);
border: 2px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--faint); background-clip: content-box; }
.sidebar { scrollbar-color: rgba(255, 255, 255, 0.28) transparent; }
.container {
flex: 1;
min-width: 0;
max-width: 1180px; /* was 1080 — the wider tables (Trips, Car Wash) had no
room to breathe on a 1440 laptop, which is the
standard office machine on both platforms */
margin: 0 auto;
padding: 28px 32px 64px;
}
/* ============================================================= TOPBAR ==== */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--navy);
color: #fff;
padding: 0 24px;
height: 58px;
flex-wrap: wrap;
position: sticky;
top: 0;
z-index: 20;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.14);
}
.brand {
font-weight: 800;
font-size: 18px;
letter-spacing: -0.01em;
text-decoration: none;
color: inherit;
display: flex;
align-items: center;
}
.brand:hover { opacity: 0.85; }
.brand-logo { height: 32px; width: auto; display: block; }
/* Global search / command bar (NEW — optional, see README markup step 5).
Renders as a plain or