spb/internetpressure

1@import 'tailwindcss';23@custom-variant dark (&:where(.dark, .dark *));45/*6  InternetPressure.io — an instrument, not a website.7  Near-black planes, hairline rules, tabular numerals. Colour is reserved for the pressure scale.8*/9:root {10  color-scheme: dark;11  --bg: #070a0f;12  --panel: #0c1117;13  --panel-2: #10161e;14  --line: #1b2430;15  --line-2: #243040;16  --ink: #e6edf3;17  --ink-2: #8b98a5;18  --ink-3: #5b6875;19  --accent: #5b8def;20  --accent-soft: rgba(91, 141, 239, 0.14);21  --neutral: #0f151d;2223  --p-calm: #4cc9f0;24  --p-normal: #7fb77e;25  --p-elevated: #e9c46a;26  --p-stressed: #f4a261;27  --p-high: #e76f51;28  --p-severe: #d62828;29  --p-extreme: #f72585;3031  --ok: #7fb77e;32  --warn: #e9c46a;33  --bad: #e76f51;3435  --radius: 4px;36  --header-h: 52px;37}3839/* Graceful light fallback only when the OS asks for it AND the dark class is absent (dark is forced by default). */40@media (prefers-color-scheme: light) {41  :root:not(.dark) {42    color-scheme: light;43    --bg: #f5f7fa;44    --panel: #ffffff;45    --panel-2: #eef2f6;46    --line: #d5dce4;47    --line-2: #c2ccd7;48    --ink: #0c1117;49    --ink-2: #4d5a68;50    --ink-3: #7b8794;51    --neutral: #e3e8ee;52  }53}5455@theme inline {56  --color-bg: var(--bg);57  --color-panel: var(--panel);58  --color-panel-2: var(--panel-2);59  --color-line: var(--line);60  --color-line-2: var(--line-2);61  --color-ink: var(--ink);62  --color-ink-2: var(--ink-2);63  --color-ink-3: var(--ink-3);64  --color-accent: var(--accent);65  --color-accent-soft: var(--accent-soft);66  --color-neutral: var(--neutral);67  --color-ok: var(--ok);68  --color-warn: var(--warn);69  --color-bad: var(--bad);70  --color-calm: var(--p-calm);71  --color-normal: var(--p-normal);72  --color-elevated: var(--p-elevated);73  --color-stressed: var(--p-stressed);74  --color-high: var(--p-high);75  --color-severe: var(--p-severe);76  --color-extreme: var(--p-extreme);77  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;78  --font-mono: var(--font-geist-mono), ui-monospace, 'SF Mono', Menlo, monospace;79  --radius-sm: 2px;80  --radius-md: 4px;81}8283@layer base {84  html {85    background: var(--bg);86    color: var(--ink);87    -webkit-text-size-adjust: 100%;88    scrollbar-color: var(--line-2) transparent;89  }90  body {91    font-family: var(--font-sans);92    font-feature-settings: 'tnum' 1, 'cv11' 1;93    font-size: 14px;94    line-height: 1.45;95    background: var(--bg);96    color: var(--ink);97  }98  * {99    border-color: var(--line);100  }101  :focus-visible {102    outline: 2px solid var(--accent);103    outline-offset: 2px;104  }105  ::selection {106    background: rgba(91, 141, 239, 0.35);107  }108  a {109    text-decoration: none;110  }111  table {112    border-collapse: collapse;113  }114  button,115  input,116  select,117  textarea {118    font: inherit;119    color: inherit;120  }121  svg {122    display: block;123  }124}125126@utility num {127  font-family: var(--font-mono);128  font-variant-numeric: tabular-nums;129  letter-spacing: -0.01em;130}131@utility label {132  font-size: 10.5px;133  letter-spacing: 0.12em;134  text-transform: uppercase;135  color: var(--ink-2);136  font-weight: 500;137}138@utility hairline {139  border-top: 1px solid var(--line);140}141@utility panel {142  background: var(--panel);143  border: 1px solid var(--line);144  border-radius: var(--radius);145}146@utility grid-texture {147  background-image: linear-gradient(to right, rgba(139, 152, 165, 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(139, 152, 165, 0.06) 1px, transparent 1px);148  background-size: 8px 8px;149  mask-image: radial-gradient(ellipse at 40% 30%, rgba(0, 0, 0, 0.9), transparent 75%);150}151@utility scroll-x {152  overflow-x: auto;153  scrollbar-width: thin;154  -webkit-overflow-scrolling: touch;155}156@utility snap-row {157  display: flex;158  gap: 8px;159  overflow-x: auto;160  scroll-snap-type: x mandatory;161  scrollbar-width: none;162  padding-bottom: 2px;163}164@utility snap-item {165  scroll-snap-align: start;166  flex: 0 0 auto;167}168169@layer components {170/* dense typographic tables */171.tbl {172  width: 100%;173  font-size: 12.5px;174}175.tbl th {176  font-size: 10.5px;177  letter-spacing: 0.1em;178  text-transform: uppercase;179  color: var(--ink-2);180  font-weight: 500;181  text-align: left;182  padding: 6px 8px;183  border-bottom: 1px solid var(--line);184  white-space: nowrap;185}186.tbl td {187  padding: 6px 8px;188  border-bottom: 1px solid var(--line);189  vertical-align: middle;190  white-space: nowrap;191}192.tbl tr:last-child td {193  border-bottom: 0;194}195.tbl tbody tr:hover td {196  background: var(--panel-2);197}198.tbl .r {199  text-align: right;200}201.tbl th.r {202  text-align: right;203}204205/* Pressure Front arcs: dash offset animates only while a front is developing/active (class toggled by data). */206@keyframes front-flow {207  to {208    stroke-dashoffset: -24;209  }210}211212/* MapLibre chrome */213.maplibregl-ctrl-attrib {214  font-size: 10px !important;215  background: rgba(7, 10, 15, 0.7) !important;216  color: var(--ink-3) !important;217}218.maplibregl-ctrl-attrib a {219  color: var(--ink-2) !important;220}221.maplibregl-ctrl-group {222  background: var(--panel) !important;223  border: 1px solid var(--line) !important;224  border-radius: var(--radius) !important;225  box-shadow: none !important;226}227.maplibregl-ctrl-group button {228  filter: invert(0.85);229}230.maplibregl-canvas {231  outline: none;232}233}234235@media (prefers-reduced-motion: reduce) {236  * {237    animation-duration: 0.01ms !important;238    transition-duration: 0.01ms !important;239  }240}241