leviathan/SKELETONKEY
1
0
Fork 0
Code Issues Pull Requests Actions 21 Packages Projects Releases Wiki Activity
Files
2c131df1bf837c39ec0f62b7c7ed87835c469de4
SKELETONKEY/docs/style.css
T
leviathan 5071ad4ba9 site: marketing-grade redesign with --explain showcase + animated hero 
Full rewrite of docs/index.html + style.css + new app.js + OG card.

Hero
  - Animated gradient mesh background (3 drifting blurred blobs;
    respects prefers-reduced-motion).
  - Space Grotesk display wordmark with subtle white→gray gradient.
  - Eyebrow chip with pulsing dot showing current release.
  - Type-on-load install command with blinking cursor in a faux-terminal
    chrome (traffic-light dots, title bar, copy button).
  - Stats row that counts up from 0 on first paint: 31 modules, 10 KEV,
    119 detection rules, 88 tests.
  - Primary CTA + secondary 'See --explain in action' + GitHub link.

Trust strip
  - 'Grounded in authoritative sources' row: CISA KEV, NVD CVE API,
    MITRE ATT&CK, kernel.org stable tree, Debian Security Tracker,
    NIST CWE. Establishes the federal-data-source provenance.

--explain showcase (flagship section)
  - Big terminal mockup that types out a real --explain nf_tables run
    line-by-line on scroll-into-view (45-95ms per line, easing).
  - Four annotation cards explaining each part: triage metadata,
    host fingerprint, detect() trace, OPSEC footprint.

Bento grid (8 feature cards in a varied 3-col layout)
  - Auto-pick safest exploit (large card with code sample)
  - 119 detection rules (with animated per-format coverage bars)
  - CISA KEV prioritized (red-accented)
  - OPSEC notes per exploit
  - One host fingerprint, every module (large card with struct excerpt)
  - JSON for pipelines
  - No SaaS, no telemetry
  - Verifier ready (Vagrant + Parallels)

Module corpus
  - Same green/yellow split as before, but every KEV-listed module pill
    now carries a ★ prefix + red-tinted border so 'actively exploited
    in the wild' is visible at a glance.

Audience
  - 4 colored cards (red/blue/gray/purple) — pentesters, SOC, sysadmins,
    researchers — each with a deep link to the right doc.

Verified-vs-claimed honesty callout
  - Featured gradient-bordered card restating the no-fabricated-offsets
    bar. ✓ icon, project's defining trust claim.

Quickstart
  - Tabbed: install / scan / explain / auto / detect-rules. Each tab is
    a short, copy-ready snippet with inline comments.

Roadmap timeline
  - Three columns: shipped / in flight / next. Shipped lists every
    feature from the last several sessions (--explain, OPSEC, CWE/
    ATT&CK/KEV pipeline, 119 rules, host refactor, 88 tests, drift
    detector, VM scaffold). Next lists arm64 musl, mass-fleet
    aggregator, SIEM query templates, CI hardening.

Footer
  - Four-column gradient footer (Brand / Project / Docs / Ethics) +
    bottom bar with credits to original PoC authors + license + repo
    link.

