:root {
--yellow: #F5D921;
--yellow-dim: #D4BA0E;
--yellow-glow: rgba(245, 217, 33, 0.10);
--yellow-subtle: rgba(245, 217, 33, 0.05);
--bg: #111318;
--bg-raised: #161920;
--bg-card: #1a1e27;
--bg-hover: #1e222d;
--border: #252a36;
--border-light: #2d3344;
--text: #e6e8ed;
--text-dim: #8b92a5;
--text-muted: #5a6178;
--green: #22c55e;
--red: #ef4444;
--blue: #3b82f6;
--purple: #a78bfa;
--soviet-red: #CC2936;
--font: 'Roboto Mono', monospace;
--fs-page-title: 2.75rem;
--fs-section: 1.75rem;
--fs-sub: 1.1rem;
--fs-body: 0.82rem;
--fs-table: 0.76rem;
--fs-label: 0.6rem;
--fs-micro: 0.52rem;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
position: relative;
animation: pageIn 0.3s ease-out;
}
@keyframes pageIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ===== BACKGROUND IMAGE ===== */
.bg-layer {
position: fixed;
inset: 0;
z-index: 0;
background-image: url('cosmonaut-bg.png');
background-size: cover;
background-position: center;
opacity: 0.12;
filter: grayscale(20%);
pointer-events: none;
}
/* ===== CRT VIGNETTE ===== */
/* NOTE: the companion CRT scan-line overlay (body::after) was removed
per designer feedback — the repeating-linear-gradient landed visibly
on top of solid-fill buttons and sector tags as a stripe texture,
especially on the yellow "Request Early Access" CTA and sector pills
(SEMI / ROBO / SPACE / MATERIALS). Keeping the vignette for
atmosphere; the scan lines are gone site-wide. */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.35) 100%);
}
/* ===== SIDEBAR ===== */
.sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 220px;
background: #0D1117;
border-right: 1px solid #1E2330;
z-index: 200;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-y: auto;
}
.sidebar-top { padding: 1.25rem 0 1rem; }
.sidebar-logo {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
text-decoration: none;
padding: 0 1rem 1.25rem;
border-bottom: 1px solid #1E2330;
margin-bottom: 0.75rem;
}
.sidebar-logo-img {
/* Enlarged ~37% (32px → 44px) per UX polish pass. Source asset is
376x398 so this is still well below native resolution — no
pixelation. A simplified mascot is planned for Q2; at that point
we can revisit dimensions and drop the RGBA PNG for an SVG. */
width: 44px; height: 44px;
border-radius: 8px;
object-fit: cover;
}
.sidebar-logo-text {
/* Wordmark scaled up to match the larger mascot (11px → 15px, +36%).
Typography/weight/letterspacing preserved — only size changes. */
font-size: 15px;
font-weight: 700;
color: var(--yellow);
letter-spacing: 0.12em;
font-family: var(--font);
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 0.5rem;
}
.nav-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.75rem;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--text-dim);
text-decoration: none;
transition: all 0.15s;
border-left: 3px solid transparent;
position: relative;
}
.nav-item:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.nav-item.active {
border-left-color: var(--yellow);
background: rgba(245, 217, 33, 0.06);
color: #fff;
font-weight: 600;
}
.nav-item.disabled {
color: #5A6178;
cursor: pointer;
}
.nav-item.disabled:hover { background: rgba(255,255,255,0.02); color: #8B92A5; }
.nav-icon {
display: flex;
align-items: center;
flex-shrink: 0;
width: 18px;
height: 18px;
}
.nav-label { white-space: nowrap; }
.status-dot {
width: 6px; height: 6px;
border-radius: 50%;
margin-left: auto;
flex-shrink: 0;
}
.status-dot.online { background: var(--green); }
.status-dot.offline { background: #3a3f4b; }
.sidebar-bottom {
padding: 1rem;
border-top: 1px solid #1E2330;
font-size: 10px;
color: var(--text-muted);
line-height: 1.6;
}
.sidebar-bottom a { color: var(--text-muted); }
.sidebar-tagline {
font-size: 10px;
line-height: 1.5;
margin-bottom: 1rem;
letter-spacing: 0.04em;
}
.sidebar-version { margin-bottom: 0.25rem; }
/* ===== TOP BAR ===== */
.top-bar {
position: fixed;
top: 0;
left: 220px;
right: 0;
height: 48px;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.5rem;
background: rgba(17, 19, 24, 0.92);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
}
.top-bar-left { flex: 1; max-width: 400px; }
.top-search {
width: 100%;
padding: 0.4rem 0.75rem;
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 5px;
color: var(--text);
font-family: var(--font);
font-size: 12px;
outline: none;
transition: border-color 0.2s;
}
.top-search::placeholder { color: var(--text-muted); }
/* Focus changes ONLY the border colour. No transform, no padding/margin/
height/font-size change — the input must stay anchored exactly in place
when the user clicks it. outline:none is set on the base rule above;
reset explicitly here too as defence-in-depth against inherited UA
focus rings. */
.top-search:focus {
outline: none;
box-shadow: none;
transform: none;
border-color: var(--yellow);
}
/* ===== SEARCH DROPDOWN =====
Top-bar search results. Scoped under .search-dropdown__ so nothing
inherits from the page's h1/h2/link/list styles — every rule sets
its own font, colour, size explicitly. See js/nav.js for the markup
that produces this tree.
Specificity note: the global `a:not(...)` rule in typography.css
colours anchors yellow by default. .search-dropdown__row is excluded
there AND every colour here is set explicitly, so row text reads
white regardless of which wins. */
.search-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
width: 100%;
/* 220px sidebar + 20px breathing room — dropdown never bleeds past
the content area on desktop. */
max-width: calc(100vw - 240px);
max-height: 60vh;
overflow-y: auto;
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
z-index: 1000;
/* Reset every inherited text property explicitly so nothing leaks. */
font-family: var(--font);
font-size: 13px;
font-weight: 400;
color: var(--text);
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
}
.search-dropdown__empty,
.search-dropdown__no-results {
padding: 10px 14px;
font-family: var(--font);
font-size: 11px;
font-weight: 400;
color: var(--text-muted);
line-height: 1.5;
letter-spacing: 0;
text-transform: none;
}
.search-dropdown__try-label {
color: #3E4456; /* dimmer than --text-muted (#5a6178) */
margin-right: 6px;
}
.search-dropdown__try-example {
color: var(--text-muted);
text-decoration: none;
margin-right: 4px;
cursor: pointer;
font-family: var(--font);
font-size: 11px;
}
.search-dropdown__try-example:hover {
color: var(--text);
text-decoration: underline;
}
.search-dropdown__try-example:not(:last-child)::after {
content: ',';
color: #3E4456;
text-decoration: none;
display: inline-block;
margin-left: -2px;
}
.search-dropdown__category {
display: flex;
align-items: baseline;
gap: 6px;
padding: 10px 14px 6px;
font-family: var(--font);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
background: transparent;
}
.search-dropdown__category:not(:first-child) {
margin-top: 2px;
border-top: 1px solid var(--border);
}
.search-dropdown__category-count {
color: #3E4456;
font-weight: 400;
letter-spacing: 0.05em;
}
.search-dropdown__row {
display: block;
padding: 10px 14px;
text-decoration: none;
border-left: 2px solid transparent;
transition: background 0.1s, border-color 0.1s;
/* Explicit colour + font — belt and suspenders against the global
a:not(...) yellow-link rule in typography.css. */
color: var(--text);
font-family: var(--font);
font-weight: 400;
}
.search-dropdown__row:hover,
.search-dropdown__row.search-dropdown__row--active {
background: var(--bg-hover);
border-left-color: var(--yellow);
text-decoration: none;
}
.search-dropdown__row:hover .search-dropdown__row-primary,
.search-dropdown__row.search-dropdown__row--active .search-dropdown__row-primary {
color: var(--text);
}
.search-dropdown__row-primary {
font-family: 'Mulish', 'Roboto Mono', sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--text);
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.search-dropdown__row-secondary {
font-family: var(--font);
font-size: 11px;
font-weight: 400;
color: var(--text-muted);
margin-top: 2px;
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Mobile: full-width minus side gutter (sidebar collapses to 60px). */
@media (max-width: 768px) {
.search-dropdown {
max-width: calc(100vw - 80px);
}
}
.top-bar-right { display: flex; align-items: center; gap: 1rem; }
/* ===== MAIN CONTENT ===== */
.main-content {
margin-left: 220px;
padding-top: 48px;
min-height: 100vh;
position: relative;
z-index: 1;
}
.btn-y {
background: var(--yellow);
color: #111 !important;
padding: 0.4rem 1rem;
border-radius: 5px;
font-weight: 700;
font-size: var(--fs-table);
transition: all 0.2s;
border: none;
cursor: pointer;
font-family: var(--font);
text-decoration: none;
display: inline-block;
letter-spacing: 0.01em;
}
.btn-y:hover {
background: var(--yellow-dim);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(245, 217, 33, 0.18);
}
.btn-ghost {
color: var(--text-dim);
padding: 0.4rem 1rem;
border: 1px solid var(--border-light);
border-radius: 5px;
font-size: var(--fs-table);
font-weight: 500;
font-family: var(--font);
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
background: transparent;
display: inline-block;
}
.btn-ghost:hover { border-color: var(--text-muted); color: var(--text); }
/* ===== SHARED ANIMATIONS ===== */
.brand-underline {
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 2px;
}
.animated-dots::after {
content: '';
animation: ellipsis 1.8s steps(1) infinite;
}
@keyframes ellipsis {
0% { content: ''; }
15% { content: '.'; }
35% { content: '..'; }
55% { content: '...'; }
85% { content: ''; }
}
.v-green { color: var(--green); }
.v-yellow { color: var(--yellow); }
.v-red { color: var(--red); }
/* ===== DASHBOARD LAYOUT ===== */
.dash-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 1rem;
padding: 1rem;
max-width: 1400px;
}
.dash-main { display: flex; flex-direction: column; gap: 1rem; }
.dash-sidebar-widgets { display: flex; flex-direction: column; gap: 1rem; }
.dash-widget {
background: #161B22;
border: 1px solid #1E2330;
border-radius: 6px;
padding: 0.85rem 1rem;
}
.dash-widget-title {
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 0.65rem;
}
/* Dashboard header */
.dash-header {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.5rem 0;
}
.dash-title {
font-size: 13px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.06em;
}
.dash-subtitle {
font-size: 11px;
color: var(--text-muted);
font-weight: 400;
}
/* Index widget */
.index-hero {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.index-name {
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.index-value {
font-size: 1.6rem;
font-weight: 700;
color: var(--text);
letter-spacing: -0.02em;
}
.index-change {
font-size: 12px;
font-weight: 600;
}
.index-sparkline {
height: 40px;
background: linear-gradient(90deg, rgba(34,197,94,0.05), rgba(34,197,94,0.1));
border-radius: 4px;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 10px;
}
.sub-indices {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
}
@media (max-width: 768px) {
.sub-indices { grid-template-columns: repeat(2, 1fr); }
}
.sub-index-card {
background: var(--bg);
border: 1px solid #1E2330;
border-radius: 5px;
padding: 0.5rem 0.6rem;
}
.sub-index-meta {
font-size: 9px;
color: var(--text-muted);
margin-top: 0.2rem;
}
.sub-index-name {
font-size: 9px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.25rem;
}
.sub-index-val {
font-size: 13px;
font-weight: 700;
color: var(--text);
}
.sub-index-chg {
font-size: 10px;
font-weight: 600;
margin-top: 0.1rem;
}
/* Chart widget */
.chart-widget-header {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.chart-widget-title {
font-size: 11px;
font-weight: 700;
color: var(--yellow);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.chart-widget-val {
font-size: 16px;
font-weight: 700;
color: var(--text);
}
.chart-widget-chg {
font-size: 11px;
font-weight: 600;
}
.chart-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
gap: 0.5rem;
flex-wrap: wrap;
}
.chart-last-updated {
/* Sits in the widget flow directly below the chart, always as a
single line regardless of viewport width. white-space:nowrap
blocks the mobile-wrap path where "21 Apr 2026, …" dropped onto
a second line and read as a stray axis label at the chart's
bottom-left corner. width:fit-content + margin-left:auto keeps
the element right-aligned without turning the full-width parent
into a wrap target. */
display: block;
width: fit-content;
max-width: 100%;
margin-left: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 4px 6px 0 0;
font-family: 'Mulish', sans-serif;
font-size: 10px;
font-weight: 400;
color: #6B7280;
opacity: 0.7;
letter-spacing: normal;
text-transform: none;
}
.chart-last-updated.stale {
color: #c77b3a;
opacity: 1;
font-weight: 500;
}
/* News feed-freshness caption. Same visual language as
.chart-last-updated — the two indicators are semantically
identical (last-write timestamp from a pipeline), so keeping
them consistent helps the reader. */
.news-feed-updated {
display: block;
width: fit-content;
max-width: 100%;
margin-left: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 4px 0 0 0;
font-family: 'Mulish', sans-serif;
font-size: 10px;
font-weight: 400;
color: #6B7280;
opacity: 0.7;
letter-spacing: normal;
text-transform: none;
}
.news-feed-updated.stale {
color: #c77b3a;
opacity: 1;
font-weight: 500;
}
.news-feed-updated:empty {
display: none;
}
.chart-mode-tabs {
display: flex;
gap: 0;
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
margin-right: 0.5rem;
}
.chart-mode-tab {
background: transparent;
border: none;
border-right: 1px solid var(--border);
color: var(--text-muted);
font-family: var(--font);
font-size: 10px;
padding: 0.3rem 0.6rem;
cursor: pointer;
transition: all 0.15s;
}
.chart-mode-tab:last-child { border-right: none; }
.chart-mode-tab:hover { color: var(--text); }
.chart-mode-tab.active { background: rgba(245,217,33,0.06); color: var(--yellow); }
.chart-mode-tab.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: auto; position: relative; }
.chart-mode-tab.disabled:hover::after {
content: 'Coming soon';
position: absolute;
bottom: -26px;
left: 50%;
transform: translateX(-50%);
background: #1A1A2E;
color: #F5D921;
font-family: var(--font);
font-size: 9px;
padding: 3px 8px;
border-radius: 3px;
border: 1px solid #333;
white-space: nowrap;
z-index: 10;
pointer-events: none;
}
.chart-range-group, .chart-index-group {
display: flex;
gap: 2px;
}
.chart-range-btn, .chart-index-btn {
background: transparent;
border: 1px solid #1E2330;
color: var(--text-muted);
font-family: var(--font);
font-size: 10px;
padding: 0.3rem 0.5rem;
border-radius: 3px;
cursor: pointer;
transition: all 0.15s;
}
.chart-range-btn:hover, .chart-index-btn:hover {
color: var(--text);
border-color: var(--border-light);
}
.chart-range-btn.active, .chart-index-btn.active {
background: var(--yellow-subtle);
border-color: var(--yellow-dim);
color: var(--yellow);
}
.chart-range-btn.disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
/* Pagination page-number buttons in Frontier Assets. The .gated
variant marks pages 2+ that open the early-access popup rather
than navigating — subtle yellow accent signals depth without
shouting. */
.pager-btn {
background: transparent;
border: 1px solid #1E2330;
color: var(--text-muted);
font-family: 'Space Grotesk', sans-serif;
font-variant-numeric: tabular-nums;
font-size: 10px;
padding: 0.3rem 0.55rem;
border-radius: 3px;
cursor: pointer;
transition: all 0.15s;
min-width: 28px;
text-align: center;
}
.pager-btn:hover {
color: var(--text);
border-color: var(--border-light);
}
.pager-btn.active {
background: var(--yellow-subtle);
border-color: var(--yellow-dim);
color: var(--yellow);
cursor: default;
}
.pager-btn.gated {
color: rgba(245, 217, 33, 0.55);
border-color: rgba(245, 217, 33, 0.18);
}
.pager-btn.gated:hover {
color: var(--yellow);
border-color: rgba(245, 217, 33, 0.45);
}
.pager-ellipsis {
color: var(--text-dim);
font-size: 10px;
padding: 0 2px;
user-select: none;
}
.chart-compare-btn {
background: transparent;
border: 1px dashed var(--border-light);
color: var(--text-muted);
font-family: var(--font);
font-size: 10px;
padding: 0.3rem 0.5rem;
border-radius: 3px;
cursor: pointer;
transition: all 0.15s;
margin-left: 4px;
}
.chart-compare-btn:hover { color: var(--text); border-color: var(--text-muted); }
.benchmark-quick-btns {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 0.25rem;
}
.benchmark-btn {
background: transparent;
border: 1px solid var(--border-light);
color: var(--text-dim);
font-family: var(--font);
font-size: 10px;
padding: 2px 8px;
border-radius: 3px;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.benchmark-btn:hover {
border-color: var(--text-dim);
color: var(--text);
}
.benchmark-btn.active {
border-color: var(--blue);
color: var(--blue);
background: rgba(59, 130, 246, 0.08);
}
.compare-search-input {
background: #161B22;
border: 1px solid var(--border-light);
color: var(--text);
font-family: var(--font);
font-size: 11px;
padding: 0.3rem 0.5rem;
border-radius: 3px;
width: 200px;
outline: none;
text-decoration: none;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
}
.compare-search-input::placeholder { color: #5A6178; }
.compare-search-input:focus { border-color: #F5D921; background: #161B22; }
.compare-results {
position: absolute;
top: 100%;
left: 0;
background: var(--bg-card);
border: none;
border-radius: 3px;
z-index: 10;
max-height: 150px;
overflow-y: auto;
width: 250px;
}
.compare-results:not(:empty) {
border: 1px solid var(--border-light);
}
.compare-result-item {
padding: 0.3rem 0.5rem;
font-size: 11px;
cursor: pointer;
font-family: var(--font);
}
.compare-result-item:hover { background: rgba(245,217,33,0.08); }
.compare-pills { display: flex; gap: 6px; padding: 0 0 0.25rem; flex-wrap: wrap; }
.compare-pill-chip {
font-family: var(--font);
font-size: 10px;
padding: 2px 8px;
border: 1px solid;
border-radius: 12px;
display: inline-flex;
align-items: center;
}
#compare-input-row {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
z-index: 5;
background: var(--bg-card);
}
#index-chart-container {
height: 270px;
width: 100%;
position: relative;
}
/* Hide TradingView watermark from lightweight-charts free tier */
#index-chart-container a[href*="tradingview"] {
display: none !important;
}
#index-chart-container:has(.chart-placeholder[style*="flex"]) {
height: 160px;
}
.chart-placeholder {
height: 160px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 11px;
text-align: center;
border: 1px dashed #1E2330;
border-radius: 4px;
}
/* Market table */
.market-tabs {
display: flex;
gap: 0.25rem;
margin-bottom: 0.5rem;
flex-wrap: wrap;
}
.market-tab {
background: none;
border: 1px solid transparent;
color: var(--text-muted);
font-family: var(--font);
font-size: 11px;
font-weight: 500;
padding: 0.3rem 0.6rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.15s;
}
.market-tab:hover { color: var(--text); background: var(--bg-hover); }
.market-tab.active { color: var(--yellow); border-color: var(--yellow); background: var(--yellow-subtle); }
.market-search-row {
margin-bottom: 0.5rem;
}
.market-search-input {
width: 100%;
padding: 0.4rem 0.6rem;
background: var(--bg);
border: 1px solid #1E2330;
border-radius: 4px;
color: var(--text);
font-family: var(--font);
font-size: 11px;
outline: none;
}
.market-search-input:focus { border-color: var(--yellow); }
.market-search-input::placeholder { color: var(--text-muted); }
.market-table {
width: 100%;
border-collapse: collapse;
font-size: 11px;
}
.market-table th {
text-align: left;
font-size: 9px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.4rem 0.5rem;
border-bottom: 1px solid #1E2330;
cursor: pointer;
user-select: none;
}
.market-table th:hover { color: var(--text); }
.market-table th.r { text-align: right; }
.market-table td {
padding: 0.4rem 0.5rem;
border-bottom: 1px solid rgba(30,35,48,0.5);
color: var(--text-dim);
vertical-align: middle;
}
.market-table td.r { text-align: right; }
.market-table tr:hover td { background: rgba(255,255,255,0.02); }
.market-table .ticker {
font-weight: 700;
color: var(--text);
font-size: 11px;
}
.market-table .company-name {
font-size: 10px;
color: var(--text-muted);
}
.sector-tag {
font-size: 9px;
font-weight: 600;
padding: 0.15rem 0.4rem;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sector-semi { color: #111318; background: #F5D921; }
.sector-robo { color: #FFFFFF; background: #3B82F6; }
.sector-space { color: #111318; background: #94A3B8; }
.sector-cross { color: #111318; background: #22C55E; }
.sector-materials { color: #111318; background: #FB923C; }
.sector-token { color: #FFFFFF; background: #A855F7; }
.view-all-link {
display: block;
text-align: center;
padding: 0.6rem;
font-size: 11px;
color: var(--text-muted);
text-decoration: none;
border-top: 1px solid #1E2330;
margin-top: 0.25rem;
}
.view-all-link:hover { color: var(--yellow); }
/* Export button + modal */
.export-btn {
background: transparent;
border: 1px solid var(--border-light);
color: var(--text-muted);
font-family: var(--font);
font-size: 10px;
padding: 0.3rem 0.6rem;
border-radius: 3px;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.export-btn:hover { color: var(--text); border-color: var(--text-muted); }
.export-modal-overlay {
position: fixed; inset: 0; z-index: 1000;
background: rgba(0,0,0,0.6);
display: flex; align-items: center; justify-content: center;
}
.export-modal {
background: #161B22;
border: 1px solid #F5D921;
border-radius: 8px;
padding: 1.5rem 2rem;
max-width: 360px;
font-family: var(--font);
text-align: center;
}
/* Enterprise preview gates */
.enterprise-preview {
background: linear-gradient(180deg, rgba(22,27,34,0.95) 0%, rgba(10,10,15,0.98) 100%);
border: 1px solid var(--border-light);
border-radius: 6px;
padding: 2rem 1.5rem;
text-align: center;
margin: 1rem 0;
}
.enterprise-preview h3 {
color: var(--yellow);
font-family: var(--font);
font-size: 12px;
letter-spacing: 0.1em;
margin: 0 0 0.5rem;
}
.enterprise-preview > p {
color: var(--text-dim);
font-family: var(--font);
font-size: 10px;
margin-bottom: 1rem;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin: 1rem 0;
text-align: left;
}
@media (max-width: 768px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
border-radius: 4px;
padding: 0.75rem;
}
.feature-card .feature-label {
color: var(--yellow);
font-family: var(--font);
font-size: 9px;
letter-spacing: 0.06em;
opacity: 0.7;
}
.feature-card h4 {
color: var(--text);
font-family: var(--font);
font-size: 11px;
margin: 0.3rem 0 0.25rem;
}
.feature-card p {
color: var(--text-muted);
font-family: var(--font);
font-size: 10px;
line-height: 1.5;
margin: 0;
}
.cta-enterprise {
display: inline-block;
background: var(--yellow);
color: var(--bg);
font-family: var(--font);
font-weight: 700;
font-size: 10px;
padding: 0.5rem 1.5rem;
border: none;
border-radius: 3px;
text-decoration: none;
letter-spacing: 0.06em;
margin-top: 1rem;
cursor: pointer;
transition: opacity 0.15s;
}
.cta-enterprise:hover { opacity: 0.85; }
/* Coming soon page previews */
.coming-soon-content { max-width: 640px; margin: 0 auto; text-align: center; padding: 2rem 0; }
.coming-soon-content h2 { color: #FFFFFF; font-size: clamp(1.2rem,2.5vw,1.6rem); font-weight: 700; margin-bottom: 0.5rem; }
.coming-soon-content .subtitle { color: var(--text-dim); font-size: 11px; margin-bottom: 2rem; }
.signal-example, .commodity-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 4px;
padding: 0.75rem 1rem;
margin-bottom: 0.5rem;
text-align: left;
}
.signal-badge {
display: inline-block;
font-family: var(--font);
font-size: 8px;
font-weight: 700;
letter-spacing: 0.06em;
padding: 0.15rem 0.4rem;
border-radius: 2px;
margin-bottom: 0.3rem;
}
.signal-badge.urgent { background: var(--red); color: #fff; }
.signal-badge.watch { background: var(--yellow); color: var(--bg); }
.signal-badge.info { background: var(--border-light); color: var(--text-dim); }
.blurred-preview { filter: blur(4px); user-select: none; opacity: 0.5; }
/* Market overview widget */
.overview-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.35rem 0;
font-size: 11px;
border-bottom: 1px solid rgba(30,35,48,0.4);
}
.overview-row:last-child { border-bottom: none; }
.overview-label { color: var(--text-muted); }
.overview-val { color: var(--text); font-weight: 600; }
/* News feed widget */
.news-item {
padding: 0.5rem 0;
border-bottom: 1px solid rgba(30,35,48,0.4);
}
.news-item:last-child { border-bottom: none; }
.news-headline {
font-size: 11px;
color: var(--text-dim);
line-height: 1.5;
margin-bottom: 0.2rem;
}
.news-headline-link {
text-decoration: none;
color: inherit;
}
.news-headline-link:hover .news-headline {
color: var(--yellow);
}
.news-meta {
font-size: 9px;
color: var(--text-muted);
}
.news-toggle {
display: flex;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.news-toggle-btn {
background: none;
border: none;
font-family: var(--font);
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
padding: 0.2rem 0.4rem;
border-radius: 3px;
}
.news-toggle-btn.active { color: var(--yellow); }
.news-toggle-btn.disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 1024px) {
.dash-layout { grid-template-columns: 1fr; }
.sub-indices { grid-template-columns: repeat(2, 1fr); }
}
/* ===== MOBILE: TABLES + TOUCH ===== */
@media (max-width: 768px) {
.market-table { min-width: 680px; }
.dash-widget { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.market-tabs { flex-wrap: wrap; }
.market-tab, .intel-filter-btn, .fbtn, .btn-y, .btn-ghost { min-height: 44px; }
.nav-item { min-height: 44px; }
.sub-indices { grid-template-columns: 1fr 1fr; }
}
/* ===== INTELLIGENCE PAGE ===== */
.intel-layout {
display: grid;
grid-template-columns: 1fr 280px;
gap: 1rem;
padding: 0 1rem 1rem 1rem;
max-width: 1400px;
align-items: start;
}
.intel-layout > .dash-sidebar-widgets {
position: sticky;
top: 60px;
}
.intel-header {
margin-bottom: 0.75rem;
}
.intel-title {
font-size: 15px;
font-weight: 700;
color: var(--yellow);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.intel-subtitle {
font-size: 11px;
color: var(--text-muted);
margin-top: 0.2rem;
}
.intel-filters {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #1E2330;
}
.intel-filter-group {
display: flex;
gap: 0.2rem;
}
.intel-filter-group::before {
content: attr(data-label);
font-size: 9px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
align-self: center;
margin-right: 0.3rem;
}
.intel-filter-btn {
background: none;
border: 1px solid transparent;
color: var(--text-muted);
font-family: var(--font);
font-size: 10px;
font-weight: 500;
padding: 0.25rem 0.5rem;
border-radius: 3px;
cursor: pointer;
transition: all 0.15s;
}
.intel-filter-btn:hover { color: var(--text); background: var(--bg-hover); }
.intel-filter-btn.active { color: var(--yellow); border-color: var(--yellow); background: var(--yellow-subtle); }
.intel-feed { display: flex; flex-direction: column; gap: 0; }
.feed-card {
display: flex;
gap: 0.75rem;
padding: 0.7rem 0.75rem;
border-bottom: 1px solid rgba(30,35,48,0.5);
transition: background 0.15s;
text-decoration: none;
}
.feed-card:hover { background: rgba(255,255,255,0.02); }
.feed-icon {
width: 28px;
height: 28px;
border-radius: 4px;
background: var(--bg-hover);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
flex-shrink: 0;
color: var(--text-muted);
}
.feed-icon.type-news { color: var(--blue); }
.feed-icon.type-research { color: var(--purple); }
.feed-icon.type-report { color: var(--yellow); }
.feed-icon.type-filing { color: var(--green); }
.feed-body { flex: 1; min-width: 0; }
.feed-headline {
font-size: 12px;
color: var(--text-dim);
line-height: 1.5;
margin-bottom: 0.25rem;
}
.feed-meta {
font-size: 9px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.feed-source { font-weight: 600; }
.feed-sector {
font-size: 8px;
font-weight: 600;
padding: 0.1rem 0.35rem;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.load-more-btn {
display: block;
width: 100%;
padding: 0.6rem;
background: none;
border: 1px solid #1E2330;
border-radius: 4px;
color: var(--text-muted);
font-family: var(--font);
font-size: 11px;
cursor: pointer;
margin-top: 0.75rem;
transition: all 0.15s;
}
.load-more-btn:hover { border-color: var(--yellow); color: var(--yellow); }
/* Intel sidebar widgets */
.topic-tag {
display: flex;
justify-content: space-between;
padding: 0.3rem 0;
font-size: 11px;
border-bottom: 1px solid rgba(30,35,48,0.4);
}
.topic-tag:last-child { border-bottom: none; }
.topic-name { color: var(--text-dim); }
.topic-count { color: var(--text-muted); font-size: 10px; }
.substack-item {
padding: 0.4rem 0;
border-bottom: 1px solid rgba(30,35,48,0.4);
}
.substack-item:last-child { border-bottom: none; }
.substack-title {
font-size: 11px;
color: var(--text-dim);
line-height: 1.4;
margin-bottom: 0.15rem;
}
.substack-date { font-size: 9px; color: var(--text-muted); }
.contributor-row {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.3rem 0;
font-size: 11px;
color: var(--text-dim);
}
.contributor-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--text-muted);
flex-shrink: 0;
}
@media (max-width: 1024px) {
.intel-layout { grid-template-columns: 1fr; }
}
/* ===== TICKER BAR ===== */
.ticker-bar {
background: var(--bg-raised);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 0.7rem 0;
overflow: hidden;
position: relative;
z-index: 1;
}
.ticker-track {
display: flex;
gap: 2.5rem;
animation: scrl 50s linear infinite;
width: max-content;
}
.ticker-item { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-table); white-space: nowrap; }
.t-name { color: var(--text-dim); }
.t-price { color: var(--text); }
.t-chg { font-size: var(--fs-table); padding: 0.08rem 0.3rem; border-radius: 2px; }
.t-up { color: var(--green); background: rgba(34, 197, 94, 0.08); }
.t-dn { color: var(--red); background: rgba(239, 68, 68, 0.08); }
@keyframes scrl {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ===== TAB NAV ===== */
.tab-nav {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border);
margin-bottom: 2rem;
}
.tab-btn {
font-family: var(--font);
font-size: var(--fs-table);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.75rem 1.5rem;
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s;
}
.tab-btn:hover { color: var(--text-dim); }
.tab-btn.active { color: var(--yellow); border-bottom-color: var(--yellow); }
.subtab-nav {
display: flex;
gap: 0;
margin-bottom: 1.25rem;
border-bottom: 1px solid var(--border);
}
.subtab-btn {
font-family: var(--font);
font-size: var(--fs-label);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.55rem 1.1rem;
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s;
}
.subtab-btn:hover { color: var(--text-dim); }
.subtab-btn.active { color: var(--yellow); border-bottom-color: var(--yellow); }
.subtab-content { display: none; }
.subtab-content.active { display: block; }
/* ===== MAIN CONTENT AREA ===== */
.main-section {
padding: 3.5rem 2rem;
max-width: 1300px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 0.75rem;
flex-wrap: wrap;
gap: 1rem;
}
.section-tag {
font-size: var(--fs-label);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--yellow);
margin-bottom: 0.35rem;
}
.section-head h2 {
font-size: clamp(1.2rem, 2.5vw, 1.75rem);
font-weight: 700;
letter-spacing: -0.02em;
}
.section-oneliner {
font-size: var(--fs-table);
color: var(--text-dim);
letter-spacing: 0.04em;
margin: 0;
}
.controls {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
}
.filters { display: flex; gap: 0.3rem; }
.fbtn {
font-family: var(--font);
font-size: var(--fs-label);
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.35rem 0.65rem;
border-radius: 4px;
border: 1px solid var(--border);
background: transparent;
color: var(--text-dim);
cursor: pointer;
transition: all 0.2s;
}
.fbtn:hover { border-color: var(--border-light); color: var(--text); }
.fbtn.active { background: var(--yellow-subtle); border-color: rgba(245, 217, 33, 0.2); color: var(--yellow); }
.search-box {
font-family: var(--font);
font-size: var(--fs-table);
padding: 0.35rem 0.65rem;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg-card);
color: var(--text);
outline: none;
width: 170px;
transition: border-color 0.2s;
}
.search-box::placeholder { color: var(--text-muted); }
.search-box:focus { border-color: var(--yellow); }
/* ===== TABLE ===== */
.table-wrap {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-raised);
}
.data-table {
width: 100%;
border-collapse: collapse;
min-width: 780px;
}
.data-table th {
font-size: var(--fs-label);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
padding: 0.7rem 0.85rem;
text-align: left;
border-bottom: 1px solid var(--border);
background: var(--bg-raised);
position: sticky;
top: 0;
z-index: 10;
cursor: pointer;
user-select: none;
}
.data-table th:hover { color: var(--text-dim); }
.data-table th.r { text-align: right; }
.data-table td {
padding: 0.6rem 0.85rem;
border-bottom: 1px solid rgba(37, 42, 54, 0.5);
font-size: var(--fs-table);
transition: background 0.12s;
vertical-align: middle;
}
.data-table tbody tr:hover td { background: var(--bg-hover); }
.data-table tbody tr:last-child td { border-bottom: none; }
.rank { font-size: var(--fs-table); color: var(--text-muted); }
.co-cell { display: flex; align-items: center; gap: 0.55rem; }
.co-icon {
width: 26px; height: 26px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: var(--fs-label);
flex-shrink: 0;
}
.co-name { font-weight: 700; font-size: var(--fs-table); display: block; line-height: 1.15; }
.co-sub { font-size: var(--fs-label); color: var(--text-muted); }
.tkr { font-size: var(--fs-table); color: var(--text-dim); }
.prc { font-weight: 700; font-size: var(--fs-table); text-align: right; display: block; }
.chg {
font-size: var(--fs-table); font-weight: 500;
padding: 0.12rem 0.4rem; border-radius: 3px;
display: inline-block; float: right;
}
.chg-up { color: var(--green); background: rgba(34, 197, 94, 0.08); }
.chg-dn { color: var(--red); background: rgba(239, 68, 68, 0.08); }
.mcap { text-align: right; display: block; font-size: var(--fs-table); color: var(--text-dim); }
.stag {
font-size: var(--fs-micro); text-transform: uppercase;
letter-spacing: 0.04em; padding: 0.15rem 0.4rem;
border-radius: 3px; display: inline-block;
}
.stag-semi { background: rgba(245, 217, 33, 0.08); color: var(--yellow); }
.stag-robo { background: rgba(59, 130, 246, 0.08); color: var(--blue); }
.stag-infra { background: rgba(34, 197, 94, 0.08); color: var(--green); }
.stag-cross { background: rgba(167, 139, 250, 0.08); color: var(--purple); }
.stag-token { background: rgba(249, 115, 22, 0.08); color: #f97316; }
.stag-ai { background: rgba(167, 139, 250, 0.08); color: var(--purple); }
.stag-supply { background: rgba(249, 115, 22, 0.08); color: #f97316; }
.stag-filing { background: rgba(59, 130, 246, 0.08); color: var(--blue); }
.sparkline { width: 60px; height: 22px; }
.show-more-wrap {
text-align: center;
margin-top: 1rem;
}
.show-more-btn {
background: transparent;
border: 1px solid var(--border);
color: var(--yellow);
font-family: var(--font);
font-size: var(--fs-label);
padding: 0.5rem 2rem;
cursor: pointer;
letter-spacing: 0.06em;
transition: background 0.2s;
}
.show-more-btn:hover {
background: rgba(245, 217, 33, 0.06);
}
.data-note {
font-size: var(--fs-label);
color: var(--text-muted);
text-align: right;
margin-top: 0.6rem;
letter-spacing: 0.02em;
}
/* ===== FUNDRAISING SPECIFIC ===== */
.fund-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
margin-bottom: 2rem;
}
.fund-stat {
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.1rem 1rem;
}
.fund-stat .fs-label {
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-bottom: 0.3rem;
}
.fund-stat .fs-val {
font-size: var(--fs-sub);
font-weight: 700;
color: var(--text);
}
.fund-stat .fs-sub {
font-size: var(--fs-label);
color: var(--text-muted);
margin-top: 0.15rem;
}
.stage-tag {
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 0.15rem 0.4rem;
border-radius: 3px;
display: inline-block;
font-weight: 500;
}
.stage-pre { background: rgba(167, 139, 250, 0.1); color: var(--purple); }
.stage-seed { background: rgba(59, 130, 246, 0.1); color: var(--blue); }
.stage-a { background: rgba(34, 197, 94, 0.1); color: var(--green); }
.stage-b { background: rgba(245, 217, 33, 0.1); color: var(--yellow); }
.stage-c { background: rgba(249, 115, 22, 0.1); color: #f97316; }
.stage-late { background: rgba(239, 68, 68, 0.1); color: var(--red); }
.investor-list {
font-size: var(--fs-label);
color: var(--text-dim);
max-width: 220px;
line-height: 1.5;
}
.dl-btn {
font-family: var(--font);
font-size: var(--fs-label);
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.35rem 0.75rem;
border-radius: 4px;
border: 1px solid var(--yellow);
background: transparent;
color: var(--yellow);
cursor: pointer;
transition: all 0.2s;
}
.dl-btn:hover { background: var(--yellow); color: #111; }
/* ===== PRODUCTS ===== */
.products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-top: 2rem;
}
.pcard {
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 10px;
padding: 1.5rem;
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.pcard::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--yellow);
opacity: 0;
transition: opacity 0.3s;
}
.pcard:hover { border-color: var(--border-light); transform: translateY(-2px); }
.pcard:hover::before { opacity: 1; }
.pcard-icon {
font-size: var(--fs-label);
font-weight: 700;
color: var(--yellow);
letter-spacing: 0.1em;
margin-bottom: 1rem;
}
.pcard h3 { font-size: var(--fs-body); font-weight: 700; margin-bottom: 0.35rem; }
.pcard p { color: var(--text-dim); font-size: var(--fs-table); line-height: 1.65; }
.pcard-tag {
font-size: var(--fs-label); text-transform: uppercase;
letter-spacing: 0.08em; color: var(--yellow); margin-top: 0.75rem; display: block;
}
/* ===== CTA ===== */
.cta-section {
padding: 4rem 2rem;
max-width: 720px;
margin: 0 auto;
text-align: center;
position: relative; z-index: 1;
}
.cta-box {
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 12px;
padding: 3rem 2rem;
position: relative;
overflow: hidden;
}
.cta-box::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% -20%, var(--yellow-glow), transparent 55%);
pointer-events: none;
}
.cta-box h2 { font-size: var(--fs-sub); font-weight: 700; margin-bottom: 0.4rem; position: relative; }
.cta-box > p { color: var(--text-dim); font-size: var(--fs-table); margin-bottom: 1.5rem; position: relative; }
.cta-form {
display: flex; gap: 0.5rem;
max-width: 380px;
margin: 0 auto;
position: relative;
}
.cta-form input {
flex: 1;
padding: 0.6rem 0.85rem;
border: 1px solid var(--border-light);
border-radius: 5px;
background: var(--bg-card);
color: var(--text);
font-family: var(--font);
font-size: var(--fs-table);
outline: none;
transition: border-color 0.2s;
}
.cta-form input::placeholder { color: var(--text-muted); }
.cta-form input:focus { border-color: var(--yellow); }
#signup-msg { font-size: var(--fs-table); margin-top: 0.6rem; position: relative; }
/* ===== FOOTER ===== */
footer {
padding: 2rem;
text-align: center;
border-top: 1px solid var(--border);
position: relative; z-index: 1;
}
footer p { font-size: var(--fs-label); color: var(--text-muted); }
.divider { max-width: 1300px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 1; }
.divider hr { border: none; border-top: 1px solid var(--border); }
/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.tab-content { display: none; }
.tab-content.active { display: block; }
/* ===== INTELLIGENCE ===== */
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 0.75rem;
}
.news-card {
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.1rem;
transition: all 0.2s;
}
.news-card:hover { border-color: var(--border-light); }
.news-card-source {
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.news-card-title {
font-size: var(--fs-table);
font-weight: 700;
margin: 0.35rem 0 0.2rem;
line-height: 1.45;
}
.news-card-title a { color: var(--text); text-decoration: none; }
.news-card-title a:hover { color: var(--yellow); }
.news-card-date { font-size: var(--fs-label); color: var(--text-muted); }
.news-card-summary {
font-size: var(--fs-table);
color: var(--text-dim);
line-height: 1.6;
margin-top: 0.4rem;
}
.paper-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.paper-card {
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.1rem 1.25rem;
transition: all 0.2s;
}
.paper-card:hover { border-color: var(--border-light); }
.paper-title {
font-size: var(--fs-table);
font-weight: 700;
line-height: 1.45;
}
.paper-title a { color: var(--text); text-decoration: none; }
.paper-title a:hover { color: var(--yellow); }
.paper-meta {
font-size: var(--fs-label);
color: var(--text-muted);
margin: 0.3rem 0;
}
.paper-abstract {
font-size: var(--fs-table);
color: var(--text-dim);
line-height: 1.65;
margin-top: 0.4rem;
}
.paper-tags {
display: flex;
gap: 0.3rem;
margin-top: 0.5rem;
flex-wrap: wrap;
}
.paper-tag {
font-size: var(--fs-micro);
padding: 0.1rem 0.35rem;
border-radius: 3px;
background: var(--bg-card);
border: 1px solid var(--border);
color: var(--text-muted);
}
.oa-badge {
font-size: var(--fs-micro);
padding: 0.1rem 0.35rem;
border-radius: 3px;
background: rgba(34, 197, 94, 0.08);
color: var(--green);
}
.filing-badge {
font-size: var(--fs-micro);
padding: 0.1rem 0.35rem;
border-radius: 3px;
background: rgba(59, 130, 246, 0.08);
color: var(--blue);
font-weight: 700;
}
.filing-company {
font-size: var(--fs-table);
font-weight: 700;
color: var(--text);
line-height: 1.45;
}
.filing-ticker {
font-size: var(--fs-label);
font-weight: 500;
color: var(--yellow);
margin-left: 0.3rem;
}
.filing-type-small {
font-size: var(--fs-micro);
padding: 0.1rem 0.35rem;
border-radius: 3px;
background: rgba(59, 130, 246, 0.06);
color: var(--text-muted);
}
/* ===== DOSSIER / THESIS PAGE ===== */
.dossier {
max-width: 800px;
padding: 0 2rem 3rem;
}
.dossier-header {
margin-bottom: 2.5rem;
}
.dossier-title {
font-size: 18px;
font-weight: 700;
color: var(--yellow);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.dossier-section {
margin-bottom: 2.5rem;
}
.dossier-subhead {
font-size: 15px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
margin-bottom: 1rem;
}
.dossier-body {
font-size: 13px;
color: var(--text-dim);
line-height: 1.85;
}
.dossier-body p {
margin-bottom: 1rem;
}
.dossier-body p:last-child { margin-bottom: 0; }
.dossier-divider {
border: none;
border-top: 1px solid #1E2330;
margin: 2rem 0;
}
.dossier-footer {
padding: 2rem 0;
border-top: 1px solid #1E2330;
margin-top: 2rem;
font-size: 11px;
color: var(--text-muted);
line-height: 1.8;
}
.dossier-footer a {
color: var(--text-dim);
text-decoration: none;
}
.dossier-footer a:hover { color: var(--yellow); }
/* Roadmap v2 */
.roadmap-v2 { padding-left: 1.5rem; }
.rm-item {
position: relative;
padding: 0 0 1.5rem 1.5rem;
border-left: 1px solid #1E2330;
}
.rm-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.rm-dot {
position: absolute;
left: -5px;
top: 2px;
width: 9px; height: 9px;
border-radius: 50%;
background: #3a3f4b;
border: 2px solid #0D1117;
}
.rm-item.complete .rm-dot { background: var(--green); }
.rm-item.current .rm-dot { background: var(--yellow); box-shadow: 0 0 6px rgba(245,217,33,0.4); }
.rm-item.future .rm-dot { background: #3a3f4b; }
.rm-label {
font-size: 9px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.15rem;
}
.rm-title {
font-size: 12px;
font-weight: 600;
margin-bottom: 0.15rem;
}
.rm-item.complete .rm-title { color: var(--green); }
.rm-item.current .rm-title { color: var(--yellow); }
.rm-item.future .rm-title { color: var(--text-muted); }
.rm-desc {
font-size: 11px;
color: var(--text-muted);
line-height: 1.5;
}
.rm-status {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 0.15rem;
}
/* ===== THESIS (legacy) ===== */
.thesis-quote {
border-left: 2px solid var(--yellow);
padding: 1rem 1.25rem;
margin: 1.5rem 0;
font-style: italic;
color: var(--text);
font-size: var(--fs-body);
line-height: 1.75;
background: var(--yellow-subtle);
border-radius: 0 6px 6px 0;
}
.thesis-points {
margin-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.thesis-point {
display: flex;
gap: 0.75rem;
align-items: baseline;
}
.thesis-point-num {
font-size: var(--fs-table);
font-weight: 700;
color: var(--yellow);
flex-shrink: 0;
min-width: 1.5rem;
}
.thesis-point-label {
font-size: var(--fs-table);
font-weight: 700;
color: var(--yellow);
margin-right: 0.35rem;
}
.thesis-point-text {
font-size: var(--fs-table);
color: var(--text-dim);
line-height: 1.65;
}
.thesis-body {
font-size: var(--fs-table);
color: var(--text-dim);
line-height: 1.75;
max-width: 720px;
margin-top: 1rem;
}
.thesis-body p {
margin-bottom: 0.75rem;
}
/* ===== ROADMAP ===== */
.roadmap-timeline {
margin-top: 2rem;
position: relative;
}
.roadmap-timeline::before {
content: '';
position: absolute;
left: 16px;
top: 0;
bottom: 0;
width: 1px;
background: var(--border);
}
.milestone {
position: relative;
padding-left: 48px;
padding-bottom: 2rem;
}
.milestone:last-child {
padding-bottom: 0;
}
.milestone-dot {
position: absolute;
left: 8px;
top: 4px;
width: 17px;
height: 17px;
border-radius: 50%;
border: 2px solid var(--yellow);
background: var(--bg);
z-index: 2;
}
.milestone.done .milestone-dot {
background: var(--yellow);
}
.milestone.done .milestone-dot::after {
content: '\2713';
position: absolute;
top: -1px;
left: 2px;
font-size: var(--fs-label);
color: #111;
font-weight: 700;
}
.milestone-tag {
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-bottom: 0.15rem;
}
.milestone-title {
font-size: var(--fs-sub);
font-weight: 700;
color: var(--text);
margin-bottom: 0.25rem;
}
.milestone-desc {
font-size: var(--fs-table);
color: var(--text-dim);
line-height: 1.65;
max-width: 600px;
}
.milestone-items {
margin-top: 0.6rem;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.milestone-item {
font-size: var(--fs-label);
padding: 0.2rem 0.55rem;
border-radius: 3px;
border: 1px solid var(--border);
color: var(--text-dim);
background: var(--bg-raised);
}
.biz-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 1.5rem;
}
.biz-card {
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.25rem;
}
.biz-card h4 {
font-size: var(--fs-table);
font-weight: 700;
color: var(--yellow);
margin-bottom: 0.6rem;
}
.biz-card ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.biz-card li {
font-size: var(--fs-table);
color: var(--text-dim);
line-height: 1.5;
padding-left: 1rem;
position: relative;
}
.biz-card li::before {
content: '\2610';
position: absolute;
left: 0;
color: var(--text-muted);
font-size: var(--fs-label);
}
@media (max-width: 900px) {
.biz-grid { grid-template-columns: 1fr; }
}
/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
.products-grid { grid-template-columns: 1fr; }
.sidebar { width: 60px; }
/* Hide labels ONLY inside the desktop sidebar collapsed state.
Previously this rule was unscoped — `.nav-label` at any width
under 900px got display:none, which silently killed the
mobile hamburger overlay nav text too (the .nav-label
elements inside .mobile-nav-list inherited this rule and
rendered as empty space). Scope to .sidebar to keep the
intended compact-sidebar behaviour and stop bleeding into
the mobile overlay. */
.sidebar .sidebar-logo-text,
.sidebar .nav-label,
.sidebar-version,
.sidebar-attrib,
.sidebar-tagline { display: none; }
.sidebar-logo { padding: 0 0.5rem 1rem; }
.sidebar-nav { padding: 0 0.25rem; }
.nav-item { justify-content: center; padding: 0.6rem; }
.status-dot { display: none; }
.top-bar { left: 60px; }
.main-content { margin-left: 60px; }
.main-section { padding: 2.5rem 1rem; }
.cta-form { flex-direction: column; }
.fund-stats { grid-template-columns: repeat(2, 1fr); }
.news-grid { grid-template-columns: 1fr; }
}
/* ── Messari-style Prices & Chart layout ── */
.prices-chart-layout {
display: grid;
grid-template-columns: 340px 1fr;
gap: 0;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-card);
overflow: hidden;
/* Fixed height: chart controls (~90px) + chart (480px) + note (~25px) */
height: 600px;
}
/* Left panel — compact asset list, height matches chart panel */
.asset-list-panel {
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
}
.asset-list-header {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.asset-list-header .asset-search {
flex: 1;
background: var(--bg);
border: 1px solid var(--border);
color: var(--text);
font-family: var(--font);
font-size: 0.7rem;
padding: 0.4rem 0.6rem;
border-radius: 4px;
outline: none;
}
.asset-list-header .asset-search:focus { border-color: var(--yellow); }
.asset-filter-row {
padding: 0.4rem 0.75rem;
border-bottom: 1px solid var(--border);
display: flex;
gap: 0.2rem;
flex-shrink: 0;
flex-wrap: wrap;
}
.asset-filter-row button {
background: none;
border: 1px solid transparent;
color: var(--text-dim);
font-family: var(--font);
font-size: 0.6rem;
padding: 0.2rem 0.5rem;
border-radius: 3px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.asset-filter-row button:hover { color: var(--text); }
.asset-filter-row button.active { border-color: var(--yellow); color: var(--yellow); }
.asset-list-scroll {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
.asset-list-scroll::-webkit-scrollbar { width: 4px; }
.asset-list-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
/* Asset row */
.asset-row {
display: grid;
grid-template-columns: 24px 1fr 70px 58px;
align-items: center;
padding: 0.45rem 0.6rem;
gap: 0.35rem;
cursor: pointer;
border-bottom: 1px solid var(--border);
font-size: 0.75rem;
transition: background 0.15s;
}
.asset-row:hover { background: var(--bg-hover); }
.asset-row.active { background: var(--yellow-subtle); border-left: 2px solid var(--yellow); }
.asset-row.pinned {
background: linear-gradient(90deg, rgba(245,217,33,0.08), transparent);
border-bottom: 2px solid var(--yellow);
}
.asset-row .ar-rank { color: var(--text-muted); font-size: 0.65rem; text-align: center; }
.asset-row .ar-info { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.asset-row .ar-icon {
width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 0.6rem;
}
.asset-row .ar-name {
font-weight: 600; font-size: 0.72rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asset-row .ar-ticker { color: var(--text-dim); font-size: 0.65rem; margin-left: 0.25rem; }
.asset-row .ar-price { text-align: right; font-size: 0.72rem; white-space: nowrap; }
.asset-row .ar-chg { text-align: right; font-size: 0.7rem; white-space: nowrap; min-width: 55px; }
.asset-row .ar-chg.up { color: var(--green); }
.asset-row .ar-chg.dn { color: var(--red); }
.asset-load-more {
text-align: center; padding: 0.6rem;
border-bottom: 1px solid var(--border);
}
.asset-load-more button {
background: none; border: 1px solid var(--border); color: var(--text-dim);
font-family: var(--font); font-size: 0.65rem; padding: 0.3rem 1rem;
border-radius: 4px; cursor: pointer;
}
.asset-load-more button:hover { border-color: var(--yellow); color: var(--yellow); }
/* Right panel — chart */
.chart-main-panel {
display: flex;
flex-direction: column;
}
.chart-top-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
flex-wrap: wrap;
gap: 0.5rem;
}
.chart-top-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.chart-mode-btns {
display: flex;
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
}
.chart-mode-btns button {
background: none; border: none; color: var(--text-dim);
font-family: var(--font); font-size: 0.7rem; padding: 0.35rem 0.7rem;
cursor: pointer; border-right: 1px solid var(--border);
}
.chart-mode-btns button:last-child { border-right: none; }
.chart-mode-btns button.active { background: var(--bg-hover); color: var(--yellow); }
.chart-range-btns {
display: flex; gap: 0.2rem;
}
.chart-range-btns button {
background: none; border: 1px solid transparent; color: var(--text-dim);
font-family: var(--font); font-size: 0.65rem; padding: 0.3rem 0.5rem;
border-radius: 4px; cursor: pointer;
}
.chart-range-btns button.active {
border-color: var(--yellow);
color: var(--yellow);
background: rgba(245,217,33,0.08);
}
.chart-range-btns button:hover { color: var(--yellow); }
.chart-range-btns button.disabled {
opacity: 0.3; cursor: default;
}
.chart-range-btns button.disabled:hover { color: var(--text-dim); }
/* Compare pills */
.chart-compare-bar {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 1rem;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
min-height: 32px;
}
.compare-pill {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.2rem 0.6rem; border-radius: 4px;
font-size: 0.65rem; font-family: var(--font);
border: 1px solid;
}
.compare-pill .cp-dot {
width: 8px; height: 8px; border-radius: 2px;
}
.compare-pill .cp-close {
cursor: pointer; margin-left: 0.2rem; opacity: 0.6;
font-size: 0.75rem;
}
.compare-pill .cp-close:hover { opacity: 1; }
.compare-add {
background: none; border: 1px dashed var(--border); color: var(--text-dim);
font-family: var(--font); font-size: 0.65rem; padding: 0.2rem 0.6rem;
border-radius: 4px; cursor: pointer;
}
.compare-add:hover { border-color: var(--text-dim); color: var(--text); }
/* Asset column headers */
.asset-col-headers {
display: grid;
grid-template-columns: 24px 1fr 70px 58px;
align-items: center;
padding: 0.3rem 0.6rem;
gap: 0.35rem;
border-bottom: 1px solid var(--border);
font-size: 0.55rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.8px;
flex-shrink: 0;
}
.asset-col-headers .ach-rank { text-align: center; }
.asset-col-headers .ach-price { text-align: right; }
.asset-col-headers .ach-chg { text-align: right; }
/* Chart area */
.chart-area-wrap {
position: relative;
height: 480px;
}
.chart-container { width: 100%; height: 480px; min-height: 480px; }
.chart-loading {
display: flex; align-items: center; justify-content: center;
height: 100%; color: var(--text-dim); font-size: 0.85rem;
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.chart-no-data {
display: flex; align-items: center; justify-content: center;
height: 100%; color: var(--text-muted); font-size: 0.85rem;
}
/* Legend removed — compare pills serve as legend */
/* Mobile: stack vertically */
@media (max-width: 860px) {
.prices-chart-layout {
grid-template-columns: 1fr;
height: auto;
}
.asset-list-panel {
max-height: 350px;
border-right: none;
border-bottom: 1px solid var(--border);
}
.chart-area-wrap { min-height: 300px; }
.chart-range-btns button { font-size: 0.6rem; padding: 0.25rem 0.35rem; }
}
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody tr.chart-active { background: var(--yellow-subtle); border-left: 2px solid var(--yellow); }
/* =========================================================
STANDARDISED PAGE HEADER
---------------------------------------------------------
Single source of truth for every page's title + subtitle
block. Every page uses the same markup:
No per-page overrides. No yellow eyebrows — the left-rail
nav already indicates which page the user is on. Yellow
is reserved for accents, active states, and data
highlights, never page titles.
Spacing contract:
• 32px between the top search bar and the page heading
• 8px between the page heading and the subtitle
• 40px between the subtitle and the page's main content
Typography contract (identical across every page):
• Title: Space Grotesk, 15px, 700, uppercase, 0.1em
tracking, #FFFFFF
• Subtitle: Mulish, 11px, regular, var(--text-muted)
========================================================= */
.page-header {
margin: 32px 0 40px 0;
}
.page-header .page-title {
font-family: 'Space Grotesk', 'Roboto Mono', sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #FFFFFF;
margin: 0;
}
.page-header .page-subtitle {
font-family: 'Mulish', 'Roboto Mono', sans-serif;
font-size: 11px;
font-weight: 400;
line-height: 1.6;
color: var(--text-muted);
margin: 8px 0 0 0;
}
/* =========================================================
HERO POSITIONING BLOCK (home page)
---------------------------------------------------------
Headline + descriptor that explains what Robotnik is.
Sits above the dashboard grid. On mobile it becomes the
first content element after the 1Q26 banner.
========================================================= */
.hero-block {
padding: 28px 1rem 28px;
max-width: 1400px;
margin: 0 auto;
}
.hero-headline {
font-family: var(--font);
font-size: 20px;
font-weight: 700;
line-height: 1.3;
color: var(--yellow);
letter-spacing: 0.01em;
margin: 0 0 0.5rem;
}
.hero-descriptor {
font-family: var(--font);
font-size: 13px;
font-weight: 400;
line-height: 1.6;
color: var(--text-dim);
margin: 0;
max-width: 880px;
}
@media (max-width: 768px) {
.hero-block {
padding: 20px 1rem 20px;
}
.hero-headline {
font-size: 17px;
}
.hero-descriptor {
font-size: 13px;
}
}
/* =========================================================
TOP BAR: hamburger button + mobile wordmark
---------------------------------------------------------
Hidden on desktop. Below 769px, the hamburger sits top-left
and the mobile-only wordmark anchors next to it.
========================================================= */
.nav-hamburger {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--text);
cursor: pointer;
margin-right: 0.25rem;
padding: 0;
flex-shrink: 0;
}
.nav-hamburger:hover { color: var(--yellow); }
.nav-hamburger:focus { outline: 1px solid var(--yellow); outline-offset: -1px; }
.top-bar-wordmark {
display: none;
font-family: var(--font);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--yellow);
text-decoration: none;
margin-right: 0.75rem;
flex-shrink: 0;
}
/* =========================================================
MOBILE NAV OVERLAY (hamburger menu)
---------------------------------------------------------
Hidden on desktop. When .is-open is set the panel slides in.
========================================================= */
.mobile-nav-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 500;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(6px);
}
.mobile-nav-overlay.is-open { display: block; }
.mobile-nav-panel {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 86%;
max-width: 320px;
background: #0D1117;
border-right: 1px solid #1E2330;
padding: 1rem 0;
display: flex;
flex-direction: column;
overflow-y: auto;
animation: mobileNavSlideIn 0.18s ease-out;
}
@keyframes mobileNavSlideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.mobile-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem 1rem;
border-bottom: 1px solid #1E2330;
margin-bottom: 0.75rem;
}
.mobile-nav-logo {
display: flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
}
.mobile-nav-logo-img {
width: 32px;
height: 32px;
border-radius: 6px;
object-fit: cover;
}
.mobile-nav-logo-text {
font-family: var(--font);
font-size: 14px;
font-weight: 700;
color: var(--yellow);
letter-spacing: 0.12em;
}
.mobile-nav-close {
width: 44px;
height: 44px;
background: transparent;
border: none;
color: var(--text-dim);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.mobile-nav-close:hover { color: var(--yellow); }
.mobile-nav-list {
display: flex;
flex-direction: column;
gap: 4px;
padding: 0 0.5rem;
flex: 1;
}
.mobile-nav-list .nav-item {
min-height: 44px;
font-size: 14px;
padding: 0.75rem 0.85rem;
/* Override the desktop sidebar's --text-dim baseline — mobile overlay
sits on a darker backdrop and inactive items need full contrast to
be legible. Specificity is raised with the overlay parent selector
so we beat the typography.css :not(.active) rule which would
otherwise win on cascade order. */
color: #e6e8ed;
}
/* Belt-and-suspenders: force the label to display + render at full
contrast inside the mobile overlay. The previous regression had
.nav-label getting display:none from an unscoped 900px rule, which
made labels invisible while the parent nav-item box kept its 44px
height — empty rectangles where text should be. !important is used
deliberately here per spec: cascade is fighting itself and the
correct rendering must ship. */
.mobile-nav-overlay .mobile-nav-list .nav-label { display: inline !important; }
.mobile-nav-overlay .mobile-nav-list .nav-item:not(.active) .nav-label { color: #e6e8ed !important; }
.mobile-nav-overlay .mobile-nav-list .nav-item.disabled,
.mobile-nav-overlay .mobile-nav-list .nav-item.disabled .nav-label { color: #8B92A5 !important; }
.mobile-nav-overlay .mobile-nav-list .nav-item.active .nav-label { color: var(--yellow) !important; }
.mobile-nav-tagline {
padding: 1rem;
border-top: 1px solid #1E2330;
margin-top: 1rem;
font-size: 11px;
line-height: 1.6;
color: var(--text-muted);
letter-spacing: 0.04em;
}
body.mobile-nav-locked { overflow: hidden; }
/* =========================================================
PERSISTENT SITE FOOTER (LinkedIn) — injected by js/nav.js
---------------------------------------------------------
Sits below main content on every live page. Two-row layout:
row 1 = wordmark + LinkedIn link; row 2 = copyright.
========================================================= */
.site-footer-global {
margin-left: 220px;
padding: 22px 1.5rem 26px;
border-top: 1px solid var(--border);
background: var(--bg);
position: relative;
z-index: 1;
font-family: var(--font);
color: var(--text-muted);
}
.site-footer-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 0.5rem;
}
.site-footer-wordmark {
font-family: var(--font);
font-size: 12px;
font-weight: 700;
color: var(--yellow);
letter-spacing: 0.12em;
text-decoration: none;
padding: 8px 0;
}
.site-footer-wordmark:hover { color: var(--yellow-dim); }
.site-footer-linkedin {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 10px 6px;
color: var(--text-muted);
text-decoration: none;
transition: color 0.15s;
min-height: 44px;
}
.site-footer-linkedin svg {
transition: color 0.15s;
}
.site-footer-linkedin:hover,
.site-footer-linkedin:focus {
color: var(--yellow);
}
.site-footer-linkedin-label {
font-family: var(--font);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
}
.site-footer-copyright {
font-family: var(--font);
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.02em;
}
/* =========================================================
SHARED MOBILE TABLE WRAP (horizontal scroll + sticky 1st col)
---------------------------------------------------------
Pattern A — wrapper provides horizontal overflow; the first
| / | in each row is sticky-pinned to the left edge.
Applied on home / funding / assets / report tables.
========================================================= */
.top-table-wrap,
.markets-table-wrap,
.report-table-wrap {
width: 100%;
}
.top-table-wrap table,
.markets-table-wrap table,
.report-table-wrap table {
width: 100%;
}
/* =========================================================
MOBILE BREAKPOINT (≤768px)
---------------------------------------------------------
Site is desktop-first; everything below collapses or scrolls
for usability on phones. Desktop layout above 769px stays
untouched except for the hero + footer additions.
========================================================= */
@media (max-width: 768px) {
/* Show hamburger + mobile wordmark. The desktop sidebar is
already collapsed to 60px by the existing .sidebar rule
in the @media (max-width: 900px) block, so we explicitly
hide it here to free up the full viewport width. */
.nav-hamburger { display: inline-flex; }
.top-bar-wordmark { display: inline-block; }
.sidebar { display: none; }
.top-bar {
left: 0;
padding: 0 0.75rem;
}
.main-content {
margin-left: 0;
padding-top: 48px;
}
.top-bar-left { max-width: none; flex: 1; min-width: 0; }
/* Prevent iOS auto-zoom on focus by ensuring 16px input size. */
.top-search {
font-size: 16px;
padding: 0.45rem 0.6rem;
min-height: 36px;
}
.search-dropdown {
max-width: calc(100vw - 1.5rem);
}
/* Dashboard layout — single column on mobile. The existing
1024px rule already does this; restated here for safety. */
.dash-layout {
grid-template-columns: 1fr;
padding: 0.5rem 0.75rem;
gap: 0.75rem;
}
.dash-sidebar-widgets {
gap: 0.75rem;
}
/* Tap targets — 44px min for primary interactive elements. */
.market-tab,
.intel-filter-btn,
.fbtn,
.btn-y,
.btn-ghost,
.chart-range-btn,
.chart-mode-tab,
.chart-index-btn,
.fund-tab,
.col-group-tab,
.time-btn {
min-height: 44px;
padding-top: 0.55rem;
padding-bottom: 0.55rem;
}
.nav-item { min-height: 44px; }
.top-search { min-height: 44px; }
/* Sub-indices stack to 2x2 already; cards readable. */
.sub-indices { grid-template-columns: repeat(2, 1fr); }
/* HOME: markets table — horizontal scroll, sticky first column. */
.markets-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 -0.5rem;
padding: 0 0.5rem;
}
.markets-table-wrap .market-table { min-width: 720px; }
.market-table td:first-child,
.market-table th:first-child {
position: sticky;
left: 0;
background: #161B22;
z-index: 1;
}
.market-table tr:hover td:first-child { background: var(--bg-hover); }
/* The legacy .dash-widget overflow rule from the older mobile
block creates a competing horizontal scroll around the
widget AND the inner table wrap. Disable per-widget overflow
so only the wrapper scrolls. */
.dash-widget { overflow-x: visible; }
/* FUNDING: top rounds table — same Pattern A treatment. */
.top-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.top-table-wrap .top-table { min-width: 560px; }
.top-table td:first-child,
.top-table th:first-child {
position: sticky;
left: 0;
background: #161B22;
z-index: 1;
}
.top-table tr:hover td:first-child { background: rgba(245,217,33,0.06); }
/* Funding trends chart container — let the chart use available width;
no explicit overflow needed since Chart.js handles canvas resize. */
.chart-box { padding: 0.75rem; }
/* Funding toolbar (time-window buttons) — make 4 buttons share a row
cleanly; if the toolbar wraps, each button still meets 44px. */
.fund-toolbar { justify-content: flex-start; }
.time-toggle { width: 100%; }
.time-btn { flex: 1; padding: 0.55rem 0.5rem; font-size: 11px; }
/* Stage distribution / investor bars — full width. */
.inv-name { width: 100px; }
.stage-label { width: 60px; }
/* ASSETS: full-bleed wrapper; the existing assets-table-wrap +
inner .assets-table-scroll already provides x-overflow. Just
ensure controls collapse cleanly and filters wrap. */
.assets-full {
padding: 0 0.75rem;
}
.assets-table-wrap {
margin: 0 -0.75rem;
border-left: none;
border-right: none;
border-radius: 0;
}
/* Frozen columns (f0/f1/f2) already use position: sticky in
the per-page CSS; nothing extra needed. */
/* Filter controls collapse into an expandable block on mobile.
This rule only takes effect if a wraps the controls;
since the existing markup uses flex containers, add a fallback
that just allows them to wrap naturally with proper gaps. */
.market-tabs {
flex-wrap: wrap;
gap: 4px;
}
/* REPORT: ensure all tables in the report page horizontal-scroll. */
.report-page table {
min-width: 540px;
}
.report-page .report-table-wrap,
.report-page :where(div:has(> table)) {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.report-page img,
.report-page canvas,
.report-page svg {
max-width: 100%;
height: auto;
}
.report-page {
padding: 0 0.75rem;
}
/* Persistent footer — drop the desktop sidebar offset. */
.site-footer-global {
margin-left: 0;
padding: 18px 1rem 22px;
}
.site-footer-row {
gap: 0.5rem;
}
.site-footer-linkedin-label { font-size: 12px; }
/* Hide page-injected hero block at smaller text sizes but keep readable. */
.hero-block { padding-left: 0.75rem; padding-right: 0.75rem; }
/* Page header tightens up. */
.page-header { margin: 20px 0 16px 0; }
/* Funding metrics grid: existing rules already cover. Stage and
investors sub-widgets fall through naturally. */
}
/* Mobile portrait — extra-tight tweaks below 480px. */
@media (max-width: 480px) {
.hero-headline { font-size: 16px; }
.hero-descriptor { font-size: 12px; }
.market-tabs { gap: 4px; }
.time-btn { font-size: 11px; padding: 0.6rem 0.4rem; }
.top-bar { height: 52px; }
.main-content { padding-top: 52px; }
.top-bar-wordmark { font-size: 12px; }
.site-footer-wordmark { font-size: 12px; }
.site-footer-copyright { font-size: 11px; }
.site-footer-row { flex-direction: row; align-items: center; }
/* Sector cards collapse to single column at portrait widths to
prevent the 340px-wide card from clipping on narrow viewports. */
.sub-indices { grid-template-columns: 1fr; }
.sub-index-card { min-width: 0; }
/* Funding metrics grid: single column already configured upstream;
reinforce the no-min-width so tiles can shrink with viewport. */
.metric-card { min-width: 0; }
/* Top-bar wordmark gets tight at 375px; hide it and let the
hamburger + search carry the bar. The full ROBOTNIK identity
is already in the mobile nav overlay. */
.top-bar-wordmark { display: none; }
}
/* =========================================================
RECREATION BAY — mobile placeholder
---------------------------------------------------------
The Tetris game is unplayable on touch. js/nav.js adds the
placeholder card and sets body.recreation-mobile; we hide
the rest of the desktop layout below the breakpoint.
========================================================= */
.recreation-mobile-placeholder {
display: none;
}
@media (max-width: 768px) {
body.recreation-mobile .recreation-layout,
body.recreation-mobile .leaderboard-section,
body.recreation-mobile .boot-header,
body.recreation-mobile .mission-briefing {
display: none !important;
}
.recreation-mobile-placeholder {
display: block;
max-width: 480px;
margin: 2rem auto;
padding: 1.25rem 1rem;
}
.rmp-card {
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.5rem 1.25rem;
text-align: center;
}
.rmp-eyebrow {
font-family: var(--font);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--yellow);
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.rmp-title {
font-family: var(--font);
font-size: 16px;
font-weight: 700;
color: var(--text);
margin-bottom: 0.75rem;
line-height: 1.4;
}
.rmp-body {
font-family: var(--font);
font-size: 13px;
color: var(--text-dim);
line-height: 1.6;
}
}
|