/* Field — the portal's palette. Dark olive-green. * * Lives in its own file rather than replacing app.css's :root because the previous * palette is still reachable from the switcher for comparison. Everything for both * lives here and in js/theme.js. * * THE SELECTOR IS THE IMPORTANT PART. `html:not([data-theme="dark"])` matches an * with no data-theme attribute at all, which is what the browser paints * before any script runs — so field is the default in CSS, not merely the default * that JavaScript happens to choose. With scripting off, storage blocked, or * theme.js deleted, the site is still this palette. Only an explicit * data-theme="dark", which only the switcher sets, opts out. * * That inverts the usual pattern (`[data-theme="x"]` opting *in*) and it is worth * being explicit about, because the obvious version — keying on [data-theme="field"] * and having theme.js set it — has a real failure mode: every page would paint the * old palette first and swap, and any reader with JS disabled would never see this * one at all. * * Two mechanisms: * * the token block below re-declares the design tokens. Most of the app follows * automatically, because most of app.css already draws * from var(--…). * rule overrides for the places in app.css that hard-code a hex or rgba() * — 38 of them — which no variable can reach. * * The overrides are the argument for eventually folding this file into app.css and * promoting those literals to variables. Worth doing once the comparison is no longer * needed and the switcher goes. * * Loaded AFTER app.css (and after doc.css on the two document pages) so its overrides * win without needing !important. */ /* --------------------------------------------------------------------------- Field — dark, built on the deepest colour in the reference artwork. The artwork carries four: #bec6ae pale sage (the sky), #a0ac94 mid sage (near hills), #697865 grey-sage (far hills), #1b2f24 deep green (the silhouettes). #1b2f24 is the page. The other three become ink: the pale sage lifts slightly for body copy, the mid sage is the muted step almost verbatim, and the grey-sage sits under it. Of the two dark candidates only #1b2f24 works as a background. #697865 is a mid tone — the mark's amber lands at 2.56:1 against it, and body text would have nowhere to go in either direction. Why this is not simply the existing dark theme with green swapped in: #1b2f24 is a good deal lighter than #0a0c0f (relative luminance .026 against .004). Everything drawn on it therefore has less headroom, which is why the ink steps below were solved rather than picked, and why the muted → muted-2 gap is narrower than the current theme's. --------------------------------------------------------------------------- */ html:not([data-theme="dark"]) { --bg: #1b2f24; /* The dark theme's two-light structure kept: a cool wash top-left, a warm one top-right. Both are greener and quieter here — a blue wash over green reads as a colour cast rather than as depth. */ --bg-grad: radial-gradient(1200px 800px at 15% -10%, #24402f 0%, transparent 60%), radial-gradient(900px 700px at 110% 10%, #2c2f18 0%, transparent 55%), #1b2f24; --panel: #21382a; --panel-2: #26402e; --panel-3: #2b4633; /* Recessed, so darker than the page — the same direction as the current dark theme. */ --well: #14231a; --border: #33513e; /* 1.61 vs the page; the dark theme's border is 1.40 */ --border-soft: #2a4231; /* Solved, not picked. Each ink was lifted in lightness with hue and saturation held until it cleared 4.5:1 against the *lightest* surface it can land on (--panel-3, which backs every .btn) — so no per-component case analysis is needed and a component moved between surfaces later cannot quietly break. --muted-2 is the one exception: it is held to the ratio the current dark theme achieves for it (3.69:1) rather than 4.5:1, because matching 4.5 on this lighter background collapsed it into --muted and destroyed the hierarchy the two steps exist to express. Even so the gap is narrower here — 1.52 between the two steps against the current theme's 1.82 — which is the cost of a page that starts 6x brighter than #0a0c0f. */ --text: #e4ead9; /* 8.42 worst surface (dark theme: 13.09 worst) */ --muted: #b9c2b0; /* 5.63 (dark theme: 6.29) */ --muted-2: #929e8a; /* 3.69 (dark theme: 3.58) */ /* The brand amber, unchanged — the payoff of a dark background. #f5a524 clears 5.08:1 on the lightest surface here, so the accent needs no adjustment at all, and neither does app.css's amber .btn.primary gradient. */ --accent: #f5a524; --accent-ink: #1a1204; /* A sage-leaning teal rather than the dark theme's sky cyan. #38bdf8 on green is legible but reads as a foreign colour on a page with no other blue in it. */ --cyan: #5fc9d6; --ok: #3fca82; --warn: #f5a524; --bad: #f78c95; /* Green-black rather than neutral black: a grey shadow over a green page greys the colour it falls on. */ --shadow: 0 10px 30px rgba(4, 10, 6, .5); /* Illustration surfaces. See the block in app.css for what each one is. * * --illo-bg is deeper than the page rather than equal to it: 1.25:1 below --bg, so each * illustration reads as a window rather than as a sticker on the wall. Deeper than * --well too, which is what makes the two that sit in a `.shot` frame look inset rather * than flush. * * Everything drawn on top is legible against it by a wide margin — the tightest is the * mesh violet at 5.35:1 — because these surfaces are all far darker than any of the * chrome, which is the point of them. * * The one that looks wrong and is not: --illo-ink lands at 1.08:1 against --illo-bg. It * is a keyline around a bright pin, so what it has to separate is amber or cyan from the * terrain, and it does that at 9.4:1 and 9.9:1. The current theme's equivalent is 1.01:1 * against its own background, so this is parity and not a regression. */ --illo-bg: #0f1b13; --illo-bg-hi: #16281c; --illo-ink: #08110c; --illo-line: #1e3427; --illo-line-2: #192b1f; --illo-land: #16281c; --illo-land-line: #24402e; --illo-alert: #210b0c; /* Lifted from #7c5cff. A violet against green needs more room than it does against near-black to stay a signal rather than a smudge. */ --illo-mesh: #8f79ff; --illo-chip-ink: #08252a; } /* --------------------------------------------------------------------------- Overrides for literals in app.css. Only fourteen rules, and that is the point: app.css hard-codes 38 colour literals and every one of them was chosen for a dark theme, so on a dark palette most are already right. What survives here are the ones whose *hue* is wrong — a blue-grey border or a slate hover on a page with no blue in it — plus the topbar and two status inks. Everything deliberately left to app.css: the amber .btn.primary gradient (the accent is the brand amber again, so app.css's own #f9b545 → var(--accent) is exactly right), every rgba(255,255,255,.0x) row hover, the rgba(0,0,0,.15) table header, the amber selection tints on .unit.sel / .map-chip.on / .filter-chip.on / .marquee / .addr-item:hover, every red and green tint, the ok/warn/info badge inks, both toast backgrounds — .toast.ok is already #10241a, a dark green — and the modal scrim. Each was measured against the new surfaces rather than assumed, and the two that failed are overridden at the end of this file. --------------------------------------------------------------------------- */ /* --- Scrollbars. Slate to green. --- */ html:not([data-theme="dark"]) ::-webkit-scrollbar-thumb { background: #3a5946; } html:not([data-theme="dark"]) ::-webkit-scrollbar-thumb:hover { background: #4a6f58; } /* --- The topbar, near-black. * * Not a contrast fix — the mark reads at 7.76:1 on the page, which is fine. It is a hue * fix. The mark is amber and amber sits nearly opposite green on the wheel, so on the * deep-green bar the logo vibrates against its own background. Near-black gives it the * same neutral setting it has in the current theme (10.49:1 here), and anchors the top of * the page. * * Green-black rather than grey-black: #0b100c against #0a0c0f. On a green page a neutral * black bar reads as a different material. */ html:not([data-theme="dark"]) .topbar { background: rgba(11, 16, 12, .92); border-bottom-color: #0f1710; } /* --- Translucent chrome over the map. --- */ html:not([data-theme="dark"]) .map-chip { background: rgba(33, 56, 42, .93); } html:not([data-theme="dark"]) .map-hint { background: rgba(33, 56, 42, .94); } html:not([data-theme="dark"]) .auth-card { background: linear-gradient(180deg, rgba(38, 64, 46, .96), rgba(27, 47, 36, .96)); } /* --- Focus ring, keyed to the sage teal rather than the dark theme's sky cyan. --- */ html:not([data-theme="dark"]) input:focus, html:not([data-theme="dark"]) select:focus, html:not([data-theme="dark"]) textarea:focus { border-color: #4e8189; box-shadow: 0 0 0 3px rgba(95, 201, 214, .14); } /* The select chevron is a data: URI with the muted colour baked into it, so it cannot follow --muted and would stay a pale grey-blue. Restated with the field ink (%23b9c2b0 is #b9c2b0 url-encoded) — and it has to be kept in step by hand, which is the price of a colour living inside a URL. */ html:not([data-theme="dark"]) select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b9c2b0' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } /* --- Hovers whose literals are slate. The white-overlay hovers elsewhere in app.css are hue-neutral and are left alone. --- */ html:not([data-theme="dark"]) .check:hover { border-color: #446b52; } html:not([data-theme="dark"]) .btn:hover:not(:disabled) { background: #33513e; border-color: #416449; } html:not([data-theme="dark"]) .map-chip:hover, html:not([data-theme="dark"]) .filter-chip:hover { border-color: #446b52; } /* --- The map container, seen while tiles load. Tile styling itself is JSON, not CSS — js/theme.js hands the matching array to UI.mapStyle. --- */ html:not([data-theme="dark"]) #map, html:not([data-theme="dark"]) .map { background: #16261c; } /* --- The two status literals that do not survive. #ff8a96 is used as ink for both .btn.danger and .badge.bad, in each case over its own red tint. On the lightest surface that stack lands at 4.30:1 — under the bar only because this page starts brighter than #0a0c0f. Lifted one shade, which is enough for both. Every other .badge.* ink clears it unchanged. --- */ html:not([data-theme="dark"]) .btn.danger, html:not([data-theme="dark"]) .badge.bad { color: #ff919c; } /* --------------------------------------------------------------------------- Overrides for the profile menu's own literals. .pick's swatch outline is a white overlay, which is right on both palettes; the rest of the menu is drawn entirely from tokens and needs nothing here. Kept as a section so that a future component added to app.css with a literal in it has an obvious home. --------------------------------------------------------------------------- */