Tech
  - Typography: Inter (UI) + JetBrains Mono (code) + Space Grotesk
    (display wordmark), all via Google Fonts with display=swap.
  - Palette: deep purple-tinted dark (#07070d) + emerald accent
    (#10b981) + cyan secondary (#06b6d4) + KEV-red (#ef4444) +
    violet (#a855f7) for threat-intel framing.
  - CSS: ~28KB unminified, custom-properties driven; gracefully
    degrades to single-column on every grid section at narrow widths.
  - JS: ~8KB vanilla, no frameworks. Respects prefers-reduced-motion
    everywhere. IntersectionObserver-driven scroll reveal and
    stat-count-up.
  - OG image: hand-authored SVG → rsvg-convert → 1200x630 PNG
    (121KB). Renders cleanly when shared on Twitter/LinkedIn/Slack.
  - 4 new files: app.js, og.svg, og.png; rewrites: index.html, style.css.

Refreshed content:
  - v0.5.0 → v0.6.0 throughout.
  - '28 verified modules' → 31.
  - Adds KEV cross-ref, --explain, OPSEC, ATT&CK/CWE callouts that
    didn't exist in the previous version.

HTML structure validated balanced (Python html.parser smoke test).
2026-05-23 11:42:56 -04:00

1028 lines
27 KiB
CSS
Raw Blame History

/* ============================================================
SKELETONKEY — landing page · marketing-grade redesign · v0.6.0
palette: deep purple-tinted dark + emerald + KEV-red accents
fonts: Inter · JetBrains Mono · Space Grotesk display
============================================================ */
* { box-sizing: border-box; }
:root {
/* surfaces */
--bg: #07070d;
--bg-2: #0c0c16;
--bg-3: #12121f;
--surface: #161628;
--surface-2: #1a1a30;
--border: #25253c;
--border-soft: #1c1c2d;
/* text */
--text: #ecedf7;
--text-soft: #c5c5d3;
--text-muted: #8a8a9d;
--text-dim: #5b5b75;
/* accents */
--accent: #10b981; /* emerald — primary, "ok/safe" */
--accent-2: #06b6d4; /* cyan — primary gradient pair */
--accent-hot: #34d399; /* lighter emerald, hover/glow */
--warning: #f59e0b; /* amber — yellow modules */
--danger: #ef4444; /* red — KEV/active exploit */
--violet: #a855f7; /* violet — threat-intel accent */
--blue: #60a5fa; /* blue — links */
/* gradients */
--grad-brand: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
--grad-kev: linear-gradient(135deg, #ef4444 0%, #f59e0b 100%);
--grad-bg: radial-gradient(ellipse at top, rgba(16, 185, 129, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at bottom right, rgba(168, 85, 247, 0.05) 0%, transparent 50%);
/* type */
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--display: "Space Grotesk", "Inter", -apple-system, sans-serif;
/* layout */
--maxw: 1180px;
--radius: 12px;
--radius-sm: 8px;
--radius-lg: 18px;
--shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.6);
--shadow-hi: 0 20px 60px -10px rgba(16, 185, 129, 0.15), 0 10px 30px -10px rgba(0, 0, 0, 0.6);
}
html, body {
margin: 0; padding: 0;
background: var(--bg);
color: var(--text-soft);
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
a { color: var(--accent-hot); text-decoration: none; transition: color .15s ease; }
a:hover { color: #fff; }
code, pre { font-family: var(--mono); font-size: 0.93em; }
:not(pre) > code {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: 4px;
padding: 0.08em 0.42em;
color: var(--accent-hot);
font-size: 0.86em;
}
.container {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 1.5rem;
}
/* ============================================================
ANIMATED GRADIENT MESH BACKGROUND (fixed, behind content)
============================================================ */
.bg-mesh {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
background:
var(--grad-bg),
var(--bg);
}
.mesh-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.4;
animation: drift 30s ease-in-out infinite alternate;
}
.mesh-blob-1 {
width: 580px; height: 580px;
background: radial-gradient(circle, rgba(16, 185, 129, 0.5), transparent 70%);
top: -150px; left: -150px;
animation-duration: 28s;
}
.mesh-blob-2 {
width: 480px; height: 480px;
background: radial-gradient(circle, rgba(6, 182, 212, 0.4), transparent 70%);
top: 200px; right: -120px;
animation-duration: 34s; animation-delay: -10s;
}
.mesh-blob-3 {
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(168, 85, 247, 0.3), transparent 70%);
top: 700px; left: 40%;
animation-duration: 40s; animation-delay: -18s;
}
@keyframes drift {
0% { transform: translate3d(0, 0, 0) rotate(0deg); }
50% { transform: translate3d(80px, -40px, 0) rotate(120deg); }
100% { transform: translate3d(-60px, 80px, 0) rotate(240deg); }
}
@media (prefers-reduced-motion: reduce) {
.mesh-blob { animation: none; }
}
/* ============================================================
TOP NAV
============================================================ */
.nav {
position: sticky; top: 0; z-index: 50;
padding: 0.85rem 0;
background: rgba(7, 7, 13, 0.72);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
border-bottom: 1px solid var(--border-soft);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-brand {
font-family: var(--mono);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.06em;
color: var(--text);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.nav-brand:hover { color: #fff; }
.nav-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
font-size: 1rem;
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.nav-links {
display: flex;
align-items: center;
gap: 1.5rem;
}
.nav-links a {
font-size: 0.93rem;
color: var(--text-muted);
transition: color .15s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-github {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-muted);
}
.nav-github:hover {
color: var(--text);
border-color: var(--accent);
}
@media (max-width: 720px) {
.nav-links a:not(.nav-github) { display: none; }
}
/* ============================================================
HERO
============================================================ */
.hero {
padding: 5.5rem 0 5rem;
text-align: center;
position: relative;
}
.hero-inner { max-width: 880px; margin: 0 auto; }
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(16, 185, 129, 0.08);
border: 1px solid rgba(16, 185, 129, 0.3);
color: var(--accent-hot);
font-family: var(--mono);
font-size: 0.8rem;
padding: 0.35rem 0.9rem;
border-radius: 999px;
margin-bottom: 1.5rem;
}
.dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent-hot);
}
.dot-pulse { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); animation: pulse 2s infinite; }
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.hero-title {
margin: 0 0 1.25rem;
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
}
.display-wordmark {
font-family: var(--display);
font-size: clamp(3rem, 11vw, 6.5rem);
background: linear-gradient(180deg, #fff 0%, #c5c5d3 80%, #8a8a9d 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
}
.hero-tag {
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
color: var(--text-soft);
margin: 0 auto 2.25rem;
max-width: 720px;
}
.hero-tag strong { color: #fff; }
.hero-tag-pop {
display: inline-block;
margin-top: 0.5rem;
padding: 0.2rem 0.6rem;
background: rgba(168, 85, 247, 0.1);
border-left: 2px solid var(--violet);
color: #d8b4fe;
font-family: var(--mono);
font-size: 0.85em;
}
.install-block {
background: linear-gradient(180deg, rgba(22, 22, 40, 0.95) 0%, rgba(18, 18, 31, 0.95) 100%);
border: 1px solid var(--border);
border-radius: var(--radius);
margin: 0 auto 1.75rem;
max-width: 760px;
text-align: left;
position: relative;
box-shadow: var(--shadow);
overflow: hidden;
}
.install-bar {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0.9rem;
background: rgba(0, 0, 0, 0.3);
border-bottom: 1px solid var(--border);
}
.install-dots { display: inline-flex; gap: 0.4rem; }
.install-dots i {
width: 11px; height: 11px;
border-radius: 50%;
background: var(--surface-2);
display: block;
}
.install-dots i:nth-child(1) { background: #ff5f57; }
.install-dots i:nth-child(2) { background: #febc2e; }
.install-dots i:nth-child(3) { background: #28c840; }
.install-title {
flex: 1; text-align: center;
font-family: var(--mono); font-size: 0.78rem;
color: var(--text-dim); letter-spacing: 0.04em;
}
.install-block pre {
margin: 0;
padding: 1rem 1.2rem;
color: var(--text);
white-space: pre-wrap;
word-break: break-all;
font-size: 0.92rem;
min-height: 2.5rem;
}
.install-block .prompt { color: var(--accent-hot); user-select: none; }
.cursor { color: var(--accent-hot); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.install-block .copy {
position: absolute; top: 0.5rem; right: 0.6rem;
background: rgba(0, 0, 0, 0.4);
border: 1px solid var(--border);
color: var(--text-muted);
font-family: var(--mono);
font-size: 0.72rem; padding: 0.25rem 0.55rem;
border-radius: 4px;
cursor: pointer;
transition: all .15s ease;
}
.install-block .copy:hover { color: var(--accent-hot); border-color: var(--accent); }
.install-block .copy.copied { color: var(--accent-hot); border-color: var(--accent); }
.stats-row {
display: flex; flex-wrap: wrap;
gap: 0.6rem; justify-content: center;
margin: 0 0 2rem;
}
.stat-chip {
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.5rem 1.1rem;
font-size: 0.88rem;
color: var(--text-muted);
}
.stat-chip .num {
font-family: var(--mono);
font-weight: 700;
color: var(--text);
font-size: 1.05rem;
font-variant-numeric: tabular-nums;
}
.stat-chip.stat-kev { border-color: rgba(239, 68, 68, 0.3); }
.stat-chip.stat-kev .num { color: var(--danger); }
.cta-row {
display: flex; gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.7rem 1.3rem;
border-radius: var(--radius-sm);
font-family: var(--sans);
font-size: 0.95rem;
font-weight: 500;
border: 1px solid var(--border);
color: var(--text);
background: var(--surface);
cursor: pointer;
transition: all .2s ease;
}
.btn:hover {
background: var(--surface-2);
border-color: var(--text-muted);
color: #fff;
text-decoration: none;
transform: translateY(-1px);
}
.btn-primary {
background: var(--grad-brand);
border-color: transparent;
color: #04201a;
font-weight: 600;
box-shadow: 0 6px 20px -6px rgba(16, 185, 129, 0.5);
}
.btn-primary:hover {
filter: brightness(1.1);
color: #04201a;
transform: translateY(-1px);
box-shadow: 0 10px 30px -6px rgba(16, 185, 129, 0.6);
}
.btn-ghost { background: transparent; }
.btn code { background: transparent; border: none; color: inherit; padding: 0; }
.hero-warn {
margin-top: 1.75rem;
font-size: 0.83rem;
color: var(--text-dim);
}
.hero-warn a { color: var(--text-muted); border-bottom: 1px dotted var(--text-dim); }
/* ============================================================
TRUST STRIP
============================================================ */
.trust-strip {
padding: 2rem 0;
background: rgba(0, 0, 0, 0.3);
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
}
.trust-row {
display: flex; align-items: center;
gap: 1.5rem; flex-wrap: wrap;
justify-content: center;
}
.trust-label {
font-size: 0.78rem;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 500;
}
.trust-items {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap;
gap: 0.5rem 1.5rem;
}
.trust-items li {
font-family: var(--mono);
font-size: 0.83rem;
color: var(--text-soft);
letter-spacing: 0.02em;
}
/* ============================================================
SECTIONS (common)
============================================================ */
.section { padding: 6rem 0; position: relative; }
.section-head { margin-bottom: 3rem; max-width: 760px; }
.section-head h2 {
font-family: var(--display);
font-size: clamp(1.9rem, 4vw, 2.6rem);
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0.5rem 0 1rem;
color: var(--text);
font-weight: 700;
}
.section-head .lead {
color: var(--text-soft);
font-size: 1.05rem;
margin: 0;
max-width: 680px;
}
.section-tag {
display: inline-block;
font-family: var(--mono);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent-hot);
padding: 0.3rem 0.7rem;
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: 999px;
margin-bottom: 0.75rem;
}
/* scroll reveal */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .8s ease, transform .8s ease;
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
/* ============================================================
--EXPLAIN SHOWCASE
============================================================ */
.section-feature {
background:
radial-gradient(ellipse at top left, rgba(16, 185, 129, 0.06), transparent 50%),
var(--bg-2);
border-top: 1px solid var(--border-soft);
}
.terminal-shell {
background: #0a0a14;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-hi);
margin: 0 auto 2.5rem;
max-width: 920px;
}
.terminal-bar {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0.9rem;
background: rgba(0, 0, 0, 0.5);
border-bottom: 1px solid var(--border);
}
.terminal-body {
margin: 0;
padding: 1.5rem 1.75rem;
color: var(--text);
font-family: var(--mono);
font-size: 0.85rem;
line-height: 1.55;
white-space: pre-wrap;
min-height: 550px;
}
/* color classes that terminal output uses */
.t-header { color: var(--accent-hot); }
.t-rule { color: var(--border); }
.t-mod { color: #fff; font-weight: 700; }
.t-cve { color: var(--violet); }
.t-summary { color: var(--text-soft); }
.t-label { color: var(--text-dim); }
.t-cwe { color: var(--accent); }
.t-tech { color: var(--accent-2); }
.t-kev-yes { color: var(--danger); font-weight: 700; }
.t-vuln { color: var(--warning); font-weight: 700; }
.t-ok { color: var(--accent); font-weight: 700; }
.t-i { color: var(--text-muted); }
.t-plus { color: var(--accent-hot); }
.t-check { color: var(--accent); }
.t-dot { color: var(--text-dim); }
.explain-annotations {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
max-width: 920px;
margin: 0 auto;
}
.annotation {
display: flex;
gap: 0.85rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.1rem 1.2rem;
transition: border-color .2s ease, transform .2s ease;
}
.annotation:hover {
border-color: var(--accent);
transform: translateY(-2px);
}
.anno-num {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--grad-brand);
color: #04201a;
font-weight: 700;
font-family: var(--mono);
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem;
}
.annotation strong { color: var(--text); display: block; margin-bottom: 0.25rem; }
.annotation p { margin: 0; color: var(--text-muted); font-size: 0.9rem; }
@media (max-width: 700px) {
.explain-annotations { grid-template-columns: 1fr; }
.terminal-body { font-size: 0.78rem; padding: 1rem 1.1rem; }
}
/* ============================================================
BENTO GRID
============================================================ */
.section-bento {
background:
radial-gradient(ellipse at bottom right, rgba(168, 85, 247, 0.05), transparent 60%);
}
.bento {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(220px, auto);
gap: 1.25rem;
}
.bento-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem 1.6rem;
position: relative;
overflow: hidden;
transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.bento-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), transparent 50%);
opacity: 0;
transition: opacity .25s ease;
pointer-events: none;
}
.bento-card:hover {
border-color: var(--accent);
transform: translateY(-3px);
box-shadow: var(--shadow-hi);
}
.bento-card:hover::before { opacity: 1; }
.bento-lg { grid-column: span 2; }
.bento-icon {
font-size: 1.5rem;
margin-bottom: 0.6rem;
display: inline-block;
width: 38px; height: 38px;
border-radius: var(--radius-sm);
background: var(--surface-2);
display: flex; align-items: center; justify-content: center;
}
.bento-card h3 {
font-family: var(--display);
font-size: 1.2rem;
margin: 0 0 0.5rem;
color: var(--text);
font-weight: 600;
}
.bento-card p {
color: var(--text-muted);
font-size: 0.93rem;
margin: 0 0 0.75rem;
}
.bento-card.bento-kev { border-color: rgba(239, 68, 68, 0.3); }
.bento-card.bento-kev .bento-icon { color: var(--danger); background: rgba(239, 68, 68, 0.1); }
.bento-card.bento-kev:hover { border-color: var(--danger); box-shadow: 0 20px 60px -10px rgba(239, 68, 68, 0.2); }
.bento-code {
background: var(--bg-2);
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
padding: 0.75rem 0.9rem;
font-size: 0.78rem;
color: var(--text-soft);
margin: 0.75rem 0 0;
white-space: pre;
overflow-x: auto;
}
.rule-cov { display: flex; flex-direction: column; gap: 0.5rem; }
.rule-row {
display: grid;
grid-template-columns: 60px 1fr 50px;
align-items: center;
gap: 0.6rem;
font-family: var(--mono);
font-size: 0.78rem;
}
.rule-row span:first-child { color: var(--text-muted); }
.rule-row span:last-child { color: var(--text); text-align: right; }
.rule-bar {
height: 6px;
background: var(--bg-2);
border-radius: 3px;
overflow: hidden;
display: block;
}
.rule-bar i {
display: block;
height: 100%;
background: var(--grad-brand);
border-radius: 3px;
transition: width 1.2s cubic-bezier(.4, 0, .2, 1);
}
@media (max-width: 920px) {
.bento { grid-template-columns: repeat(2, 1fr); }
.bento-lg { grid-column: span 2; }
}
@media (max-width: 620px) {
.bento { grid-template-columns: 1fr; }
.bento-lg { grid-column: span 1; }
}
/* ============================================================
MODULE CORPUS PILLS
============================================================ */
.corpus-h {
font-family: var(--display);
font-size: 1.15rem;
margin: 2rem 0 0.5rem;
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 600;
flex-wrap: wrap;
}
.corpus-h-sub {
font-family: var(--sans);
font-weight: 400;
font-size: 0.85rem;
color: var(--text-muted);
margin-left: auto;
}
.corpus-dot {
width: 10px; height: 10px;
border-radius: 50%;
display: inline-block;
}
.corpus-dot.green { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.corpus-dot.yellow { background: var(--warning); box-shadow: 0 0 12px var(--warning); }
.pills {
display: flex; flex-wrap: wrap;
gap: 0.45rem;
margin: 0.75rem 0 1.5rem;
}
.pill {
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-size: 0.83rem;
padding: 0.3rem 0.7rem;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-soft);
transition: all .15s ease;
}
.pill:hover {
transform: translateY(-1px);
border-color: var(--text-muted);
color: #fff;
}
.pill.green {
border-color: rgba(16, 185, 129, 0.3);
color: var(--accent-hot);
background: rgba(16, 185, 129, 0.05);
}
.pill.green:hover { border-color: var(--accent); }
.pill.yellow {
border-color: rgba(245, 158, 11, 0.3);
color: var(--warning);
background: rgba(245, 158, 11, 0.05);
}
.pill.yellow:hover { border-color: var(--warning); }
.pill.kev {
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.4);
font-weight: 600;
}
.pill.kev.green { color: var(--accent-hot); }
.pill.kev.yellow { color: var(--warning); }
.pill.kev:hover { border-color: var(--danger); }
.corpus-foot {
margin-top: 1.5rem;
font-size: 0.88rem;
color: var(--text-muted);
}
/* ============================================================
AUDIENCE
============================================================ */
.section-audience {
background:
radial-gradient(ellipse at top right, rgba(96, 165, 250, 0.04), transparent 50%);
border-top: 1px solid var(--border-soft);
}
.audience-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.audience-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem 1.6rem;
display: flex;
flex-direction: column;
transition: all .25s ease;
}
.audience-card:hover {
transform: translateY(-3px);
border-color: currentColor;
box-shadow: var(--shadow);
}
.audience-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.audience-card h3 {
font-family: var(--display);
font-size: 1.2rem;
margin: 0 0 0.5rem;
color: var(--text);
font-weight: 600;
}
.audience-card p { color: var(--text-muted); font-size: 0.93rem; margin: 0 0 1.25rem; }
.audience-link {
margin-top: auto;
align-self: flex-start;
font-family: var(--mono);
font-size: 0.83rem;
padding: 0.45rem 0.85rem;
border: 1px solid currentColor;
border-radius: var(--radius-sm);
}
.audience-red { color: #f87171; }
.audience-red .audience-link { color: #f87171; }
.audience-blue { color: #60a5fa; }
.audience-blue .audience-link { color: #60a5fa; }
.audience-gray { color: var(--text-muted); }
.audience-gray .audience-link { color: var(--text-muted); }
.audience-purple { color: var(--violet); }
.audience-purple .audience-link { color: var(--violet); }
@media (max-width: 700px) { .audience-grid { grid-template-columns: 1fr; } }
/* ============================================================
HONESTY CALLOUT
============================================================ */
.section-callout {
padding: 4rem 0;
}
.callout {
background:
linear-gradient(135deg, rgba(16, 185, 129, 0.07), rgba(6, 182, 212, 0.04)),
var(--surface);
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: var(--radius-lg);
padding: 2rem 2.25rem;
display: flex;
gap: 1.5rem;
align-items: flex-start;
box-shadow: 0 20px 50px -20px rgba(16, 185, 129, 0.2);
}
.callout-mark {
width: 48px; height: 48px;
border-radius: 50%;
background: var(--grad-brand);
color: #04201a;
font-size: 1.3rem;
font-weight: 800;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.callout h3 {
font-family: var(--display);
font-size: 1.3rem;
margin: 0 0 0.5rem;
color: var(--text);
font-weight: 700;
}
.callout p {
color: var(--text-soft);
margin: 0;
font-size: 0.96rem;
}
.callout strong { color: var(--accent-hot); }
@media (max-width: 600px) {
.callout { flex-direction: column; gap: 1rem; padding: 1.5rem; }
}
/* ============================================================
QUICKSTART TABS
============================================================ */
.tabs {
display: flex; gap: 0.4rem;
margin: 0 0 1rem;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.tab {
background: transparent;
border: none;
font-family: var(--mono);
font-size: 0.9rem;
color: var(--text-muted);
padding: 0.7rem 1.1rem;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: all .15s ease;
}
.tab:hover { color: var(--text); }
.tab.active {
color: var(--accent-hot);
border-bottom-color: var(--accent);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
pre.code {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.1rem 1.3rem;
overflow-x: auto;
font-size: 0.88rem;
line-height: 1.6;
color: var(--text);
margin: 0;
}
pre.code .cmt { color: var(--text-dim); font-style: italic; }
pre.code .prompt { color: var(--accent-hot); user-select: none; }
/* ============================================================
TIMELINE / ROADMAP
============================================================ */
.section-timeline {
background:
radial-gradient(ellipse at center, rgba(168, 85, 247, 0.03), transparent 60%);
border-top: 1px solid var(--border-soft);
}
.timeline {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.tl-col {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem 1.4rem;
position: relative;
overflow: hidden;
}
.tl-col::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 4px; height: 100%;
}
.tl-shipped::before { background: var(--accent); }
.tl-active::before { background: var(--warning); }
.tl-next::before { background: var(--violet); }
.tl-tag {
display: inline-block;
font-family: var(--mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.14em;
padding: 0.25rem 0.7rem;
border-radius: 999px;
margin-bottom: 1rem;
}
.tl-shipped .tl-tag { background: rgba(16, 185, 129, 0.1); color: var(--accent-hot); }
.tl-active .tl-tag { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
.tl-next .tl-tag { background: rgba(168, 85, 247, 0.1); color: var(--violet); }
.tl-col ul { list-style: none; padding: 0; margin: 0; }
.tl-col li {
padding: 0.5rem 0;
font-size: 0.9rem;
color: var(--text-soft);
border-bottom: 1px solid var(--border-soft);
}
.tl-col li:last-child { border-bottom: none; }
.tl-col li strong { color: var(--text); }
.tl-foot { margin-top: 1.5rem; color: var(--text-muted); font-size: 0.9rem; }
@media (max-width: 880px) {
.timeline { grid-template-columns: 1fr; }
}
/* ============================================================
FOOTER
============================================================ */
.footer {
margin-top: 4rem;
padding-top: 3rem;
border-top: 1px solid var(--border-soft);
background: linear-gradient(180deg, transparent 0%, rgba(168, 85, 247, 0.04) 100%);
}
.footer-inner {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 2rem;
padding-bottom: 3rem;
}
.footer-brand {
font-family: var(--mono);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--text);
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.footer-tag {
color: var(--text-muted);
font-size: 0.9rem;
max-width: 320px;
}
.footer-col h4 {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-dim);
margin: 0.4rem 0 0.9rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-col a {
color: var(--text-muted);
font-size: 0.93rem;
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
border-top: 1px solid var(--border-soft);
padding: 2rem 1.5rem;
color: var(--text-dim);
font-size: 0.86rem;
}
.footer-bottom p { margin: 0.5rem 0; }
.footer-meta { color: var(--text-muted); }
@media (max-width: 800px) {
.footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
.footer-inner { grid-template-columns: 1fr; }
}
/* selection highlight */
::selection { background: rgba(16, 185, 129, 0.3); color: #fff; }
Reference in New Issue View Git Blame Copy Permalink