stemedb/docs/presentations/reveal/theme.css
jordan 1ce4004807 feat: Complete Phase 2 (The Cortex) - query, lens, and API layers
This commit adds the read path (Cortex) to complement the write path (Spine):

## Crates
- stemedb-api: HTTP API with axum + utoipa OpenAPI
  - /v1/assert, /v1/query, /v1/epoch, /v1/skeptic, /v1/trace, /v1/audit
  - Metered endpoints with quota enforcement
  - Ed25519 signature verification
- stemedb-lens: Truth resolution lenses
  - RecencyLens, ConsensusLens, ConfidenceLens
  - VoteAwareConsensusLens (Ballot Box pattern)
  - TrustAwareAuthorityLens (The Hive pattern)
  - SkepticLens (conflict analysis)
  - EpochAwareLens (paradigm-safe queries)
- stemedb-query: Query engine with materialized views

## Storage Extensions
- VoteStore: Vote aggregation with cached counts
- TrustRankStore: Agent reputation with decay
- AuditStore: Query audit trail
- IndexStore: SP/P/S index structures
- SupersessionStore: Epoch supersession chains

## SDKs
- sdk/go/steme: Go HTTP client with Ed25519 signing
- sdk/go/adk: ADK-Go tools for AI agents

## Documentation
- Updated CLAUDE.md, architecture.md, roadmap.md
- New ai-lookup entries for all services
- Use case docs for consumer health intelligence
- Arena roadmap for simulation advancement

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-01 13:22:44 -07:00

952 lines
17 KiB
CSS

