/* ============================================================ Zharkwave SEO Toolkit — design system Cloudflare-dashboard-inspired: dark sidebar/content, card-based panels, flat buttons, rounded pill badges. Dark mode is the default (matches the reference); a light mode is fully defined below and toggled via [data-theme] on . ============================================================ */ :root { /* ---- Dark mode (default) ---- Panels sit ABOVE the page, not below it. The old scheme had the page at #151414 and the cards at #101010 — darker than what they sat on — which reads as holes punched in the background and makes every card edge a hard line to focus past. Raising the cards and dropping the page turns the same layout into something the eye can rest on. There are two brand blues, and the difference is not decoration: --brand-solid #0101ff, the brand blue. White text on it is 8.6:1, so it is exactly right for a filled button — and it is 2.0:1 against a dark panel, so as TEXT on this background it is close to unreadable. --brand the same hue lifted until it clears 4.5:1 on the panel (4.7:1) and on the page (5.1:1). Everything that has to be READ in blue uses this: links, active tabs, bars, chart lines, focus rings. In light mode the two are the same value, because #0101ff on white is 8.6:1 and needs no help. */ --bg: #131314; --bg-elevated: #1b1b1b; --bg-panel: #1b1b1b; --bg-panel-2: #232325; --bg-hover: #2a2a2d; --border: #2f2f33; --text: #dbdbdb; --text-dim: #9c9ca1; /** * Measured, not judged by eye. * * This was #7b7b80, which is 4.09:1 on the panel — under the 4.5:1 that * normal-size text has to clear, and it carries a lot of the screen: the * line under every figure, the addresses, "24 of 25". #8a8a8f is 5.01:1 * here and 5.40:1 on the page behind it, and still reads as the quiet one * beside --text-dim at 6.30:1. */ --text-faint: #8a8a8f; --brand: #3f80ff; --brand-solid: #0101ff; --brand-hover: #2b2bff; --brand-text: #ffffff; /** * ── Status colour, dark theme: the ink half of the quality scale ────────── * * Same four hues as --tone-* (the fills: rings, bars, gauges, dots), moved * only in lightness until small text clears 4.5:1 on the panel. Two roles, * one family — before this the Maps pages used the fill green for text and * the SEO pages used a different green entirely, so "good" was two colours * depending on which tab you were on. * * Measured on the card (#1c1c1e): good 5.07:1, average 9.27:1, poor 6.45:1, * bad 4.54:1. Only `bad` had to move here; the others are already readable * on a dark panel. */ --pass: #35d399; --warn: #f5b942; --fail: #ef5a6f; --tone-good-ink: var(--pass); --tone-average-ink: var(--warn); --tone-bad-ink: var(--fail); --tone-poor-ink: color-mix(in oklab, var(--warn) 45%, var(--fail)); --info: #6c8cff; --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4); /* One vertical rhythm for every page. Stacked blocks are spaced by flex `gap` on their container rather than per-element margins — margins were silently doing nothing between a .panel and a plain results
, which is why some pages read as cramped and others didn't. */ --stack-gap: 20px; /** * How far the row under a page heading sits from it — the meta line, the * tabs, the back link. One number, because a reader moving between the * Website Audit and GBP Optimization should not be able to tell that two * different people built the headers. * * The Maps pages already worked to this figure by pulling their rows back * against --stack-gap (see .mr-back / .mr-detail-bar). The project pages * did not, and stacked 18px of .dash-head margin on top of the 20px column * gap on top of 8px of their own: 51px between the title and the line under * it, against 10px two clicks away. */ --head-gap: 10px; /* The tallest a location card's body gets with one line of stats, an address and an optional "Last read" under it. Every page's cards use it, so the list does not change height when you walk between them. */ --mr-card-body-h: 108px; /* The tallest a listings row gets: a status with a note under it, or a name with "via Google" under it, plus the cell's own padding (one link icon in Your entry since 4 Oct 2026, not two stacked buttons). Every row uses it, so the list does not step. */ --lc-dir-row-h: 68px; } :root[data-theme="light"] { /* Cards sit above the page in both themes: a grey ground with white cards on it here, a near-black ground with lighter cards in dark mode. Same relationship, opposite ends of the scale — which is why a layout reads the same way whichever theme you are in. The greys are all one hue family with the text (a faintly green near-black), rather than the blue-grey they used to be — a warm text on cool secondary text reads as two different inks on the same page. Measured against the CARD, because that is what most text actually sits on: text 15.0:1, secondary and faint both #595a65 since 28 Sept 2026 (6.3:1 on the page, 6.8:1 on a card), and the brand blue 8.5:1 — so light mode needs no second blue the way dark mode does. `pass` and `warn` were both near 3.2:1 before this pass and are 5.1:1 now; they label state in words, and a label has to be readable. */ --bg: #f4f5f5; --bg-elevated: #fefefe; --bg-panel: #fefefe; /* A step DOWN from the white card, for tiles inset within one. */ --bg-panel-2: #f1f2f1; --bg-hover: #ebedeb; --border: #dcdedc; --text: #242723; /* Owner, 27 Sept 2026 (was #666a66). */ --text-dim: #595a65; /* One grey for all quiet text in light mode (owner, 27 Sept 2026): the same as --text-dim. Was #6b6f6b. */ --text-faint: #595a65; --brand: #0101ff; --brand-solid: #0101ff; --brand-hover: #0000c4; --brand-text: #ffffff; /** * ── The Website Audit's status colours, which are now everyone's ────────── * * Chris put the two pages side by side: the Website Audit's green against * the Maps green, on the same screen, meaning the same thing. These three * are the audit's, unchanged, and the Maps scale is derived from them * below — so there is one green in the product, not one per section. * * On the card (#fefefe): pass 5.06:1, warn 5.10:1, fail 5.20:1. */ --pass: #007f43; --warn: #9a6100; --fail: #c23a4c; --tone-good-ink: var(--pass); --tone-average-ink: var(--warn); --tone-bad-ink: var(--fail); /* The Maps grid has a fourth band between "average" and "out". It has no equivalent on the audit, so it is mixed from the two it sits between rather than picked by eye. */ --tone-poor-ink: color-mix(in oklab, var(--warn) 45%, var(--fail)); --info: #3a5bd9; --shadow: 0 1px 2px rgba(36, 39, 35, 0.06); } /** * ── The quality scale: one green for the whole product ───────────────────── * * Good, average, poor, bad — used BY MEANING, not by position: a five-star * review, a rank in the top three and a check with nothing to do are all * "good". Every Maps chart draws from here: rank bands, review stars, the * optimization score, a listing's checks. * * These ARE the Website Audit's `--pass` / `--warn` / `--fail`, and that is * the point. The Maps pages had a palette of their own — a brighter green, a * brighter red — so the same word meant one colour on the audit and another * on GBP Optimization, which is exactly what you see when you put the two * pages side by side. There is one set now, and it moves with the theme * because the audit's always did. * * The two steps the audit has no name for are mixed from the ones they sit * between rather than picked by eye: `--tone-poor` between average and bad * (the grid's fourth band), `--tone-fair` between good and average (4★). * * The map's pin discs keep their own deeper cut further down this file: they * carry white numerals over photographic tiles, which is a contrast problem * the page's colours do not have. * * Aliases: `--mr-*` (the tracker) and `--rv-s1…5` (review stars) point here. * In script, window.ZW.TONE (fills) and window.ZW.INK (text) in shared.js. */ :root { --tone-good: var(--pass); --tone-average: var(--warn); --tone-poor: var(--tone-poor-ink); --tone-bad: var(--fail); --tone-fair: color-mix(in oklab, var(--tone-good) 55%, var(--tone-average)); --tone-none: var(--text-faint); } * { box-sizing: border-box; } /* How wide the content column is allowed to get. See .main. */ :root { --content-max: 1320px; } /** * Every button is a button. * * `.btn` set `cursor: pointer` and nothing else did, so the dark and grey * buttons — Refresh, New audit, every `.btn-secondary`, `.btn-ghost` and * `.btn-link` — kept the arrow cursor while the blue ones showed a hand. The * browser default for