spb/satelliteindex

1@import 'tailwindcss';23/*4  SatelliteIndex design tokens — restrained dark space interface.5  Near-black navy planes, off-white ink, electric cyan accent used sparingly, violet as the secondary accent.6  Status: green = active, orange = degraded/uncertain, red = failed/warning, gray = inactive.7  Orbit classes get fixed hues shared by the globe, charts and badges (LEO cyan · MEO violet · GEO amber · HEO pink · other gray).8*/910:root {11  color-scheme: dark;12  --space: #060912; /* page plane */13  --plane: #0b1020; /* panels, header */14  --plane-2: #111830; /* hover wash, chips, inputs */15  --plane-3: #182140; /* active chip, table hover */16  --ink: #eaf0ff;17  --ink-2: #a3aec8;18  --ink-3: #6b7694;19  --rule: rgba(160, 180, 230, 0.12);20  --rule-strong: rgba(160, 180, 230, 0.28);21  --accent: #38d3ff;22  --accent-ink: #04111c;23  --accent-soft: rgba(56, 211, 255, 0.12);24  --accent-2: #8f7dff;25  --accent-2-soft: rgba(143, 125, 255, 0.14);26  --active: #38d17f;27  --active-soft: rgba(56, 209, 127, 0.14);28  --warn: #f5a524;29  --warn-soft: rgba(245, 165, 36, 0.14);30  --danger: #ff5c6c;31  --danger-soft: rgba(255, 92, 108, 0.14);32  --inactive: #7c869e;33  --inactive-soft: rgba(124, 134, 158, 0.16);3435  --leo: #38d3ff;36  --meo: #8f7dff;37  --geo: #f5b544;38  --heo: #ff7ab6;39  --other: #7c869e;4041  --series-1: #38d3ff;42  --series-2: #8f7dff;43  --series-3: #38d17f;44  --series-4: #f5b544;45  --series-5: #ff7ab6;46  --series-6: #5ea0ff;47  --series-7: #c9d3f2;48  --series-8: #ff5c6c;4950  --radius: 6px;51  --radius-lg: 12px;52  --header-h: 60px;53  --tabbar-h: 58px;54}5556@theme inline {57  --color-space: var(--space);58  --color-plane: var(--plane);59  --color-plane-2: var(--plane-2);60  --color-plane-3: var(--plane-3);61  --color-ink: var(--ink);62  --color-ink-2: var(--ink-2);63  --color-ink-3: var(--ink-3);64  --color-rule: var(--rule);65  --color-rule-strong: var(--rule-strong);66  --color-accent: var(--accent);67  --color-accent-ink: var(--accent-ink);68  --color-accent-soft: var(--accent-soft);69  --color-accent-2: var(--accent-2);70  --color-accent-2-soft: var(--accent-2-soft);71  --color-active: var(--active);72  --color-active-soft: var(--active-soft);73  --color-warn: var(--warn);74  --color-warn-soft: var(--warn-soft);75  --color-danger: var(--danger);76  --color-danger-soft: var(--danger-soft);77  --color-inactive: var(--inactive);78  --color-inactive-soft: var(--inactive-soft);79  --color-leo: var(--leo);80  --color-meo: var(--meo);81  --color-geo: var(--geo);82  --color-heo: var(--heo);83  --color-other: var(--other);84  --color-series-1: var(--series-1);85  --color-series-2: var(--series-2);86  --color-series-3: var(--series-3);87  --color-series-4: var(--series-4);88  --color-series-5: var(--series-5);89  --color-series-6: var(--series-6);90  --color-series-7: var(--series-7);91  --color-series-8: var(--series-8);9293  --font-sans: var(--font-ui), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;94  --font-mono: var(--font-mono), ui-monospace, 'SF Mono', Menlo, monospace;9596  --text-2xs: 0.6875rem;97  --text-2xs--line-height: 1rem;98  --radius-sm: var(--radius);99  --radius-lg: var(--radius-lg);100}101102html {103  background: var(--space);104  color: var(--ink);105  font-family: var(--font-sans);106  -webkit-text-size-adjust: 100%;107  scroll-behavior: auto;108}109110body {111  background:112    radial-gradient(1200px 600px at 70% -10%, rgba(56, 211, 255, 0.07), transparent 60%),113    radial-gradient(900px 500px at 0% 20%, rgba(143, 125, 255, 0.06), transparent 60%),114    var(--space);115  min-height: 100%;116  overflow-x: hidden;117}118119::selection {120  background: rgba(56, 211, 255, 0.35);121}122123/* ---- utilities ---------------------------------------------------------------------------------------------- */124.container-x {125  padding-left: max(1rem, env(safe-area-inset-left));126  padding-right: max(1rem, env(safe-area-inset-right));127}128@media (min-width: 768px) {129  .container-x {130    padding-left: 2rem;131    padding-right: 2rem;132  }133}134.safe-bottom {135  padding-bottom: env(safe-area-inset-bottom, 0px);136}137.mono {138  font-family: var(--font-mono);139  font-variant-numeric: tabular-nums;140  letter-spacing: 0.01em;141}142.tnum {143  font-variant-numeric: tabular-nums;144}145.eyebrow {146  font-size: 0.6875rem;147  line-height: 1rem;148  letter-spacing: 0.14em;149  text-transform: uppercase;150  color: var(--ink-3);151  font-weight: 600;152}153.display {154  font-weight: 650;155  letter-spacing: -0.03em;156  line-height: 0.98;157}158.panel {159  background: color-mix(in oklab, var(--plane) 88%, transparent);160  border: 1px solid var(--rule);161  border-radius: var(--radius-lg);162  backdrop-filter: blur(10px);163}164.hairline {165  border-color: var(--rule);166}167.grid-bg {168  background-image:169    linear-gradient(to right, rgba(160, 180, 230, 0.05) 1px, transparent 1px),170    linear-gradient(to bottom, rgba(160, 180, 230, 0.05) 1px, transparent 1px);171  background-size: 48px 48px;172  mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);173}174.scrollbar-thin {175  scrollbar-width: thin;176  scrollbar-color: var(--rule-strong) transparent;177}178.no-scrollbar::-webkit-scrollbar {179  display: none;180}181.no-scrollbar {182  scrollbar-width: none;183}184.link {185  color: var(--ink);186  text-decoration-color: var(--rule-strong);187  text-underline-offset: 3px;188}189.link:hover {190  color: var(--accent);191  text-decoration: underline;192}193.focus-ring:focus-visible {194  outline: 2px solid var(--accent);195  outline-offset: 2px;196}197a:focus-visible,198button:focus-visible,199input:focus-visible,200select:focus-visible,201summary:focus-visible {202  outline: 2px solid var(--accent);203  outline-offset: 2px;204  border-radius: 4px;205}206207/* status dot */208.dot {209  display: inline-block;210  width: 7px;211  height: 7px;212  border-radius: 999px;213  background: currentColor;214  box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 20%, transparent);215}216.pulse {217  animation: pulse 2.4s ease-in-out infinite;218}219@keyframes pulse {220  0%,221  100% {222    box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 20%, transparent);223  }224  50% {225    box-shadow: 0 0 0 7px color-mix(in oklab, currentColor 6%, transparent);226  }227}228229/* data tables: transform to stacked rows on small screens when marked */230.data-table {231  width: 100%;232  border-collapse: collapse;233  font-variant-numeric: tabular-nums;234}235.data-table th {236  text-align: left;237  font-weight: 600;238  font-size: 0.6875rem;239  letter-spacing: 0.1em;240  text-transform: uppercase;241  color: var(--ink-3);242  padding: 0.5rem 0.75rem;243  border-bottom: 1px solid var(--rule-strong);244  white-space: nowrap;245}246.data-table td {247  padding: 0.6rem 0.75rem;248  border-bottom: 1px solid var(--rule);249  vertical-align: middle;250}251.data-table tbody tr:hover {252  background: var(--plane-2);253}254.data-table .num {255  text-align: right;256}257@media (max-width: 767px) {258  .data-table.stack thead {259    display: none;260  }261  .data-table.stack tr {262    display: grid;263    grid-template-columns: 1fr 1fr;264    gap: 0.15rem 0.75rem;265    padding: 0.7rem 0;266    border-bottom: 1px solid var(--rule);267  }268  .data-table.stack td {269    display: block;270    border: 0;271    padding: 0;272  }273  .data-table.stack td[data-label]::before {274    content: attr(data-label);275    display: block;276    font-size: 0.625rem;277    letter-spacing: 0.1em;278    text-transform: uppercase;279    color: var(--ink-3);280  }281  .data-table.stack td.primary {282    grid-column: 1 / -1;283  }284  .data-table.stack td.num {285    text-align: left;286  }287}288289@media (prefers-reduced-motion: reduce) {290  *,291  *::before,292  *::after {293    animation-duration: 0.01ms !important;294    transition-duration: 0.01ms !important;295  }296}297