/* Mirage's base styles on the clearGRID theme. The brand theme (the --cg-* colour tokens for light and dark, the type scale, Inter and the logos) comes from the cleargrid-theme package: templates load cleargrid_theme/css/cleargrid.css first, then this file, then styles.css. Mirage defines no tokens of its own; this file only uses them. See docs/user-stories/cleargrid-theme.md. Sub-theme: "meters". Mirage reads meters, so its motif is the register of a meter: a faint field of odometer digit cells behind the page (the way contour lines are marinus's), status colours that read like a ledger (paid/ok green, pending amber, overdue/failed red) and tabular numerals for IDs, readings and counts. Every colour in Mirage's templates, stylesheets and scripts comes from the tokens (test/ui/test_colour_tokens.py enforces it). Pick by meaning, not hue: ok / warn / bad / info state: success, pending, failure, information. Text colour on its own, -soft as a tinted background with the matching text colour, -solid as a fill with --cg-on-solid (--cg-on-warn on warn). accent brand lime (buttons, selection) with --cg-on-accent. surface/border/muted neutral greys; --cg-card for white backgrounds, --cg-text for body text. ink, env --cg-ink/--cg-on-ink for dark table heads and cards; --cg-env/--cg-on-env is the environment colour (charcoal in production). shadow, backdrop drop shadows; the dim layer behind modal dialogs. series-1..3 data series in charts and map overlays (Chart.js, Leaflet, inline SVG), in this fixed order. Never reuse a status colour for a series. Validated for colour-blind separation on both surfaces. scale-low/high one-hue sequential scale (low to high value), e.g. colouring map points by signal strength. Mix between the ends with color-mix(in oklab, ...). Drawn over map tiles, which stay light in both themes, so it does not change with the theme. Canvas and JS-drawn colours read tokens with cgToken() from ui.js. Type scale (--fs-*, --lh-*, --fw-*, from the package). One set of sizes for the whole interface, in rem against the browser's 16px root (test/ui/test_typography.py forbids px and em font sizes, keyword weights and font families other than var(--cg-font...)). Mirage is a dense data app, so body text is --fs-base, not 1rem. --fs-xs .75rem 12px eyebrow labels, chips, badges, fine print. The smallest size text may have. --fs-sm .8125rem 13px table headers, secondary text, meta lines, small buttons, , h4. --fs-base .875rem 14px body text, table cells, controls, h3. --fs-md 1rem 16px section headings (h2), card titles. --fs-lg 1.25rem 20px the page title in the header (h1), report titles. --fs-xl 1.5rem 24px big numbers (stat cards), the sign-in title. Line heights: --lh-tight 1.2 (headings, controls, single-line labels), --lh-snug 1.35 (dense lists, cards), --lh-normal 1.5 (running text). Weights are numbers, from Inter's four faces: --fw-regular 400, --fw-medium 500, --fw-semibold 600, --fw-bold 700. Eyebrows: small uppercase section labels above a group (sidebar headings, popover titles, card sections) all use one style, the .eyebrow class, or the selector list under "Eyebrow" below for existing component labels. Fonts: --cg-font (Inter) for all UI text; --cg-font-mono (code, kbd, .mono) for code, serials and file names. Nothing else sets font-family. */ /* ---- Base ---- */ html { background: var(--cg-bg); } body { font-family: var(--cg-font); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--lh-normal); background-color: transparent; color: var(--cg-text); } /* ---- Type: base elements ---- */ h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-semibold); line-height: var(--lh-tight); } /* h1 is the page title; in the shell it sits in the header (.header-title h1 in styles.css). */ h1 { font-size: var(--fs-lg); } h2 { font-size: var(--fs-md); } h3 { font-size: var(--fs-base); } h4, h5, h6 { font-size: var(--fs-sm); } small { font-size: var(--fs-sm); } label { font-weight: var(--fw-medium); } /* Tables inherit --fs-base for cells; header cells are styled with their table (table th in styles.css, .data-table in components.css). */ button, input, select, textarea { font-size: var(--fs-base); } code, kbd, samp, pre, .mono { font-family: var(--cg-font-mono); } code, kbd, samp, pre { font-size: var(--fs-sm); } b, strong { font-weight: var(--fw-bold); } /* ---- Eyebrow ---- */ /* Small uppercase label above a group. Use .eyebrow on new markup; the component labels listed here share it. Components keep their own margins. */ .eyebrow, .popover__title, .sidebar-heading, .stat-card .label, .route-stat-card__section, .rw-phase-label { font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: .06em; text-transform: uppercase; color: var(--cg-muted); } /* The meter-register motif: rows of odometer digit cells, behind everything. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--cg-motif); -webkit-mask: url("../img/meter-register.svg") 0 0 / 420px 210px repeat; mask: url("../img/meter-register.svg") 0 0 / 420px 210px repeat; pointer-events: none; } button, input, select, textarea { font-family: inherit; } input, select, textarea { background-color: var(--cg-card); color: var(--cg-text); } form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), form select, form textarea { border-color: var(--cg-control-border); } a { color: var(--cg-link); text-underline-offset: 2px; } a:hover { color: var(--cg-link-hover); } /* Meter IDs, serials, readings and counts: digits that line up in columns. */ table, td, th, input, .meta, code, kbd, samp, [class*="count"], [class*="stat"], [class*="serial"], [class*="progress"], #result { font-variant-numeric: tabular-nums; } code, kbd, samp, pre { font-family: var(--cg-font-mono); } /* Visible keyboard focus everywhere */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--cg-focus-ring); outline-offset: 2px; } ::selection { background: var(--cg-lime); color: var(--cg-charcoal); } /* ---- Header: logo ---- cleargrid-theme's .cg-logo draws the logo for the scheme in effect (and the reversed one on a .cg-env-band); Mirage only sizes it. */ .header-brand .cg-logo { display: inline-block; width: 132px; height: 28px; margin-right: 12px; vertical-align: middle; } .header-nav { gap: .25rem; } .header-nav a { white-space: nowrap; } .header-brand { display: inline-flex; align-items: center; } .header-brand + a { margin-left: 4px; } /* ---- Ledger status ---- */ .status-ok, .genie-online, .genie-status-online, .genie-task-ok { color: var(--cg-ok); } .status-warn, .genie-unknown, .genie-degraded, .genie-status-degraded { color: var(--cg-warn); } .status-bad, .genie-offline, .genie-status-offline, .genie-task-missing { color: var(--cg-bad); } .status-info { color: var(--cg-info); } .genie-status-unknown { color: var(--cg-muted); } .status-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; } .status-chip.status-ok { background: var(--cg-ok-soft); } .status-chip.status-warn { background: var(--cg-warn-soft); } .status-chip.status-bad { background: var(--cg-bad-soft); } .status-chip.status-info { background: var(--cg-info-soft); } /* ---- Sign-in page ---- */ body.cg-login { min-height: 100vh; } .cg-login-card { width: min(100% - 32px, 26rem); margin: 8vh auto 0; padding: 28px 32px 24px; background: var(--cg-card); border: 1px solid var(--cg-border); border-radius: 16px; box-shadow: 0 1px 2px var(--cg-shadow), 0 12px 40px var(--cg-shadow); } .cg-login-logo.cg-logo { display: block; height: 56px; margin: 0 auto 16px; background-position: center; } .cg-login-card h1 { margin: 0 0 4px; text-align: center; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.01em; } .cg-login-sub { margin: 0 0 20px; text-align: center; color: var(--cg-muted); font-size: var(--fs-base); } .cg-login-card .cg-or { margin: 16px 0; text-align: center; color: var(--cg-muted); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; } .cg-login-card .cg-error { color: var(--cg-bad); margin-bottom: 12px; font-size: var(--fs-base); } .cg-login-card .btn { padding-block: .65rem; } /* ---- Environment ---- */ /* cleargrid-theme's env.css sets --cg-env/--cg-on-env from data-cg-env on (rendered by {% cg_env_attrs %}, or set by env.js from the hostname): charcoal in production, a colour per environment elsewhere. Mirage's header is a light band, so outside production it gets a strip in the environment colour, and the badge env.js puts in [data-cg-env-slot] is a solid pill in that colour. Production (stable) shows neither; on the next channel the package's lime badge applies. */ [data-cg-env-slot]:empty { display: none; } :root[data-cg-env]:not([data-cg-env="production"]) #header { box-shadow: inset 0 4px 0 var(--cg-env); } :root[data-cg-env]:not([data-cg-env="production"]) .cg-login-card { border-top: 4px solid var(--cg-env); } .header-env { display: inline-flex; margin-right: 8px; } .cg-login-env { display: flex; justify-content: center; margin: 0 0 12px; } .header-env .cg-env-badge, .cg-login-env .cg-env-badge { border-color: var(--cg-env); background-color: var(--cg-env); color: var(--cg-on-env); } /* ---- Phones ---- */ @media (max-width: 600px) { /* The API index lists label, path and description side by side: stack them. */ .api-item { flex-direction: column; align-items: flex-start; gap: .25rem; } .api-item > * { flex: none; max-width: 100%; overflow-wrap: anywhere; } .api-link { width: auto; } .header-brand .cg-logo { width: 104px; margin-right: 6px; } .cg-login-card { padding: 24px 20px 20px; margin-top: 4vh; } }