@import 'tailwindcss'; /* ===================================================================================================================== Company Atlas — design tokens A premium intelligence terminal blended with a modern data atlas: dense but readable, hairlines over cards, tabular numbers, one accent (atlas blue), semantic greens/ambers/reds, and a fixed hue per event type so the live feed reads at a glance. Two themes on (default follows the system; prepaint script avoids flashes). ===================================================================================================================== */ :root, [data-theme='light'] { color-scheme: light; --canvas: #f7f7f4; --surface: #ffffff; --surface-2: #efefeb; --surface-3: #e4e5df; --ink: #0f1419; --ink-2: #4a5160; --ink-3: #7b8294; --rule: rgba(15, 20, 25, 0.1); --rule-strong: rgba(15, 20, 25, 0.22); --accent: #1f4fd8; --accent-ink: #ffffff; --accent-soft: rgba(31, 79, 216, 0.1); --positive: #16a34a; --positive-soft: rgba(22, 163, 74, 0.12); --warning: #b26a05; --warning-soft: rgba(217, 134, 12, 0.14); --danger: #c0333d; --danger-soft: rgba(192, 51, 61, 0.12); --live: #16a34a; /* event-type hues (spec §21) */ --ev-product: #6d3fc7; --ev-pricing: #b26a05; --ev-hiring: #0d7c86; --ev-leadership: #c2366f; --ev-location: #2a7f3f; --ev-developer: #1f4fd8; --ev-legal: #5b6478; --ev-communication: #4b4fc9; --ev-financing: #9a6d00; --ev-ma: #9a6d00; --ev-partnership: #0f7ca3; --ev-strategy: #7a3fa8; --ev-technology: #0c6fb0; --ev-marketing: #b8407e; --ev-security: #c0333d; --ev-operations: #6b5e4a; --ev-sustainability: #4f7f13; --ev-investor_relations: #8a5a1c; --ev-other: #7b8294; /* sensor tiers A–E (fresh → slow) and confidence */ --tier-a: #16a34a; --tier-b: #1f4fd8; --tier-c: #0d7c86; --tier-d: #b26a05; --tier-e: #7b8294; --series-1: #1f4fd8; --series-2: #c2560f; --series-3: #16a34a; --series-4: #6d3fc7; --series-5: #0d7c86; --series-6: #c2366f; /* map */ --map-land: #e6e7e1; --map-stroke: #ffffff; --map-bubble: rgba(31, 79, 216, 0.55); --map-bubble-stroke: #1f4fd8; /* brand plate (LogoMark) inverted per theme */ --brand-plate: #0f1419; --brand-ink: #f7f7f4; --brand-grid: rgba(247, 247, 244, 0.3); --brand-accent: #3fd07a; --radius: 4px; --radius-lg: 8px; --header-h: 56px; --tabbar-h: 58px; /* density (html[data-density="compact"]) */ --d-base: 15px; --d-cell-y: 0.55rem; --d-cell-x: 0.75rem; --d-kv-y: 0.5rem; --d-row-y: 0.625rem; --d-section-y: 1.75rem; --d-section-y-md: 2.5rem; --d-table-fs: 0.875rem; } [data-density='compact'] { --d-base: 14px; --d-cell-y: 0.36rem; --d-cell-x: 0.6rem; --d-kv-y: 0.3rem; --d-row-y: 0.42rem; --d-section-y: 1.2rem; --d-section-y-md: 1.7rem; --d-table-fs: 0.8125rem; } [data-theme='dark'] { color-scheme: dark; --canvas: #0a0d12; --surface: #11151c; --surface-2: #171c25; --surface-3: #202632; --ink: #e8ebf1; --ink-2: #a3a9b8; --ink-3: #6f7688; --rule: rgba(190, 200, 225, 0.11); --rule-strong: rgba(190, 200, 225, 0.26); --accent: #6d95ff; --accent-ink: #061024; --accent-soft: rgba(109, 149, 255, 0.14); --positive: #3fd07a; --positive-soft: rgba(63, 208, 122, 0.14); --warning: #f2b04a; --warning-soft: rgba(242, 176, 74, 0.14); --danger: #ff6b74; --danger-soft: rgba(255, 107, 116, 0.14); --live: #3fd07a; --ev-product: #b08cff; --ev-pricing: #f2b04a; --ev-hiring: #3fc3cf; --ev-leadership: #ff7ab6; --ev-location: #5ed37f; --ev-developer: #6d95ff; --ev-legal: #9aa3b8; --ev-communication: #9a9dff; --ev-financing: #e2c04a; --ev-ma: #e2c04a; --ev-partnership: #4fb8e8; --ev-strategy: #c49bff; --ev-technology: #57b7f0; --ev-marketing: #ff8ccf; --ev-security: #ff6b74; --ev-operations: #c2ad8a; --ev-sustainability: #a3d95b; --ev-investor_relations: #d9a25f; --ev-other: #8b92a5; --tier-a: #3fd07a; --tier-b: #6d95ff; --tier-c: #3fc3cf; --tier-d: #f2b04a; --tier-e: #8b92a5; --series-1: #6d95ff; --series-2: #ff9a4d; --series-3: #3fd07a; --series-4: #b08cff; --series-5: #3fc3cf; --series-6: #ff7ab6; --map-land: #1c222d; --map-stroke: #0a0d12; --map-bubble: rgba(109, 149, 255, 0.5); --map-bubble-stroke: #8fadff; --brand-plate: #e8ebf1; --brand-ink: #0a0d12; --brand-grid: rgba(10, 13, 18, 0.26); --brand-accent: #16a34a; } @theme inline { --color-canvas: var(--canvas); --color-surface: var(--surface); --color-surface-2: var(--surface-2); --color-surface-3: var(--surface-3); --color-ink: var(--ink); --color-ink-2: var(--ink-2); --color-ink-3: var(--ink-3); --color-rule: var(--rule); --color-rule-strong: var(--rule-strong); --color-accent: var(--accent); --color-accent-ink: var(--accent-ink); --color-accent-soft: var(--accent-soft); --color-positive: var(--positive); --color-positive-soft: var(--positive-soft); --color-warning: var(--warning); --color-warning-soft: var(--warning-soft); --color-danger: var(--danger); --color-danger-soft: var(--danger-soft); --color-live: var(--live); --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace; --radius-sm: var(--radius); --radius-md: var(--radius); --radius-lg: var(--radius-lg); --radius-xl: 12px; --text-2xs: 0.6875rem; --text-2xs--line-height: 1rem; } @layer base { html { background: var(--canvas); color: var(--ink); -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01'; scroll-padding-top: calc(var(--header-h) + 12px); } body { font-family: var(--font-sans); font-size: var(--d-base, 15px); line-height: 1.5; background: var(--canvas); color: var(--ink); } ::selection { background: var(--accent-soft); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } h1, h2, h3, h4 { letter-spacing: -0.01em; text-wrap: balance; } code, kbd, pre, samp { font-family: var(--font-mono); } table { font-variant-numeric: tabular-nums; } a { text-underline-offset: 3px; } button { cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } input::placeholder { color: var(--ink-3); } input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; } select { background: var(--surface); } } /* ---------------------------------------------------------------------------------------------------------- utilities */ .container-x { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } @media (min-width: 768px) { .container-x { padding-left: 2rem; padding-right: 2rem; } } .eyebrow { font-size: 0.6875rem; line-height: 1rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); } .display { font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; } .mono { font-family: var(--font-mono); font-feature-settings: 'tnum', 'zero'; } .tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } .hairline { border-top: 1px solid var(--rule); } .link { color: var(--accent); text-decoration: none; } .link:hover { text-decoration: underline; } .panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); } .grid-bg { background-image: linear-gradient(to right, var(--rule) 1px, transparent 1px), linear-gradient(to bottom, var(--rule) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.9), transparent 75%); } .scrollbar-thin { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; } .scrollbar-thin::-webkit-scrollbar { height: 6px; width: 6px; } .scrollbar-thin::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 3px; } .no-scrollbar { scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; } .safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); } .prose-atlas p + p { margin-top: 0.75rem; } .prose-atlas a { color: var(--accent); } .prose-atlas a:hover { text-decoration: underline; } .prose-atlas h2 { margin-top: 2rem; font-size: 1.125rem; font-weight: 600; } .prose-atlas h3 { margin-top: 1.25rem; font-size: 1rem; font-weight: 600; } .prose-atlas ul { margin-top: 0.5rem; padding-left: 1.1rem; list-style: disc; } .prose-atlas li + li { margin-top: 0.25rem; } .prose-atlas code { font-size: 0.85em; background: var(--surface-2); padding: 0.05rem 0.3rem; border-radius: 3px; } .prose-atlas pre { margin-top: 0.75rem; padding: 0.75rem 0.9rem; background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius); font-size: 0.8125rem; overflow-x: auto; } .prose-atlas pre code { background: none; padding: 0; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.5rem; padding: 0 0.85rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); font-size: 0.875rem; color: var(--ink-2); background: var(--surface); white-space: nowrap; } .btn:hover { color: var(--ink); border-color: var(--ink-3); } .btn-primary { background: var(--ink); color: var(--canvas); border-color: var(--ink); } .btn-primary:hover { color: var(--canvas); opacity: 0.92; } .btn-accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .btn-accent:hover { color: var(--accent-ink); opacity: 0.92; } .btn-sm { min-height: 2rem; padding: 0 0.6rem; font-size: 0.8125rem; } .field { height: 2.5rem; min-width: 0; padding: 0 0.65rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); font-size: 0.875rem; color: var(--ink); } .field:focus { outline: none; border-color: var(--accent); } .chip-btn { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2rem; padding: 0 0.6rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); font-size: 0.75rem; color: var(--ink-2); white-space: nowrap; } .chip-btn:hover { border-color: var(--rule-strong); color: var(--ink); } .chip-btn[aria-pressed='true'], .chip-btn[data-on='true'] { background: var(--ink); border-color: var(--ink); color: var(--canvas); } /* Live indicator */ .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--live); vertical-align: middle; } .pulse { position: relative; } .pulse::after { content: ''; position: absolute; inset: -3px; border-radius: 999px; border: 1px solid var(--live); animation: pulse-ring 1.8s ease-out infinite; } @keyframes pulse-ring { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } } /* New live event: soft highlight that fades */ .feed-new { animation: feed-in 1.6s ease-out; } @keyframes feed-in { 0% { background: var(--positive-soft); transform: translateY(-4px); opacity: 0.4; } 30% { opacity: 1; transform: translateY(0); } 100% { background: transparent; } } .counter-tick { animation: counter-tick 500ms ease-out; } @keyframes counter-tick { 0% { color: var(--positive); } 100% { color: inherit; } } /* Grid/flex children default to min-width:auto, which lets a horizontally scrolling table widen the page on mobile. */ [class*='grid-cols'] > *, .min-w-0 { min-width: 0; } @media (max-width: 767px) { .btn-sm { min-height: 2.5rem; } .chip-btn { min-height: 2.25rem; } } /* ---------------------------------------------------------------------------------------------------------- data tables */ .data-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--d-table-fs, 0.875rem); } .data-table th { text-align: left; font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding: calc(var(--d-cell-y) * 0.9) var(--d-cell-x); border-bottom: 1px solid var(--rule-strong); white-space: nowrap; vertical-align: bottom; } .data-table th:first-child, .data-table td:first-child { padding-left: 0; } .data-table th:last-child, .data-table td:last-child { padding-right: 0; } .data-table td { padding: var(--d-cell-y) var(--d-cell-x); border-bottom: 1px solid var(--rule); vertical-align: middle; } .data-table tbody tr:hover { background: var(--surface-2); } .data-table .num { text-align: right; font-variant-numeric: tabular-nums; } .data-table th.num { text-align: right; } .data-table .primary { font-weight: 500; color: var(--ink); } .data-table a.row-link { color: inherit; text-decoration: none; } .data-table a.row-link:hover { color: var(--accent); } .table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; max-width: 100%; } .table-scroll .data-table th, .table-scroll .data-table td { white-space: nowrap; } .table-scroll .data-table td.wrap { white-space: normal; min-width: 14rem; } .table-scroll .data-table th:first-child, .table-scroll .data-table td:first-child { padding-left: 0.25rem; } .table-scroll .data-table th:last-child, .table-scroll .data-table td:last-child { padding-right: 0.25rem; } /* ---------------------------------------------------------------------------------------------------------- key–value */ .kv { display: grid; grid-template-columns: minmax(0, 1fr); font-size: 0.875rem; } .kv > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.25rem 1rem; padding: var(--d-kv-y) 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .kv > div > dt { color: var(--ink-3); font-size: 0.8125rem; } .kv > div > dd { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 480px) { .kv > div { grid-template-columns: 7rem minmax(0, 1fr); } } .section-y { padding-top: var(--d-section-y); padding-bottom: var(--d-section-y); } @media (min-width: 768px) { .section-y { padding-top: var(--d-section-y-md); padding-bottom: var(--d-section-y-md); } } .row-y { padding-top: var(--d-row-y); padding-bottom: var(--d-row-y); } /* ---------------------------------------------------------------------------------------------------------- diff viewer */ .diff-block { border-left: 3px solid var(--rule-strong); padding: 0.5rem 0.75rem; font-size: 0.8125rem; line-height: 1.45; overflow-wrap: anywhere; } .diff-block.added { border-color: var(--positive); background: var(--positive-soft); } .diff-block.removed { border-color: var(--danger); background: var(--danger-soft); } .diff-block.modified { border-color: var(--warning); } .diff-before { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--danger); } .diff-after { color: var(--ink); } /* meter */ .meter { position: relative; height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; } .meter > span { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 2px; } .sheet-enter { animation: sheet-in 160ms ease-out; } @keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--radius); } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }