SPB Git forge
28commits 1branches 0releases
7.7 MBsize
maindefault branch
10 days agolast push
Python 66.3% TypeScript 22.7% JavaScript 8.6% HTML 1.4% CSS 0.7%
16.1 KB · 740 lines css
Raw Blame History
1@import 'tailwindcss';23/* =====================================================================================================================4   Company Atlas — design tokens5   A premium intelligence terminal blended with a modern data atlas: dense but readable, hairlines over cards, tabular6   numbers, one accent (atlas blue), semantic greens/ambers/reds, and a fixed hue per event type so the live feed reads at7   a glance. Two themes on <html data-theme="light|dark"> (default follows the system; prepaint script avoids flashes).8   ===================================================================================================================== */910:root,11[data-theme='light'] {12  color-scheme: light;13  --canvas: #f7f7f4;14  --surface: #ffffff;15  --surface-2: #efefeb;16  --surface-3: #e4e5df;17  --ink: #0f1419;18  --ink-2: #4a5160;19  --ink-3: #7b8294;20  --rule: rgba(15, 20, 25, 0.1);21  --rule-strong: rgba(15, 20, 25, 0.22);22  --accent: #1f4fd8;23  --accent-ink: #ffffff;24  --accent-soft: rgba(31, 79, 216, 0.1);25  --positive: #16a34a;26  --positive-soft: rgba(22, 163, 74, 0.12);27  --warning: #b26a05;28  --warning-soft: rgba(217, 134, 12, 0.14);29  --danger: #c0333d;30  --danger-soft: rgba(192, 51, 61, 0.12);31  --live: #16a34a;3233  /* event-type hues (spec §21) */34  --ev-product: #6d3fc7;35  --ev-pricing: #b26a05;36  --ev-hiring: #0d7c86;37  --ev-leadership: #c2366f;38  --ev-location: #2a7f3f;39  --ev-developer: #1f4fd8;40  --ev-legal: #5b6478;41  --ev-communication: #4b4fc9;42  --ev-financing: #9a6d00;43  --ev-ma: #9a6d00;44  --ev-partnership: #0f7ca3;45  --ev-strategy: #7a3fa8;46  --ev-technology: #0c6fb0;47  --ev-marketing: #b8407e;48  --ev-security: #c0333d;49  --ev-operations: #6b5e4a;50  --ev-sustainability: #4f7f13;51  --ev-investor_relations: #8a5a1c;52  --ev-other: #7b8294;5354  /* sensor tiers A–E (fresh → slow) and confidence */55  --tier-a: #16a34a;56  --tier-b: #1f4fd8;57  --tier-c: #0d7c86;58  --tier-d: #b26a05;59  --tier-e: #7b8294;6061  --series-1: #1f4fd8;62  --series-2: #c2560f;63  --series-3: #16a34a;64  --series-4: #6d3fc7;65  --series-5: #0d7c86;66  --series-6: #c2366f;6768  /* map */69  --map-land: #e6e7e1;70  --map-stroke: #ffffff;71  --map-bubble: rgba(31, 79, 216, 0.55);72  --map-bubble-stroke: #1f4fd8;7374  /* brand plate (LogoMark) inverted per theme */75  --brand-plate: #0f1419;76  --brand-ink: #f7f7f4;77  --brand-grid: rgba(247, 247, 244, 0.3);78  --brand-accent: #3fd07a;7980  --radius: 4px;81  --radius-lg: 8px;82  --header-h: 56px;83  --tabbar-h: 58px;8485  /* density (html[data-density="compact"]) */86  --d-base: 15px;87  --d-cell-y: 0.55rem;88  --d-cell-x: 0.75rem;89  --d-kv-y: 0.5rem;90  --d-row-y: 0.625rem;91  --d-section-y: 1.75rem;92  --d-section-y-md: 2.5rem;93  --d-table-fs: 0.875rem;94}95[data-density='compact'] {96  --d-base: 14px;97  --d-cell-y: 0.36rem;98  --d-cell-x: 0.6rem;99  --d-kv-y: 0.3rem;100  --d-row-y: 0.42rem;101  --d-section-y: 1.2rem;102  --d-section-y-md: 1.7rem;103  --d-table-fs: 0.8125rem;104}105106[data-theme='dark'] {107  color-scheme: dark;108  --canvas: #0a0d12;109  --surface: #11151c;110  --surface-2: #171c25;111  --surface-3: #202632;112  --ink: #e8ebf1;113  --ink-2: #a3a9b8;114  --ink-3: #6f7688;115  --rule: rgba(190, 200, 225, 0.11);116  --rule-strong: rgba(190, 200, 225, 0.26);117  --accent: #6d95ff;118  --accent-ink: #061024;119  --accent-soft: rgba(109, 149, 255, 0.14);120  --positive: #3fd07a;121  --positive-soft: rgba(63, 208, 122, 0.14);122  --warning: #f2b04a;123  --warning-soft: rgba(242, 176, 74, 0.14);124  --danger: #ff6b74;125  --danger-soft: rgba(255, 107, 116, 0.14);126  --live: #3fd07a;127128  --ev-product: #b08cff;129  --ev-pricing: #f2b04a;130  --ev-hiring: #3fc3cf;131  --ev-leadership: #ff7ab6;132  --ev-location: #5ed37f;133  --ev-developer: #6d95ff;134  --ev-legal: #9aa3b8;135  --ev-communication: #9a9dff;136  --ev-financing: #e2c04a;137  --ev-ma: #e2c04a;138  --ev-partnership: #4fb8e8;139  --ev-strategy: #c49bff;140  --ev-technology: #57b7f0;141  --ev-marketing: #ff8ccf;142  --ev-security: #ff6b74;143  --ev-operations: #c2ad8a;144  --ev-sustainability: #a3d95b;145  --ev-investor_relations: #d9a25f;146  --ev-other: #8b92a5;147148  --tier-a: #3fd07a;149  --tier-b: #6d95ff;150  --tier-c: #3fc3cf;151  --tier-d: #f2b04a;152  --tier-e: #8b92a5;153154  --series-1: #6d95ff;155  --series-2: #ff9a4d;156  --series-3: #3fd07a;157  --series-4: #b08cff;158  --series-5: #3fc3cf;159  --series-6: #ff7ab6;160161  --map-land: #1c222d;162  --map-stroke: #0a0d12;163  --map-bubble: rgba(109, 149, 255, 0.5);164  --map-bubble-stroke: #8fadff;165166  --brand-plate: #e8ebf1;167  --brand-ink: #0a0d12;168  --brand-grid: rgba(10, 13, 18, 0.26);169  --brand-accent: #16a34a;170}171172@theme inline {173  --color-canvas: var(--canvas);174  --color-surface: var(--surface);175  --color-surface-2: var(--surface-2);176  --color-surface-3: var(--surface-3);177  --color-ink: var(--ink);178  --color-ink-2: var(--ink-2);179  --color-ink-3: var(--ink-3);180  --color-rule: var(--rule);181  --color-rule-strong: var(--rule-strong);182  --color-accent: var(--accent);183  --color-accent-ink: var(--accent-ink);184  --color-accent-soft: var(--accent-soft);185  --color-positive: var(--positive);186  --color-positive-soft: var(--positive-soft);187  --color-warning: var(--warning);188  --color-warning-soft: var(--warning-soft);189  --color-danger: var(--danger);190  --color-danger-soft: var(--danger-soft);191  --color-live: var(--live);192193  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;194  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;195196  --radius-sm: var(--radius);197  --radius-md: var(--radius);198  --radius-lg: var(--radius-lg);199  --radius-xl: 12px;200201  --text-2xs: 0.6875rem;202  --text-2xs--line-height: 1rem;203}204205@layer base {206  html {207    background: var(--canvas);208    color: var(--ink);209    -webkit-text-size-adjust: 100%;210    text-rendering: optimizeLegibility;211    font-feature-settings: 'cv11', 'ss01';212    scroll-padding-top: calc(var(--header-h) + 12px);213  }214  body {215    font-family: var(--font-sans);216    font-size: var(--d-base, 15px);217    line-height: 1.5;218    background: var(--canvas);219    color: var(--ink);220  }221  ::selection {222    background: var(--accent-soft);223  }224  :focus-visible {225    outline: 2px solid var(--accent);226    outline-offset: 2px;227  }228  h1,229  h2,230  h3,231  h4 {232    letter-spacing: -0.01em;233    text-wrap: balance;234  }235  code,236  kbd,237  pre,238  samp {239    font-family: var(--font-mono);240  }241  table {242    font-variant-numeric: tabular-nums;243  }244  a {245    text-underline-offset: 3px;246  }247  button {248    cursor: pointer;249  }250  input,251  select,252  textarea {253    font: inherit;254    color: inherit;255  }256  input::placeholder {257    color: var(--ink-3);258  }259  input[type='search']::-webkit-search-decoration,260  input[type='search']::-webkit-search-cancel-button {261    -webkit-appearance: none;262  }263  select {264    background: var(--surface);265  }266}267268/* ---------------------------------------------------------------------------------------------------------- utilities */269.container-x {270  padding-left: max(1rem, env(safe-area-inset-left));271  padding-right: max(1rem, env(safe-area-inset-right));272}273@media (min-width: 768px) {274  .container-x {275    padding-left: 2rem;276    padding-right: 2rem;277  }278}279.eyebrow {280  font-size: 0.6875rem;281  line-height: 1rem;282  letter-spacing: 0.1em;283  text-transform: uppercase;284  font-weight: 600;285  color: var(--ink-3);286}287.display {288  font-weight: 600;289  letter-spacing: -0.03em;290  line-height: 1.02;291  text-wrap: balance;292}293.mono {294  font-family: var(--font-mono);295  font-feature-settings: 'tnum', 'zero';296}297.tnum {298  font-variant-numeric: tabular-nums;299  font-feature-settings: 'tnum';300}301.hairline {302  border-top: 1px solid var(--rule);303}304.link {305  color: var(--accent);306  text-decoration: none;307}308.link:hover {309  text-decoration: underline;310}311.panel {312  background: var(--surface);313  border: 1px solid var(--rule);314  border-radius: var(--radius-lg);315}316.grid-bg {317  background-image: linear-gradient(to right, var(--rule) 1px, transparent 1px), linear-gradient(to bottom, var(--rule) 1px, transparent 1px);318  background-size: 48px 48px;319  mask-image: radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.9), transparent 75%);320}321.scrollbar-thin {322  scrollbar-width: thin;323  scrollbar-color: var(--rule-strong) transparent;324}325.scrollbar-thin::-webkit-scrollbar {326  height: 6px;327  width: 6px;328}329.scrollbar-thin::-webkit-scrollbar-thumb {330  background: var(--rule-strong);331  border-radius: 3px;332}333.no-scrollbar {334  scrollbar-width: none;335}336.no-scrollbar::-webkit-scrollbar {337  display: none;338}339.safe-bottom {340  padding-bottom: env(safe-area-inset-bottom, 0px);341}342.prose-atlas p + p {343  margin-top: 0.75rem;344}345.prose-atlas a {346  color: var(--accent);347}348.prose-atlas a:hover {349  text-decoration: underline;350}351.prose-atlas h2 {352  margin-top: 2rem;353  font-size: 1.125rem;354  font-weight: 600;355}356.prose-atlas h3 {357  margin-top: 1.25rem;358  font-size: 1rem;359  font-weight: 600;360}361.prose-atlas ul {362  margin-top: 0.5rem;363  padding-left: 1.1rem;364  list-style: disc;365}366.prose-atlas li + li {367  margin-top: 0.25rem;368}369.prose-atlas code {370  font-size: 0.85em;371  background: var(--surface-2);372  padding: 0.05rem 0.3rem;373  border-radius: 3px;374}375.prose-atlas pre {376  margin-top: 0.75rem;377  padding: 0.75rem 0.9rem;378  background: var(--surface-2);379  border: 1px solid var(--rule);380  border-radius: var(--radius);381  font-size: 0.8125rem;382  overflow-x: auto;383}384.prose-atlas pre code {385  background: none;386  padding: 0;387}388.btn {389  display: inline-flex;390  align-items: center;391  justify-content: center;392  gap: 0.4rem;393  min-height: 2.5rem;394  padding: 0 0.85rem;395  border: 1px solid var(--rule-strong);396  border-radius: var(--radius);397  font-size: 0.875rem;398  color: var(--ink-2);399  background: var(--surface);400  white-space: nowrap;401}402.btn:hover {403  color: var(--ink);404  border-color: var(--ink-3);405}406.btn-primary {407  background: var(--ink);408  color: var(--canvas);409  border-color: var(--ink);410}411.btn-primary:hover {412  color: var(--canvas);413  opacity: 0.92;414}415.btn-accent {416  background: var(--accent);417  color: var(--accent-ink);418  border-color: var(--accent);419}420.btn-accent:hover {421  color: var(--accent-ink);422  opacity: 0.92;423}424.btn-sm {425  min-height: 2rem;426  padding: 0 0.6rem;427  font-size: 0.8125rem;428}429.field {430  height: 2.5rem;431  min-width: 0;432  padding: 0 0.65rem;433  border: 1px solid var(--rule-strong);434  border-radius: var(--radius);435  background: var(--surface);436  font-size: 0.875rem;437  color: var(--ink);438}439.field:focus {440  outline: none;441  border-color: var(--accent);442}443.chip-btn {444  display: inline-flex;445  align-items: center;446  gap: 0.3rem;447  min-height: 2rem;448  padding: 0 0.6rem;449  border: 1px solid var(--rule);450  border-radius: 999px;451  background: var(--surface);452  font-size: 0.75rem;453  color: var(--ink-2);454  white-space: nowrap;455}456.chip-btn:hover {457  border-color: var(--rule-strong);458  color: var(--ink);459}460.chip-btn[aria-pressed='true'],461.chip-btn[data-on='true'] {462  background: var(--ink);463  border-color: var(--ink);464  color: var(--canvas);465}466467/* Live indicator */468.dot {469  display: inline-block;470  width: 7px;471  height: 7px;472  border-radius: 999px;473  background: var(--live);474  vertical-align: middle;475}476.pulse {477  position: relative;478}479.pulse::after {480  content: '';481  position: absolute;482  inset: -3px;483  border-radius: 999px;484  border: 1px solid var(--live);485  animation: pulse-ring 1.8s ease-out infinite;486}487@keyframes pulse-ring {488  0% {489    transform: scale(0.6);490    opacity: 0.9;491  }492  100% {493    transform: scale(1.8);494    opacity: 0;495  }496}497/* New live event: soft highlight that fades */498.feed-new {499  animation: feed-in 1.6s ease-out;500}501@keyframes feed-in {502  0% {503    background: var(--positive-soft);504    transform: translateY(-4px);505    opacity: 0.4;506  }507  30% {508    opacity: 1;509    transform: translateY(0);510  }511  100% {512    background: transparent;513  }514}515.counter-tick {516  animation: counter-tick 500ms ease-out;517}518@keyframes counter-tick {519  0% {520    color: var(--positive);521  }522  100% {523    color: inherit;524  }525}526527/* Grid/flex children default to min-width:auto, which lets a horizontally scrolling table widen the page on mobile. */528[class*='grid-cols'] > *,529.min-w-0 {530  min-width: 0;531}532@media (max-width: 767px) {533  .btn-sm {534    min-height: 2.5rem;535  }536  .chip-btn {537    min-height: 2.25rem;538  }539}540541/* ---------------------------------------------------------------------------------------------------------- data tables */542.data-table {543  width: 100%;544  border-collapse: collapse;545  font-variant-numeric: tabular-nums;546  font-size: var(--d-table-fs, 0.875rem);547}548.data-table th {549  text-align: left;550  font-weight: 600;551  font-size: 0.6875rem;552  letter-spacing: 0.08em;553  text-transform: uppercase;554  color: var(--ink-3);555  padding: calc(var(--d-cell-y) * 0.9) var(--d-cell-x);556  border-bottom: 1px solid var(--rule-strong);557  white-space: nowrap;558  vertical-align: bottom;559}560.data-table th:first-child,561.data-table td:first-child {562  padding-left: 0;563}564.data-table th:last-child,565.data-table td:last-child {566  padding-right: 0;567}568.data-table td {569  padding: var(--d-cell-y) var(--d-cell-x);570  border-bottom: 1px solid var(--rule);571  vertical-align: middle;572}573.data-table tbody tr:hover {574  background: var(--surface-2);575}576.data-table .num {577  text-align: right;578  font-variant-numeric: tabular-nums;579}580.data-table th.num {581  text-align: right;582}583.data-table .primary {584  font-weight: 500;585  color: var(--ink);586}587.data-table a.row-link {588  color: inherit;589  text-decoration: none;590}591.data-table a.row-link:hover {592  color: var(--accent);593}594.table-scroll {595  position: relative;596  overflow-x: auto;597  -webkit-overflow-scrolling: touch;598  scrollbar-width: thin;599  max-width: 100%;600}601.table-scroll .data-table th,602.table-scroll .data-table td {603  white-space: nowrap;604}605.table-scroll .data-table td.wrap {606  white-space: normal;607  min-width: 14rem;608}609.table-scroll .data-table th:first-child,610.table-scroll .data-table td:first-child {611  padding-left: 0.25rem;612}613.table-scroll .data-table th:last-child,614.table-scroll .data-table td:last-child {615  padding-right: 0.25rem;616}617618/* ---------------------------------------------------------------------------------------------------------- key–value */619.kv {620  display: grid;621  grid-template-columns: minmax(0, 1fr);622  font-size: 0.875rem;623}624.kv > div {625  display: grid;626  grid-template-columns: 9.5rem minmax(0, 1fr);627  gap: 0.25rem 1rem;628  padding: var(--d-kv-y) 0;629  border-bottom: 1px solid var(--rule);630  align-items: baseline;631}632.kv > div > dt {633  color: var(--ink-3);634  font-size: 0.8125rem;635}636.kv > div > dd {637  min-width: 0;638  overflow-wrap: anywhere;639}640@media (max-width: 480px) {641  .kv > div {642    grid-template-columns: 7rem minmax(0, 1fr);643  }644}645646.section-y {647  padding-top: var(--d-section-y);648  padding-bottom: var(--d-section-y);649}650@media (min-width: 768px) {651  .section-y {652    padding-top: var(--d-section-y-md);653    padding-bottom: var(--d-section-y-md);654  }655}656.row-y {657  padding-top: var(--d-row-y);658  padding-bottom: var(--d-row-y);659}660661/* ---------------------------------------------------------------------------------------------------------- diff viewer */662.diff-block {663  border-left: 3px solid var(--rule-strong);664  padding: 0.5rem 0.75rem;665  font-size: 0.8125rem;666  line-height: 1.45;667  overflow-wrap: anywhere;668}669.diff-block.added {670  border-color: var(--positive);671  background: var(--positive-soft);672}673.diff-block.removed {674  border-color: var(--danger);675  background: var(--danger-soft);676}677.diff-block.modified {678  border-color: var(--warning);679}680.diff-before {681  color: var(--ink-3);682  text-decoration: line-through;683  text-decoration-color: var(--danger);684}685.diff-after {686  color: var(--ink);687}688689/* meter */690.meter {691  position: relative;692  height: 4px;693  background: var(--surface-3);694  border-radius: 2px;695  overflow: hidden;696}697.meter > span {698  position: absolute;699  inset: 0 auto 0 0;700  background: var(--accent);701  border-radius: 2px;702}703704.sheet-enter {705  animation: sheet-in 160ms ease-out;706}707@keyframes sheet-in {708  from {709    opacity: 0;710    transform: translateY(8px);711  }712  to {713    opacity: 1;714    transform: translateY(0);715  }716}717.skeleton {718  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);719  background-size: 200% 100%;720  animation: shimmer 1.4s linear infinite;721  border-radius: var(--radius);722}723@keyframes shimmer {724  from {725    background-position: 200% 0;726  }727  to {728    background-position: -200% 0;729  }730}731732@media (prefers-reduced-motion: reduce) {733  *,734  *::before,735  *::after {736    animation-duration: 0.01ms !important;737    transition-duration: 0.01ms !important;738  }739}740