Spaces:
Running
Running
feat: upgrade to deep-dive content — hero + arch + competitive matrix + citations (Doctrine v6)
7b78283 verified | /* sentra deep-dive — Doctrine v6 · Dark theme #0f1419 bg · threat red #ff4444 + cyan #00d4ff */ | |
| /* Mirrors szl-anatomy quality bar */ | |
| :root { | |
| --bg: #0f1419; | |
| --surface: #141b22; | |
| --surface-alt: #1a222c; | |
| --border: #1e2d3d; | |
| --text: #f0f4f8; | |
| --text-muted: #8aa0b8; | |
| --text-faint: #5a7090; | |
| --red: #ff4444; | |
| --red-dim: rgba(255, 68, 68, 0.12); | |
| --red-glow: rgba(255, 68, 68, 0.25); | |
| --cyan: #00d4ff; | |
| --cyan-dim: rgba(0, 212, 255, 0.10); | |
| --cyan-glow: rgba(0, 212, 255, 0.22); | |
| --green: #22c55e; | |
| --gradient: linear-gradient(135deg, #ff4444 0%, #00d4ff 100%); | |
| --radius: 12px; | |
| --radius-sm: 8px; | |
| --transition: 200ms ease; | |
| } | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| font-size: 16px; | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* Noise 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: 0.025; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| /* ── Layout ── */ | |
| .container { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| padding: 0 24px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* ── Skip link ── */ | |
| .skip-to-content { | |
| position: absolute; | |
| left: -9999px; | |
| top: 1rem; | |
| z-index: 9999; | |
| padding: 0.5rem 1.25rem; | |
| background: var(--surface); | |
| color: var(--text); | |
| font-weight: 600; | |
| font-size: 0.875rem; | |
| border-radius: 4px; | |
| text-decoration: none; | |
| border: 2px solid var(--cyan); | |
| } | |
| .skip-to-content:focus { left: 1rem; } | |
| /* ── Nav ── */ | |
| nav { | |
| position: sticky; | |
| top: 0; | |
| background: rgba(15, 20, 25, 0.88); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| 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: 700; | |
| color: var(--red); | |
| text-decoration: none; | |
| letter-spacing: 0.04em; | |
| 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 ── */ | |
| .hero { | |
| padding: 100px 0 72px; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .hero-glow { | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255,68,68,0.07) 0%, transparent 65%), | |
| radial-gradient(ellipse 40% 30% at 80% 60%, rgba(0,212,255,0.04) 0%, transparent 60%); | |
| pointer-events: none; | |
| } | |
| .hero-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 6px 16px; | |
| background: var(--red-dim); | |
| border: 1px solid var(--red-glow); | |
| border-radius: 100px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--red); | |
| margin-bottom: 28px; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| } | |
| .hero-badge-dot { | |
| width: 6px; | |
| height: 6px; | |
| background: var(--red); | |
| border-radius: 50%; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.4; transform: scale(1.6); } | |
| } | |
| .hero h1 { | |
| font-size: clamp(2.4rem, 5.5vw, 4.8rem); | |
| font-weight: 800; | |
| line-height: 1.08; | |
| letter-spacing: -0.03em; | |
| color: #fff; | |
| margin-bottom: 20px; | |
| } | |
| .hero h1 .grad { | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero-tagline { | |
| font-size: clamp(1rem, 2vw, 1.2rem); | |
| color: var(--text-muted); | |
| max-width: 660px; | |
| margin: 0 auto 40px; | |
| line-height: 1.75; | |
| } | |
| .hero-ctas { | |
| display: flex; | |
| gap: 14px; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| margin-bottom: 56px; | |
| } | |
| .btn-primary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 13px 26px; | |
| background: var(--gradient); | |
| color: #0f1419; | |
| font-weight: 700; | |
| font-size: 0.9rem; | |
| border-radius: var(--radius); | |
| text-decoration: none; | |
| transition: opacity 0.2s, transform 0.2s; | |
| } | |
| .btn-primary:hover { opacity: 0.88; transform: translateY(-1px); } | |
| .btn-secondary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 13px 26px; | |
| background: transparent; | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| border-radius: var(--radius); | |
| border: 1px solid var(--border); | |
| text-decoration: none; | |
| transition: color var(--transition), border-color var(--transition), transform 0.2s; | |
| } | |
| .btn-secondary:hover { color: var(--text); border-color: var(--cyan); transform: translateY(-1px); } | |
| .hero-image-wrap { | |
| max-width: 760px; | |
| margin: 0 auto; | |
| border-radius: var(--radius); | |
| border: 1px solid var(--border); | |
| overflow: hidden; | |
| box-shadow: 0 0 80px rgba(255,68,68,0.07), 0 24px 64px rgba(0,0,0,0.6); | |
| } | |
| .hero-image-wrap img { width: 100%; height: auto; display: block; } | |
| /* ── Sections ── */ | |
| section { | |
| padding: 80px 0; | |
| border-top: 1px solid var(--border); | |
| position: relative; | |
| } | |
| section h2 { | |
| font-size: clamp(1.5rem, 3vw, 2.2rem); | |
| font-weight: 700; | |
| line-height: 1.2; | |
| color: #fff; | |
| margin-bottom: 8px; | |
| letter-spacing: -0.02em; | |
| } | |
| .section-label { | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--red); | |
| margin-bottom: 10px; | |
| } | |
| .section-desc { | |
| font-size: 16px; | |
| color: var(--text-muted); | |
| max-width: 720px; | |
| line-height: 1.75; | |
| margin-bottom: 40px; | |
| } | |
| /* ── Cards ── */ | |
| .card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 24px; | |
| } | |
| .card-label { | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--text-faint); | |
| margin-bottom: 10px; | |
| } | |
| .card p, .card li { | |
| font-size: 14px; | |
| color: var(--text); | |
| line-height: 1.75; | |
| } | |
| .card ul { list-style: none; padding: 0; } | |
| .card ul li { padding-left: 14px; position: relative; margin-bottom: 4px; } | |
| .card ul li::before { content: '·'; position: absolute; left: 0; color: var(--red); } | |
| /* ── What sentra is — 3 col grid ── */ | |
| .what-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 40px; | |
| } | |
| .what-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 24px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .what-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 2px; | |
| background: var(--gradient); | |
| } | |
| .what-card h3 { | |
| font-size: 15px; | |
| font-weight: 700; | |
| color: var(--cyan); | |
| margin-bottom: 10px; | |
| } | |
| .what-card p { | |
| font-size: 14px; | |
| color: var(--text-muted); | |
| line-height: 1.7; | |
| } | |
| .stat-row { | |
| display: flex; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| margin-top: 32px; | |
| } | |
| .stat-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 14px; | |
| background: var(--surface-alt); | |
| border: 1px solid var(--border); | |
| border-radius: 100px; | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| .stat-chip strong { color: var(--text); } | |
| /* ── Gates table ── */ | |
| .gates-table-wrap { | |
| overflow-x: auto; | |
| border-radius: var(--radius); | |
| border: 1px solid var(--border); | |
| margin-bottom: 32px; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 14px; | |
| } | |
| thead tr { | |
| background: var(--surface-alt); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| thead th { | |
| padding: 12px 16px; | |
| text-align: left; | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--text-faint); | |
| white-space: nowrap; | |
| } | |
| tbody tr { | |
| border-bottom: 1px solid var(--border); | |
| transition: background var(--transition); | |
| } | |
| tbody tr:last-child { border-bottom: none; } | |
| tbody tr:hover { background: var(--surface); } | |
| tbody td { | |
| padding: 14px 16px; | |
| color: var(--text); | |
| vertical-align: top; | |
| line-height: 1.6; | |
| } | |
| .gate-id { | |
| font-family: 'JetBrains Mono', 'Fira Code', monospace; | |
| font-size: 12px; | |
| font-weight: 700; | |
| color: var(--red); | |
| white-space: nowrap; | |
| } | |
| .gate-name { font-weight: 600; color: var(--text); } | |
| .gate-source { | |
| font-size: 12px; | |
| color: var(--text-faint); | |
| } | |
| .gate-source a { | |
| color: var(--cyan); | |
| text-decoration: none; | |
| } | |
| .gate-source a:hover { text-decoration: underline; } | |
| .badge-szl { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| background: var(--cyan-dim); | |
| border: 1px solid var(--cyan-glow); | |
| border-radius: 4px; | |
| font-size: 10px; | |
| font-weight: 700; | |
| color: var(--cyan); | |
| letter-spacing: 0.04em; | |
| } | |
| /* ── Architecture ── */ | |
| .arch-wrap { | |
| border-radius: var(--radius); | |
| border: 1px solid var(--border); | |
| overflow: hidden; | |
| margin-bottom: 32px; | |
| background: var(--surface); | |
| } | |
| .arch-wrap svg { width: 100%; height: auto; display: block; } | |
| .chart-wrap { | |
| border-radius: var(--radius); | |
| border: 1px solid var(--border); | |
| overflow: hidden; | |
| margin-bottom: 24px; | |
| background: var(--surface); | |
| } | |
| .chart-wrap img { width: 100%; height: auto; display: block; } | |
| .chart-caption { | |
| font-size: 12px; | |
| color: var(--text-faint); | |
| text-align: center; | |
| padding: 10px 16px; | |
| background: var(--surface-alt); | |
| border-top: 1px solid var(--border); | |
| font-style: italic; | |
| } | |
| /* ── Live demo iframe ── */ | |
| .demo-section .iframe-wrap { | |
| border-radius: var(--radius); | |
| border: 1px solid var(--border); | |
| overflow: hidden; | |
| margin-bottom: 16px; | |
| background: var(--surface); | |
| box-shadow: 0 0 40px rgba(255,68,68,0.05); | |
| } | |
| .iframe-wrap iframe { | |
| width: 100%; | |
| border: none; | |
| display: block; | |
| min-height: 650px; | |
| } | |
| .iframe-caption { | |
| font-size: 12px; | |
| color: var(--text-faint); | |
| text-align: center; | |
| padding: 10px 16px; | |
| background: var(--surface-alt); | |
| border-top: 1px solid var(--border); | |
| font-style: italic; | |
| } | |
| /* ── Comparison table ── */ | |
| .comparison-wrap { | |
| overflow-x: auto; | |
| border-radius: var(--radius); | |
| border: 1px solid var(--border); | |
| margin-bottom: 32px; | |
| } | |
| .comparison-wrap table thead th:first-child { min-width: 200px; } | |
| .yn-yes { | |
| color: var(--green); | |
| font-weight: 700; | |
| font-size: 13px; | |
| } | |
| .yn-no { | |
| color: var(--red); | |
| font-weight: 700; | |
| font-size: 13px; | |
| } | |
| .yn-partial { | |
| color: #f59e0b; | |
| font-weight: 600; | |
| font-size: 13px; | |
| } | |
| .vendor-sentra { color: var(--cyan); font-weight: 700; } | |
| /* ── What sentra is NOT ── */ | |
| .not-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 16px; | |
| } | |
| .not-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 20px; | |
| border-left: 3px solid var(--red); | |
| } | |
| .not-card h3 { | |
| font-size: 13px; | |
| font-weight: 700; | |
| color: var(--red); | |
| margin-bottom: 8px; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .not-card h3::before { | |
| content: '✕'; | |
| font-size: 11px; | |
| } | |
| .not-card p { | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| line-height: 1.65; | |
| } | |
| /* ── Citations ── */ | |
| .citations-list { | |
| list-style: none; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .citation-item { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 16px 20px; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 14px; | |
| } | |
| .citation-num { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 11px; | |
| font-weight: 700; | |
| color: var(--red); | |
| min-width: 28px; | |
| padding-top: 2px; | |
| } | |
| .citation-body { flex: 1; } | |
| .citation-body strong { color: var(--text); font-size: 14px; display: block; margin-bottom: 4px; } | |
| .citation-body span { font-size: 12px; color: var(--text-faint); display: block; margin-bottom: 6px; } | |
| .citation-body a { | |
| font-size: 12px; | |
| color: var(--cyan); | |
| text-decoration: none; | |
| word-break: break-all; | |
| } | |
| .citation-body a:hover { text-decoration: underline; } | |
| /* ── Footer ── */ | |
| footer { | |
| border-top: 1px solid var(--border); | |
| padding: 48px 0 32px; | |
| background: var(--surface); | |
| } | |
| .footer-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 32px; | |
| margin-bottom: 40px; | |
| } | |
| .footer-col h4 { | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--text-faint); | |
| margin-bottom: 14px; | |
| } | |
| .footer-col ul { list-style: none; padding: 0; } | |
| .footer-col ul li { margin-bottom: 8px; } | |
| .footer-col ul li a { | |
| font-size: 14px; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| transition: color var(--transition); | |
| } | |
| .footer-col ul li a:hover { color: var(--cyan); } | |
| .footer-bottom { | |
| border-top: 1px solid var(--border); | |
| padding-top: 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| .footer-bottom p { | |
| font-size: 12px; | |
| color: var(--text-faint); | |
| } | |
| .footer-doctrine { | |
| font-size: 11px; | |
| color: var(--text-faint); | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| /* ── Responsive ── */ | |
| @media (max-width: 768px) { | |
| .hero { padding: 80px 0 56px; } | |
| .hero h1 { font-size: 2.2rem; } | |
| .what-grid, .not-grid { grid-template-columns: 1fr; } | |
| .nav-links { display: none; } | |
| section { padding: 56px 0; } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { | |
| animation-duration: 0.01ms ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |
| /* Focus visible */ | |
| :focus-visible { | |
| outline: 2px solid var(--cyan); | |
| outline-offset: 2px; | |
| border-radius: 3px; | |
| } | |