Lumbridge Bench

site/app/globals.css

@@ -0,0 +1,166 @@
+@import "tailwindcss";
+
+/* ---------------------------------------------------------------------------
+   Lumbridge Bench — model evidence lab.
+
+   This is a measurement tool, so it reads like a bench instrument rather than
+   a dashboard: near-black panel, hairline rules, tabular figures everywhere,
+   and a phosphor palette that carries meaning rather than decoration.
+
+   Colour is semantic and must stay that way:
+     signal    (amber)  — our private measurement. The real number.
+     reference (cyan)   — public benchmark. Calibration only, never a ranking.
+   Anything that dilutes that distinction on screen undermines the whole point
+   of the two-tier design. See docs/DECISIONS.md#d5.
+--------------------------------------------------------------------------- */
+
+@theme {
+  --color-void: #08090b;
+  --color-panel: #0d0f13;
+  --color-panel-2: #121519;
+  --color-rule: #1e232b;
+  --color-rule-bright: #2c333d;
+  --color-ink: #e8e6e1;
+  --color-dim: #79818d;
+  --color-dimmer: #4a515b;
+
+  --color-signal: #f2b134;
+  --color-signal-dim: #6b4f18;
+  --color-reference: #5896ae;
+  --color-reference-dim: #23414d;
+
+  --color-pass: #52a86e;
+  --color-fail: #cb5a54;
+
+  --font-display: var(--font-instrument), ui-serif, Georgia, serif;
+  --font-mono: var(--font-plex-mono), ui-monospace, monospace;
+}
+
+:root {
+  color-scheme: dark;
+}
+
+html {
+  background: var(--color-void);
+}
+
+body {
+  color: var(--color-ink);
+  font-family: var(--font-mono);
+  font-feature-settings: "tnum" 1, "zero" 1;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Graph-paper substrate. Two grids at different scales, like a scope screen,
+   plus a vignette so the panel edges fall away rather than ending abruptly. */
+.substrate {
+  position: fixed;
+  inset: 0;
+  z-index: -2;
+  background-color: var(--color-void);
+  background-image:
+    linear-gradient(rgba(120, 140, 160, 0.028) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(120, 140, 160, 0.028) 1px, transparent 1px),
+    linear-gradient(rgba(120, 140, 160, 0.055) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(120, 140, 160, 0.055) 1px, transparent 1px);
+  background-size: 22px 22px, 22px 22px, 110px 110px, 110px 110px;
+}
+
+.substrate::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    ellipse 120% 80% at 50% 0%,
+    transparent 20%,
+    rgba(8, 9, 11, 0.75) 75%,
+    var(--color-void) 100%
+  );
+}
+
+/* Film grain. Keeps large dark fields from banding and gives the panel a
+   physical, slightly analogue quality. */
+.grain {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  opacity: 0.16;
+  mix-blend-mode: overlay;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
+}
+
+/* Instrument label: the small stamped caps used on panel headings. */
+.label {
+  font-size: 0.6875rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--color-dimmer);
+}
+
+/* Numbers that should read as a live readout. */
+.readout {
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+}
+
+/* Hairline panel. Border colour is deliberately close to the background —
+   structure should be felt more than seen. */
+.panel {
+  background: linear-gradient(180deg, var(--color-panel) 0%, var(--color-void) 100%);
+  border: 1px solid var(--color-rule);
+}
+
+/* Tick strip used as a section divider — evokes a measurement scale. */
+.ticks {
+  height: 6px;
+  background-image: repeating-linear-gradient(
+    90deg,
+    var(--color-rule-bright) 0 1px,
+    transparent 1px 9px
+  );
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Staggered page-load reveal. One orchestrated entrance rather than scattered
+   micro-interactions. */
+.rise {
+  animation: rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes trace {
+  from {
+    stroke-dashoffset: var(--trace-len);
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+/* The throughput curve draws itself like a scope sweep. */
+.trace {
+  stroke-dasharray: var(--trace-len);
+  animation: trace 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.25s both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rise,
+  .trace {
+    animation: none;
+  }
+}
+
+::selection {
+  background: var(--color-signal);
+  color: var(--color-void);
+}