/* ============================================================================ osintelite Marketplace — "INTELLIGENCE CONSOLE" design system Single source of truth: dark-first, hairline borders, two accents (cyan SIGNAL + emerald TRUST), monospace for all technical data. No build step. Works from file:// and any static server. ========================================================================== */ /* --------------------------------------------------------------------------- 1. TOKENS --------------------------------------------------------------------------- */ :root { /* Surfaces / structure */ --bg-base: #0A0C0E; --bg-sunken: #07090B; --bg-raised: #12161A; --bg-raised-2: #181D22; --border-hairline: #1F262C; --border-strong: #2B343C; /* Text */ --text-primary: #E4E9ED; --text-secondary: #A6B2BC; --text-muted: #7C8A95; --text-inverse: #07090B; /* Signal — CYAN (interactive, brand, active) */ --signal: #38BDF8; --signal-hover: #5ECEF9; --signal-press: #1FA8E6; --signal-dim: #1C3A47; --signal-glow: rgba(56, 189, 248, 0.14); /* Trust — EMERALD (verification ONLY) */ --trust: #2DD4A7; --trust-dim: #123A32; --trust-text: #5FE3C0; --trust-glow: rgba(45, 212, 167, 0.16); /* Themed surface effects (overridden by the light theme) */ color-scheme: dark; --grid-line: rgba(122, 162, 188, 0.045); --aura-1: rgba(56, 189, 248, 0.14); --aura-2: rgba(45, 212, 167, 0.05); --top-highlight: rgba(255, 255, 255, 0.022); --top-highlight-hover: rgba(255, 255, 255, 0.05); --card-shadow: none; --card-hover-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.78); --card-hover-glow: rgba(56, 189, 248, 0.30); --signal-glow-strong: rgba(56, 189, 248, 0.22); --nav-bg: rgba(9, 11, 13, 0.9); --nav-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); --menu-shadow: 0 18px 48px -18px rgba(0, 0, 0, 0.85); --scroll-hover: #3A454E; /* Status / semantic */ --status-ok: #2DD4A7; --status-warn: #F5B544; --status-down: #FF5C57; --status-idle: #7C8A95; /* HTTP method colors */ --m-get: #38BDF8; --m-post: #2DD4A7; --m-put: #F5B544; --m-patch: #A78BFA; --m-delete: #FF5C57; /* Fonts */ /* Brand: exactly two loaded web fonts (Exo 2 display + IBM Plex Sans body), matching the other osintelite sites. Technical data uses the OS monospace (no third web font), same pattern as map-poc-api. */ --font-display: "Exo 2", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Liberation Mono", monospace; /* Radius — keep tight, "instrument" not "bubbly" */ --r-chip: 4px; --r-btn: 6px; --r-card: 8px; --r-pill: 999px; /* Spacing base unit 4px */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Layout */ --container: 1200px; --nav-h: 60px; } /* --------------------------------------------------------------------------- 1b. LIGHT THEME — the DEFAULT (set via ). Token overrides only; the dark palette stays in :root for the toggle. --------------------------------------------------------------------------- */ [data-theme="light"] { color-scheme: light; --bg-base: #F7F9FB; --bg-sunken: #EEF2F6; --bg-raised: #FFFFFF; --bg-raised-2: #F2F6FA; --border-hairline: #E4E9EF; --border-strong: #CBD3DC; --text-primary: #0E1726; --text-secondary: #45525F; --text-muted: #6B7785; --text-inverse: #FFFFFF; --signal: #0284C7; --signal-hover: #0369A1; --signal-press: #075985; --signal-dim: #DCEEFA; --signal-glow: rgba(2, 132, 199, 0.16); --trust: #059669; --trust-dim: #D6F1E5; --trust-text: #047857; --trust-glow: rgba(5, 150, 105, 0.18); --status-ok: #059669; --status-warn: #B45309; --status-down: #DC2626; --status-idle: #94A3B8; --m-get: #0284C7; --m-post: #059669; --m-put: #B45309; --m-patch: #7C3AED; --m-delete: #DC2626; --grid-line: rgba(30, 58, 95, 0.05); --aura-1: rgba(2, 132, 199, 0.07); --aura-2: rgba(5, 150, 105, 0.05); --top-highlight: transparent; --top-highlight-hover: transparent; --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06); --card-hover-shadow: 0 14px 30px -14px rgba(16, 24, 40, 0.18); --card-hover-glow: rgba(2, 132, 199, 0.18); --signal-glow-strong: rgba(2, 132, 199, 0.14); --nav-bg: rgba(255, 255, 255, 0.82); --nav-shadow: 0 1px 0 rgba(16, 24, 40, 0.06); --menu-shadow: 0 18px 48px -18px rgba(16, 24, 40, 0.28); --scroll-hover: #B6C0CB; } /* --------------------------------------------------------------------------- 2. RESET / BASE --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg-base); color: var(--text-primary); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } /* Recon lattice — faint hairline grid, masked to fade out toward the fold */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 64px 64px; background-position: -1px -1px; -webkit-mask-image: radial-gradient(125% 80% at 50% -12%, #000 0%, rgba(0,0,0,0.35) 46%, transparent 82%); mask-image: radial-gradient(125% 80% at 50% -12%, #000 0%, rgba(0,0,0,0.35) 46%, transparent 82%); } /* Atmosphere — twin signal/trust auras bleeding from the top edge for depth */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(840px 460px at 82% -14%, var(--aura-1), transparent 60%), radial-gradient(700px 480px at 1% -6%, var(--aura-2), transparent 55%); } img, svg { display: block; max-width: 100%; } svg { fill: none; } a { color: var(--signal); text-decoration: none; transition: color 0.14s ease; } a:hover { color: var(--signal-hover); } button { font: inherit; color: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: var(--r-chip); } ::selection { background: var(--signal-dim); color: var(--text-primary); } /* Instrument-grade thin scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid var(--bg-base); } ::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); } ::-webkit-scrollbar-track { background: transparent; } /* Page-load orchestration — nav drops in, content rises in a short stagger. Disabled wholesale by the prefers-reduced-motion block at the end of file. */ @keyframes oe-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes oe-navdrop { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } } main > * { animation: oe-rise 0.5s cubic-bezier(0.2, 0.6, 0.2, 1) both; } main > *:nth-child(1) { animation-delay: 0.04s; } main > *:nth-child(2) { animation-delay: 0.10s; } main > *:nth-child(3) { animation-delay: 0.16s; } main > *:nth-child(4) { animation-delay: 0.22s; } main > *:nth-child(5) { animation-delay: 0.28s; } main > *:nth-child(n+6) { animation-delay: 0.32s; } hr { border: 0; border-top: 1px solid var(--border-hairline); margin: var(--sp-6) 0; } /* --------------------------------------------------------------------------- 3. TYPOGRAPHY SCALE (modular 1.25) --------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-primary); margin: 0 0 var(--sp-3); font-weight: 600; } .display-xl { font: 800 clamp(32px, 5.2vw, 44px)/1.06 var(--font-display); letter-spacing: -0.03em; } .display-lg, h1 { font: 700 31px/38px var(--font-display); letter-spacing: -0.015em; } .heading, h2 { font: 600 25px/32px var(--font-display); letter-spacing: -0.01em; } .subheading, h3 { font: 600 20px/28px var(--font-display); letter-spacing: -0.005em; } h4 { font: 600 16px/24px var(--font-display); letter-spacing: -0.005em; } p { margin: 0 0 var(--sp-4); } .body-lg { font: 400 16px/26px var(--font-body); } .body { font: 400 16px/24px var(--font-body); } .body-sm { font: 400 13px/20px var(--font-body); } .lead { font: 400 16px/26px var(--font-body); color: var(--text-secondary); } .eyebrow { font: 600 12px/16px var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); display: inline-block; } /* Mono runs one step down for density */ .mono { font-family: var(--font-mono); } .mono-data { font: 400 13px/20px var(--font-mono); } .mono-sm { font: 500 12px/16px var(--font-mono); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-signal { color: var(--signal); } .text-trust { color: var(--trust-text); } .text-warn { color: var(--status-warn); } .text-down { color: var(--status-down); } .unit { color: var(--text-muted); } /* --------------------------------------------------------------------------- 4. LAYOUT PRIMITIVES --------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--sp-6); padding-right: var(--sp-6); } .container-narrow { max-width: 880px; } /* Vertical rhythm — intentional alternating cadence so sections feel paced, not arbitrary. Odd sections: var(--sp-12) top+bottom. Even sections: a tighter var(--sp-10) top with a deeper var(--sp-16) bottom to open breathing room before the next band. Hero + stats-band set their own padding in the page-local