/**
* Episteme Presentation Theme
* Clean black dark, minimal aesthetic
*/
:root {
/* Core colors */
--bg-primary: #000000;
--bg-secondary: #0a0a0a;
--bg-card: #111111;
--bg-card-hover: #1a1a1a;
/* Text */
--text-primary: #ffffff;
--text-secondary: #a3a3a3;
--text-muted: #525252;
/* Borders */
--border-subtle: #262626;
--border-default: #404040;
/* Accents */
--accent-episteme: #FBBF24;
--accent-success: #10B981;
--accent-danger: #EF4444;
--accent-warning: #F59E0B;
--accent-info: #3B82F6;
/* Actor colors */
--actor-research: #3B82F6;
--actor-orchestrator: #8B5CF6;
--actor-implementation: #10B981;
--actor-deploy: #F59E0B;
--actor-human: #EC4899;
--actor-gardener: #14B8A6;
--actor-production: #EF4444;
/* Typography */
--font-sans: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Spacing */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
}
/* ==============================================
BASE REVEAL OVERRIDES
============================================== */
.reveal-viewport {
background: var(--bg-primary);
}
/* Ensure all slides have opaque background - fixes ghost bleed */
.reveal .slides section {
background: var(--bg-primary);
}
.reveal {
font-family: var(--font-sans);
font-size: 24px;
font-weight: 400;
color: var(--text-primary);
}
.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
font-family: var(--font-sans);
font-weight: 600;
text-transform: none;
letter-spacing: -0.02em;
color: var(--text-primary);
margin-bottom: var(--space-lg);
}
.reveal h1 {
font-size: 3rem;
font-weight: 700;
}
.reveal h2 {
font-size: 2rem;
}
.reveal h3 {
font-size: 1.5rem;
color: var(--text-secondary);
}
.reveal p {
line-height: 1.6;
}
.reveal code {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--bg-card);
padding: 0.1em 0.4em;
border-radius: 4px;
}
.reveal pre code {
padding: var(--space-md);
border-radius: 8px;
font-size: 0.8em;
}
/* Progress bar - subtle */
.reveal .progress {
height: 1px;
background: var(--border-subtle);
}
.reveal .progress span {
background: var(--text-muted);
}
/* Progress bar styling is handled via Reveal.js config */
/* Controls - minimal */
.reveal .controls {
color: var(--text-muted);
}
.reveal .controls button {
opacity: 0.3;
transition: opacity 0.2s ease;
}
.reveal .controls button:hover {
opacity: 0.6;
}
/* Hide controls on title slide via data-state */
.reveal[data-state="title"] .controls {
opacity: 0;
}
/* ==============================================
SLIDE LAYOUTS
============================================== */
/* Title slide - Nike minimal */
.reveal .slides section.title-slide {
height: 100%;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.slide-title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.slide-title h1 {
font-size: 5rem;
font-weight: 600;
letter-spacing: -0.03em;
color: var(--text-primary);
margin: 0;
}
.slide-title h1.brand {
font-family: var(--font-sans);
font-size: 6rem;
font-weight: 400;
letter-spacing: -0.03em;
}
.slide-title .subtitle {
display: none;
}
/* Menu slide - deck picker in combined mode */
.reveal .slides section.menu-slide {
height: 100%;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.slide-menu-card {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-left: 10%;
max-width: 800px;
width: 100%;
}
.slide-menu-card .menu-card-number {
font-family: var(--font-mono);
font-size: 0.875rem;
font-weight: 500;
color: var(--accent-episteme);
letter-spacing: 0.1em;
margin-bottom: var(--space-md);
}
.slide-menu-card h2 {
font-size: 3rem;
font-weight: 600;
letter-spacing: -0.02em;
margin-bottom: var(--space-sm);
}
.slide-menu-card .menu-card-subtitle {
font-size: 1.25rem;
color: var(--text-secondary);
margin-bottom: var(--space-xl);
}
.slide-menu-card .menu-card-hint {
font-size: 1rem;
color: var(--text-muted);
}
.slide-menu-card .key-hint {
display: inline-block;
padding: 0.1em 0.5em;
background: var(--border-subtle);
border-radius: 4px;
font-family: var(--font-mono);
font-size: 0.875rem;
color: var(--text-secondary);
}
/* Section title slide */
.slide-section-title {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding-left: 10%;
}
.slide-section-title .section-number {
font-size: 0.875rem;
font-weight: 500;
color: var(--accent-episteme);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: var(--space-md);
}
.slide-section-title h2 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: var(--space-sm);
}
.slide-section-title .subtitle {
font-size: 1.5rem;
color: var(--text-secondary);
margin-bottom: var(--space-xl);
}
.slide-section-title .description {
max-width: 600px;
font-size: 1.125rem;
color: var(--text-muted);
line-height: 1.6;
}
/* Hook slide - Single powerful line */
.reveal .slides section.hook-slide {
height: 100%;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.slide-hook {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 10%;
}
.slide-hook .hook-line {
font-size: 3rem;
font-weight: 400;
color: var(--text-primary);
line-height: 1.3;
letter-spacing: -0.02em;
}
.slide-hook .hook-subline {
font-size: 1.5rem;
font-weight: 400;
color: var(--text-secondary);
margin-top: var(--space-lg);
line-height: 1.4;
}
/* Problem slide */
.reveal .slides section.problem-slide {
height: 100%;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.slide-problem {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-left: 10%;
max-width: 800px;
}
.slide-problem h2 {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: var(--space-xl);
color: var(--text-primary);
}
.slide-problem .problem-points {
list-style: none;
padding: 0;
margin: 0;
}
.slide-problem .problem-points li {
font-size: 1.5rem;
color: var(--text-secondary);
margin-bottom: var(--space-lg);
padding-left: var(--space-lg);
position: relative;
}
.slide-problem .problem-points li::before {
content: "—";
position: absolute;
left: 0;
color: var(--text-muted);
}
/* Insight slide */
.reveal .slides section.insight-slide {
height: 100%;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.slide-insight {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-left: 10%;
max-width: 800px;
}
.slide-insight h2 {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: var(--space-xl);
color: var(--accent-episteme);
}
.slide-insight .insight-points {
list-style: none;
padding: 0;
margin: 0;
}
.slide-insight .insight-points li {
font-size: 1.5rem;
color: var(--text-secondary);
margin-bottom: var(--space-lg);
padding-left: var(--space-lg);
position: relative;
}
.slide-insight .insight-points li::before {
content: "→";
position: absolute;
left: 0;
color: var(--accent-episteme);
}
/* Contrast slide - side by side comparison */
.reveal .slides section.contrast-slide {
height: 100%;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.slide-contrast {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 1100px;
}
.slide-contrast h2 {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: var(--space-xl);
color: var(--text-primary);
}
.contrast-container {
display: flex;
gap: var(--space-xl);
width: 100%;
}
.contrast-side {
flex: 1;
padding: var(--space-lg);
border-radius: 12px;
border: 1px solid var(--border-subtle);
}
.contrast-side.before {
background: rgba(239, 68, 68, 0.1);
border-color: var(--accent-danger);
}
.contrast-side.after {
background: rgba(16, 185, 129, 0.1);
border-color: var(--accent-success);
}
.contrast-side h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: var(--space-md);
}
.contrast-side.before h3 {
color: var(--accent-danger);
}
.contrast-side.after h3 {
color: var(--accent-success);
}
.contrast-side .contrast-points {
list-style: none;
padding: 0;
margin: 0;
}
.contrast-side .contrast-points li {
font-size: 1.125rem;
color: var(--text-secondary);
margin-bottom: var(--space-md);
padding-left: var(--space-lg);
position: relative;
}
.contrast-side.before .contrast-points li::before {
content: "✗";
position: absolute;
left: 0;
color: var(--accent-danger);
}
.contrast-side.after .contrast-points li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--accent-success);
}
.contrast-callout {
margin-top: var(--space-xl);
font-size: 1.5rem;
color: var(--accent-episteme);
text-align: center;
}
/* Vision slide */
.reveal .slides section.vision-slide {
height: 100%;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.slide-vision {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 800px;
}
.slide-vision h2 {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: var(--space-xl);
color: var(--text-primary);
}
.slide-vision .vision-points {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.slide-vision .vision-points li {
font-size: 1.5rem;
color: var(--text-secondary);
margin-bottom: var(--space-lg);
padding-left: var(--space-lg);
position: relative;
}
.slide-vision .vision-points li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--accent-success);
}
.slide-vision .vision-tagline {
font-size: 3rem;
font-weight: 400;
color: var(--accent-episteme);
margin-top: var(--space-2xl);
letter-spacing: -0.02em;
}
/* ==============================================
CODE SLIDE - Clean, minimal
============================================== */
.reveal .slides section.code-slide {
height: 100%;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: var(--space-xl);
}
.slide-code {
width: 100%;
max-width: 800px;
}
.slide-code h2 {
font-size: 1.25rem;
font-weight: 500;
margin-bottom: var(--space-lg);
color: var(--text-secondary);
}
.code-block {
background: var(--bg-secondary);
border-radius: 8px;
border: 1px solid var(--border-subtle);
overflow: hidden;
}
.code-block pre {
margin: 0;
padding: var(--space-lg);
overflow-x: auto;
}
.code-block code {
font-family: var(--font-mono);
font-size: 0.875rem;
line-height: 1.7;
color: var(--text-primary);
background: transparent;
padding: 0;
white-space: pre;
display: block;
}
/* ==============================================
SEQUENCE DIAGRAM SLIDE
============================================== */
.slide-sequence {
display: flex;
flex-direction: column;
height: 100%;
padding: var(--space-xl);
}
.slide-sequence .header {
margin-bottom: var(--space-xl);
}
.slide-sequence .header h3 {
font-size: 1.25rem;
color: var(--text-muted);
margin-bottom: var(--space-xs);
}
.slide-sequence .header h2 {
font-size: 2rem;
margin-bottom: 0;
}
/* Actors row */
.actors-row {
display: flex;
justify-content: space-around;
padding: 0 var(--space-xl);
margin-bottom: var(--space-xl);
}
.actor {
display: flex;
flex-direction: column;
align-items: center;
min-width: 100px;
}
.actor-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-sm);
font-size: 1.25rem;
font-weight: 600;
color: var(--bg-primary);
}
.actor-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--text-secondary);
text-align: center;
max-width: 100px;
}
.actor-line {
width: 2px;
background: var(--border-subtle);
flex-grow: 1;
margin-top: var(--space-md);
}
/* Steps container */
.steps-container {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: var(--space-md);
overflow-y: auto;
padding: 0 var(--space-xl);
}
/* Step card */
.step-card {
display: flex;
align-items: flex-start;
gap: var(--space-lg);
padding: var(--space-md) var(--space-lg);
background: var(--bg-card);
border-radius: 12px;
border: 1px solid var(--border-subtle);
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.step-card.visible {
opacity: 1;
transform: translateY(0);
}
.step-card.danger {
border-color: var(--accent-danger);
background: rgba(239, 68, 68, 0.1);
}
.step-card.success {
border-color: var(--accent-success);
background: rgba(16, 185, 129, 0.1);
}
.step-card.warning {
border-color: var(--accent-warning);
background: rgba(245, 158, 11, 0.1);
}
/* Step index */
.step-index {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--border-subtle);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
flex-shrink: 0;
}
.step-card.danger .step-index {
background: var(--accent-danger);
color: white;
}
.step-card.success .step-index {
background: var(--accent-success);
color: white;
}
/* Step content */
.step-content {
flex-grow: 1;
}
.step-header {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-xs);
}
.step-actors {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: 0.75rem;
font-weight: 500;
}
.step-from {
color: var(--text-secondary);
}
.step-arrow {
color: var(--text-muted);
}
.step-to {
color: var(--text-secondary);
}
.step-action {
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.125rem 0.5rem;
border-radius: 4px;
background: var(--border-subtle);
color: var(--text-muted);
}
.step-label {
font-size: 1rem;
font-weight: 500;
color: var(--text-primary);
margin-bottom: var(--space-sm);
}
.step-note {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.5;
}
/* Step data */
.step-data {
margin-top: var(--space-md);
padding: var(--space-sm) var(--space-md);
background: var(--bg-secondary);
border-radius: 6px;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-secondary);
overflow-x: auto;
}
.step-data pre {
margin: 0;
white-space: pre-wrap;
}
/* Callout */
.step-callout {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin-top: var(--space-sm);
padding: var(--space-xs) var(--space-sm);
background: var(--accent-episteme);
color: var(--bg-primary);
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
}
.step-card.danger .step-callout {
background: var(--accent-danger);
color: white;
}
.step-card.success .step-callout {
background: var(--accent-success);
color: white;
}
/* ==============================================
DATA VISUALIZATION
============================================== */
.data-card {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: 12px;
padding: var(--space-lg);
margin: var(--space-md) 0;
}
.data-card-header {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-md);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--border-subtle);
}
.data-card-title {
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary);
}
.data-card-content {
font-family: var(--font-mono);
font-size: 0.875rem;
}
/* JSON-like styling */
.json-key {
color: var(--accent-info);
}
.json-string {
color: var(--accent-success);
}
.json-number {
color: var(--accent-episteme);
}
.json-boolean {
color: var(--accent-warning);
}
.json-null {
color: var(--text-muted);
}
/* ==============================================
ANIMATIONS
============================================== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.animate-fade-in-up {
animation: fadeInUp 0.5s ease forwards;
}
.animate-pulse {
animation: pulse 2s ease-in-out infinite;
}
/* Fragment animations */
.reveal .slides section .fragment {
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
}
.reveal .slides section .fragment.visible {
opacity: 1;
transform: translateY(0);
}
/* ==============================================
RESPONSIVE
============================================== */
@media (max-width: 768px) {
.reveal {
font-size: 18px;
}
.slide-title h1 {
font-size: 2.5rem;
}
.slide-section-title h2 {
font-size: 2.5rem;
}
.actors-row {
flex-wrap: wrap;
gap: var(--space-md);
}
.actor {
min-width: 80px;
}
.step-card {
flex-direction: column;
}
}