Spaces:
Running
Running
feat: upgrade to deep-dive content — hero + arch + competitive matrix + citations (Doctrine v6)
962b472 verified | /* a11oy Deep-Dive — Dark Theme Stylesheet */ | |
| /* Doctrine v6 · No marketing superlatives · No emoji in headers */ | |
| /* Design language: szl-anatomy reference — #0a0a0f base, #00d4ff accent, Inter */ | |
| :root { | |
| --bg: #0a0a0f; | |
| --surface: #111118; | |
| --surface-alt: #16161f; | |
| --border: #2a2a3a; | |
| --text: #d4d4e8; | |
| --text-muted: #7a7a9a; | |
| --text-faint: #4a4a6a; | |
| --accent: #00d4ff; | |
| --accent-dim: rgba(0, 212, 255, 0.12); | |
| --accent-glow: rgba(0, 212, 255, 0.25); | |
| --accent-deep: rgba(0, 212, 255, 0.06); | |
| /* Package lane colors */ | |
| --lane-ingress: #34d399; /* emerald — sequence/sparse/perception */ | |
| --lane-knowledge: #60a5fa; /* blue — knowledge packages */ | |
| --lane-measure: #facc15; /* yellow — measurement */ | |
| --lane-policy: #f472b6; /* pink — policy + qec */ | |
| --lane-receipts: #00d4ff; /* accent — receipt-substrate */ | |
| --lane-lambda: #a78bfa; /* violet — Λ-gate */ | |
| --noise-opacity: 0.03; | |
| --radius: 12px; | |
| --radius-sm: 8px; | |
| --transition: 200ms ease; | |
| } | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| background-color: var(--bg); | |
| color: var(--text); | |
| font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; | |
| font-size: 16px; | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* Noise texture overlay */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); | |
| opacity: var(--noise-opacity); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| /* Layout */ | |
| .container { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| padding: 0 24px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* Navigation */ | |
| nav { | |
| position: sticky; | |
| top: 0; | |
| background: rgba(10, 10, 15, 0.88); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--border); | |
| z-index: 100; | |
| padding: 12px 0; | |
| } | |
| nav .container { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .nav-brand { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--accent); | |
| text-decoration: none; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 4px; | |
| flex-wrap: wrap; | |
| list-style: none; | |
| } | |
| .nav-links a { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| padding: 4px 10px; | |
| border-radius: 6px; | |
| transition: color var(--transition), background var(--transition); | |
| } | |
| .nav-links a:hover { | |
| color: var(--text); | |
| background: var(--surface); | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| padding: 80px 0 60px; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .hero-gradient { | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 212, 255, 0.09) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .hero h1 { | |
| font-size: clamp(28px, 5vw, 56px); | |
| font-weight: 700; | |
| line-height: 1.1; | |
| color: #ffffff; | |
| margin-bottom: 16px; | |
| letter-spacing: -0.02em; | |
| } | |
| .hero h1 .accent { color: var(--accent); } | |
| .hero-tagline { | |
| font-size: clamp(15px, 2vw, 18px); | |
| color: var(--text-muted); | |
| max-width: 700px; | |
| margin: 0 auto 32px; | |
| line-height: 1.7; | |
| } | |
| .hero-ctas { | |
| display: flex; | |
| gap: 12px; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| margin-bottom: 48px; | |
| } | |
| .cta-primary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 12px 24px; | |
| background: var(--accent); | |
| color: #000; | |
| font-size: 14px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| border-radius: 8px; | |
| transition: opacity var(--transition), transform var(--transition); | |
| } | |
| .cta-primary:hover { opacity: 0.85; transform: translateY(-1px); } | |
| .cta-secondary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 12px 24px; | |
| background: transparent; | |
| color: var(--text); | |
| font-size: 14px; | |
| font-weight: 500; | |
| text-decoration: none; | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| transition: border-color var(--transition), color var(--transition), background var(--transition); | |
| } | |
| .cta-secondary:hover { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| background: var(--accent-dim); | |
| } | |
| .hero-image-wrap { | |
| max-width: 860px; | |
| margin: 0 auto; | |
| border-radius: var(--radius); | |
| border: 1px solid var(--border); | |
| overflow: hidden; | |
| box-shadow: 0 0 80px rgba(0, 212, 255, 0.07), 0 24px 64px rgba(0,0,0,0.5); | |
| } | |
| .hero-image-wrap img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| /* Section Base */ | |
| .section { | |
| padding: 80px 0; | |
| border-top: 1px solid var(--border); | |
| position: relative; | |
| } | |
| .section-num { | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| color: var(--text-faint); | |
| margin-bottom: 8px; | |
| } | |
| .section h2 { | |
| font-size: clamp(22px, 3.5vw, 36px); | |
| font-weight: 700; | |
| color: #ffffff; | |
| margin-bottom: 16px; | |
| line-height: 1.2; | |
| letter-spacing: -0.015em; | |
| } | |
| .section h2 .accent { color: var(--accent); } | |
| .section-lead { | |
| font-size: 17px; | |
| color: var(--text-muted); | |
| max-width: 720px; | |
| line-height: 1.7; | |
| margin-bottom: 40px; | |
| } | |
| /* Info Cards */ | |
| .info-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 24px; | |
| margin-bottom: 16px; | |
| } | |
| .info-card-label { | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--text-faint); | |
| margin-bottom: 12px; | |
| } | |
| .info-card p, .info-card li { | |
| font-size: 15px; | |
| color: var(--text); | |
| line-height: 1.65; | |
| } | |
| .info-card ul { | |
| padding-left: 1.2em; | |
| } | |
| .info-card li { margin-bottom: 6px; } | |
| .info-card code { | |
| font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; | |
| font-size: 12px; | |
| background: var(--surface-alt); | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| color: var(--accent); | |
| } | |
| /* Package Grid */ | |
| .pkg-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 16px; | |
| margin-top: 32px; | |
| } | |
| .pkg-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 20px 22px; | |
| transition: border-color var(--transition); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .pkg-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 2px; | |
| background: var(--pkg-color, var(--accent)); | |
| opacity: 0.7; | |
| } | |
| .pkg-card:hover { border-color: var(--pkg-color, var(--accent)); } | |
| .pkg-name { | |
| font-size: 14px; | |
| font-weight: 700; | |
| font-family: 'JetBrains Mono', 'Fira Code', monospace; | |
| color: var(--pkg-color, var(--accent)); | |
| margin-bottom: 8px; | |
| } | |
| .pkg-desc { | |
| font-size: 13.5px; | |
| color: var(--text-muted); | |
| line-height: 1.55; | |
| margin-bottom: 10px; | |
| } | |
| .pkg-types { | |
| font-size: 11.5px; | |
| color: var(--text-faint); | |
| font-family: 'JetBrains Mono', 'Fira Code', monospace; | |
| } | |
| /* Chart panels */ | |
| .chart-panel { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| margin: 32px 0; | |
| box-shadow: 0 8px 32px rgba(0,0,0,0.4); | |
| } | |
| .chart-caption { | |
| padding: 14px 20px; | |
| border-top: 1px solid var(--border); | |
| font-size: 12px; | |
| color: var(--text-faint); | |
| background: var(--surface-alt); | |
| } | |
| .chart-panel img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| /* Two-col layout */ | |
| .two-col { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 24px; | |
| margin-top: 32px; | |
| } | |
| @media (max-width: 768px) { | |
| .two-col { grid-template-columns: 1fr; } | |
| } | |
| /* Step list */ | |
| .step-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 32px 0; | |
| counter-reset: step; | |
| } | |
| .step-list li { | |
| counter-increment: step; | |
| display: flex; | |
| gap: 16px; | |
| align-items: flex-start; | |
| padding: 18px 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .step-list li:last-child { border-bottom: none; } | |
| .step-num { | |
| flex-shrink: 0; | |
| width: 32px; | |
| height: 32px; | |
| background: var(--accent-dim); | |
| border: 1px solid var(--accent); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| font-weight: 700; | |
| color: var(--accent); | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .step-content { | |
| flex: 1; | |
| } | |
| .step-title { | |
| font-size: 15px; | |
| font-weight: 600; | |
| color: #ffffff; | |
| margin-bottom: 4px; | |
| } | |
| .step-detail { | |
| font-size: 13.5px; | |
| color: var(--text-muted); | |
| line-height: 1.6; | |
| } | |
| /* Stat chips */ | |
| .stats-row { | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| margin-top: 16px; | |
| } | |
| .stat-chip { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| background: var(--surface-alt); | |
| border: 1px solid var(--border); | |
| border-radius: 20px; | |
| padding: 4px 12px; | |
| } | |
| .stat-chip strong { | |
| color: var(--text); | |
| font-weight: 600; | |
| } | |
| /* Live demo embed */ | |
| .iframe-wrap { | |
| width: 100%; | |
| border-radius: var(--radius); | |
| border: 1px solid var(--border); | |
| overflow: hidden; | |
| background: var(--surface); | |
| margin: 32px 0; | |
| position: relative; | |
| } | |
| .iframe-wrap iframe { | |
| width: 100%; | |
| height: 580px; | |
| border: none; | |
| display: block; | |
| } | |
| .iframe-label { | |
| padding: 10px 16px; | |
| font-size: 11px; | |
| color: var(--text-faint); | |
| background: var(--surface-alt); | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .live-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: #34d399; | |
| display: inline-block; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.4; } | |
| } | |
| /* Competitive matrix */ | |
| .matrix-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 13.5px; | |
| margin: 32px 0; | |
| } | |
| .matrix-table th { | |
| text-align: left; | |
| padding: 12px 14px; | |
| border-bottom: 1px solid var(--border); | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--text-faint); | |
| background: var(--surface-alt); | |
| } | |
| .matrix-table th:first-child { color: var(--text-muted); } | |
| .matrix-table th.col-szl { color: var(--accent); } | |
| .matrix-table td { | |
| padding: 13px 14px; | |
| border-bottom: 1px solid var(--border); | |
| vertical-align: middle; | |
| } | |
| .matrix-table tr:last-child td { border-bottom: none; } | |
| .matrix-table tr:hover td { background: var(--surface-alt); } | |
| .matrix-table td.row-label { | |
| font-size: 13px; | |
| color: var(--text); | |
| font-weight: 500; | |
| } | |
| .badge-yes { | |
| display: inline-block; | |
| padding: 3px 10px; | |
| border-radius: 12px; | |
| font-size: 11px; | |
| font-weight: 700; | |
| background: rgba(52, 211, 153, 0.15); | |
| color: #34d399; | |
| border: 1px solid rgba(52, 211, 153, 0.3); | |
| } | |
| .badge-partial { | |
| display: inline-block; | |
| padding: 3px 10px; | |
| border-radius: 12px; | |
| font-size: 11px; | |
| font-weight: 700; | |
| background: rgba(250, 204, 21, 0.12); | |
| color: #facc15; | |
| border: 1px solid rgba(250, 204, 21, 0.25); | |
| } | |
| .badge-no { | |
| display: inline-block; | |
| padding: 3px 10px; | |
| border-radius: 12px; | |
| font-size: 11px; | |
| font-weight: 700; | |
| background: rgba(248, 113, 113, 0.1); | |
| color: #f87171; | |
| border: 1px solid rgba(248, 113, 113, 0.2); | |
| } | |
| .matrix-note { | |
| font-size: 12px; | |
| color: var(--text-faint); | |
| margin-top: 12px; | |
| font-style: italic; | |
| line-height: 1.6; | |
| } | |
| /* Not This section */ | |
| .not-this-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 14px; | |
| margin-top: 32px; | |
| } | |
| .not-this-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-left: 3px solid #f87171; | |
| border-radius: var(--radius-sm); | |
| padding: 16px 18px; | |
| } | |
| .not-this-label { | |
| font-size: 12px; | |
| font-weight: 700; | |
| color: #f87171; | |
| margin-bottom: 6px; | |
| letter-spacing: 0.04em; | |
| } | |
| .not-this-desc { | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| line-height: 1.55; | |
| } | |
| /* Citations */ | |
| .citations-list { | |
| list-style: none; | |
| padding: 0; | |
| margin-top: 32px; | |
| } | |
| .citations-list li { | |
| padding: 14px 0; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| gap: 16px; | |
| align-items: flex-start; | |
| } | |
| .citations-list li:last-child { border-bottom: none; } | |
| .cite-num { | |
| flex-shrink: 0; | |
| font-size: 11px; | |
| font-weight: 700; | |
| color: var(--accent); | |
| font-family: 'JetBrains Mono', monospace; | |
| min-width: 28px; | |
| padding-top: 2px; | |
| } | |
| .cite-content { | |
| font-size: 13.5px; | |
| color: var(--text-muted); | |
| line-height: 1.6; | |
| } | |
| .cite-content a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| } | |
| .cite-content a:hover { text-decoration: underline; } | |
| .cite-doi { | |
| font-size: 11px; | |
| font-family: 'JetBrains Mono', monospace; | |
| color: var(--text-faint); | |
| margin-top: 4px; | |
| } | |
| /* Demo links */ | |
| .demo-links { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-top: 8px; | |
| } | |
| .demo-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 7px 14px; | |
| font-size: 13px; | |
| font-weight: 500; | |
| text-decoration: none; | |
| border-radius: 6px; | |
| transition: all var(--transition); | |
| } | |
| .demo-link { | |
| background: var(--accent-dim); | |
| color: var(--accent); | |
| border: 1px solid rgba(0,212,255,0.25); | |
| } | |
| .demo-link:hover { | |
| background: rgba(0,212,255,0.2); | |
| border-color: var(--accent); | |
| } | |
| .demo-link.source-link { | |
| background: var(--surface-alt); | |
| color: var(--text-muted); | |
| border: 1px solid var(--border); | |
| } | |
| .demo-link.source-link:hover { | |
| color: var(--text); | |
| border-color: var(--text-muted); | |
| } | |
| /* Coverage stats */ | |
| .coverage-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 16px; | |
| margin: 32px 0; | |
| } | |
| .kpi-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 22px 20px; | |
| text-align: center; | |
| } | |
| .kpi-value { | |
| font-size: 36px; | |
| font-weight: 700; | |
| color: var(--accent); | |
| letter-spacing: -0.03em; | |
| line-height: 1; | |
| margin-bottom: 6px; | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .kpi-label { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| } | |
| .kpi-sub { | |
| font-size: 11px; | |
| color: var(--text-faint); | |
| margin-top: 4px; | |
| } | |
| /* SVG arch diagram wrapper */ | |
| .arch-svg-wrap { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| margin: 32px 0; | |
| } | |
| .arch-svg-wrap img, .arch-svg-wrap svg { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| /* Inline code blocks */ | |
| pre, code { | |
| font-family: 'JetBrains Mono', 'Fira Code', monospace; | |
| } | |
| pre { | |
| background: var(--surface-alt); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 16px 20px; | |
| overflow-x: auto; | |
| font-size: 13px; | |
| color: var(--text); | |
| line-height: 1.6; | |
| margin: 16px 0; | |
| } | |
| /* Footer */ | |
| footer { | |
| border-top: 1px solid var(--border); | |
| padding: 48px 0 36px; | |
| background: var(--surface); | |
| } | |
| .footer-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); | |
| gap: 32px; | |
| margin-bottom: 40px; | |
| } | |
| .footer-col h4 { | |
| font-size: 12px; | |
| font-weight: 700; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--text-faint); | |
| margin-bottom: 14px; | |
| } | |
| .footer-col ul { list-style: none; padding: 0; } | |
| .footer-col li { margin-bottom: 8px; } | |
| .footer-col a { | |
| font-size: 13.5px; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| transition: color var(--transition); | |
| } | |
| .footer-col a:hover { color: var(--accent); } | |
| .footer-bottom { | |
| padding-top: 24px; | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| .footer-brand { | |
| font-size: 13px; | |
| color: var(--text-faint); | |
| } | |
| .footer-brand strong { color: var(--accent); } | |
| .footer-meta { | |
| font-size: 12px; | |
| color: var(--text-faint); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .hero { padding: 56px 0 40px; } | |
| .section { padding: 56px 0; } | |
| .pkg-grid { grid-template-columns: 1fr; } | |
| .coverage-grid { grid-template-columns: repeat(2, 1fr); } | |
| .not-this-grid { grid-template-columns: 1fr; } | |
| .matrix-table { font-size: 12px; } | |
| .matrix-table th, .matrix-table td { padding: 10px 8px; } | |
| .footer-grid { grid-template-columns: 1fr 1fr; } | |
| } | |
| @media (max-width: 480px) { | |
| .hero-ctas { flex-direction: column; align-items: center; } | |
| .coverage-grid { grid-template-columns: 1fr 1fr; } | |
| .footer-grid { grid-template-columns: 1fr; } | |
| } | |