/* Peptraqx. * * Layered on glass.css, which owns the palette, the controls and the flash * stack. Everything here is prefixed `pq-` so the tool can be restyled without * touching the storefront, and so a selector collision is impossible rather * than merely unlikely. * * Two themes, one accent * ---------------------- * The tool used to run dark in both themes, on the argument that it is a * workspace somebody opens at 6am in a dark room. That is still true at night * and is why dark is the richer of the two — but it is not a reason to refuse * daylight, and a tool that ignores the toggle every other page on the site * honours reads as broken rather than as opinionated. So the tokens come in * pairs, keyed off `[data-theme]` on exactly like glass.css, and the * script resolves the OS preference into that attribute before paint. * * The accent is the brand's steel blue rather than the cyan this file opened * with: Peptraqx is PEPTiQX, the logo is the same hexagon in the same blue, and * a second signature colour would have said otherwise. It shifts by theme * because one blue cannot clear 4.5:1 against both #f4f6f9 and #080b11 — * steel-800 does it on paper, steel-400 does it on ink. * * `--pq-accent-rgb` carries the same colour as bare channels, for the handful * of places that need it at an arbitrary alpha (glows, the syringe fill). */ .pq { color-scheme: light; --pq-bg: #f4f6f9; --pq-panel: #ffffff; --pq-panel-2: #eef1f6; --pq-line: rgba(28, 36, 51, 0.14); --pq-line-soft: rgba(28, 36, 51, 0.07); --pq-ink: #1c2433; --pq-ink-soft: #52627d; --pq-ink-faint: #7a8aa0; --pq-accent: #35598a; /* --steel-800 */ --pq-accent-rgb: 53, 89, 138; --pq-accent-soft: rgba(53, 89, 138, 0.10); --pq-top-bg: rgba(255, 255, 255, 0.82); --pq-pink: #c0424f; --pq-pink-rgb: 192, 66, 79; --pq-violet: #6d3fc4; --pq-violet-rgb: 109, 63, 196; /* Both carry small mono text ("taken", a dose time), so they are picked to clear 4.5:1 on the panel rather than to match the dark theme's brightness. */ --pq-ok: #237c61; --pq-warn: #9a6a12; /* The three macros — categories, not quantities, so three hues rather than a ramp. Pastel, and as pastel as the arithmetic permits: all three sit at OKLCH L 0.77 / C 0.105, which is the top of the lightness band and the chroma floor exactly. Any softer and a hue stops doing identity work — below C 0.10 it reads as grey, and the pair separation collapses. Equal lightness is the point in a ring: a slice that is darker than its neighbours reads as bigger than it is. Validated, not eyeballed: hues 255 / 134 / 350 clear the all-pairs checks (worst pair ΔE 8.2 under deuteranopia, 6.6 tritan, 15.4 unsimulated). All-pairs rather than adjacent because this is a ring — the first slice touches the last. Re-run tools/validate_palette.py against BOTH surfaces before touching any of the three. Carbs is constrained on HUE, and that is what keeps it at 134 rather than the 150 of a truer green. Green and the blue protein converge under deuteranopia as the hue climbs: 136 is the last step clearing the ΔE 6.0 floor at this lightness, 137 is already under it, and no amount of chroma rescues the ones past it. 134 leaves a little margin without reading as yellow. If it ever has to go greener than that, the lightness has to come down with it — L 0.68 buys hue 150 — but then the ring loses its equal weighting, which is the worse trade. All three sit at ~2.1:1 against a white card, under the 3:1 mark minimum. That is legal here only because every slice carries a visible label with its grams and percentage beside a matching swatch, so nothing is encoded by colour alone. Do not remove those labels without re-darkening these. */ --pq-protein: #86b7f6; --pq-carbs: #99c37e; --pq-fat: #e798be; /* The weight ring is a single series, so it takes slot one. Softer than the brand accent on purpose; the accent stays the brand's steel blue for chrome (buttons, links, eyebrows), which is a settled decision. */ --pq-ring: #86b7f6; /* The same three hues as the macros, in channel form, for the places that want them as a wash rather than as a mark -- see --pq-accent-rgb for why the bare-channel twin exists. Three and not four on purpose: at this lightness the trio already fills the space. Every hue on the circle was checked against it at L 0.77 / C 0.105, and the best fourth anywhere scores dE 3.6 under deuteranopia against a floor of 6.0 (the near miss is an amber at h 83, which collapses into the carbs green). So these cycle as a rhythm across a row of tiles and are never asked to tell four things apart -- nothing here is encoded by hue, and every tile carries its own label. If a fourth is ever genuinely needed, it has to come from a second lightness step, not from another hue. */ --pq-tint-a-rgb: 134, 183, 246; --pq-tint-b-rgb: 153, 195, 126; --pq-tint-c-rgb: 231, 152, 190; /* What sits on a filled accent button. White here, near-black in dark, where the accent is a light steel — 7.1:1 and 7.2:1 respectively. */ --pq-btn-ink: #ffffff; background: var(--pq-bg); color: var(--pq-ink); min-height: 100vh; font-family: var(--font); } :root[data-theme="dark"] .pq { color-scheme: dark; --pq-bg: #080b11; --pq-panel: #0e141e; --pq-panel-2: #131b28; --pq-line: rgba(150, 190, 235, 0.16); --pq-line-soft: rgba(150, 190, 235, 0.08); --pq-ink: #e8f1f8; --pq-ink-soft: #a3b6cb; --pq-ink-faint: #74879f; --pq-accent: #7ba4d4; /* --steel-400 */ --pq-accent-rgb: 123, 164, 212; --pq-accent-soft: rgba(123, 164, 212, 0.16); --pq-top-bg: rgba(8, 11, 17, 0.82); --pq-pink: #ff3d71; --pq-pink-rgb: 255, 61, 113; --pq-violet: #a855f7; --pq-violet-rgb: 168, 85, 247; --pq-ok: #34d399; --pq-warn: #fbbf24; /* Dark takes its own steps from the same three hues rather than flipping the light ones: L 0.65 at the same C 0.105, which clears every check against the dark card including contrast (worst pair ΔE 8.0 deutan, 6.6 tritan). The hue ceiling is the same story as in light, and lands in the same place — 136 is the last step over the floor, so carbs sits at 134 here too. The binding pair differs, though: in light it is the green against the blue, in dark the green against the pink, because the dark fat is a muted rose that a deuteranope reads as very close to a mid green. Either way the fix is the hue, not the lightness. */ --pq-protein: #6292ce; --pq-carbs: #749d5a; --pq-fat: #bf7498; --pq-ring: #6292ce; --pq-tint-a-rgb: 98, 146, 206; --pq-tint-b-rgb: 116, 157, 90; --pq-tint-c-rgb: 191, 116, 152; --pq-btn-ink: #0e131c; } .pq a { color: inherit; } /* ...except a button. * * `.pq a` is (0,1,1) and glass.css's own `.btn { color: var(--btn-fg) }` is * (0,1,0), so every button rendered as an anchor lost its ink to this rule and * inherited the body's instead — dark text on the accent in light mode (3.6:1), * light text on it in dark (2.3:1). Both failed; only