Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BSBS — Baltimore Secure Backbone System</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <style> | |
| :root { | |
| --bg-deep: #060b14; | |
| --bg-primary: #0a1020; | |
| --bg-card: #0f1729; | |
| --bg-card-hover: #141e35; | |
| --bg-elevated: #182240; | |
| --accent: #00e4a0; | |
| --accent-dim: #00b87d; | |
| --accent-glow: rgba(0, 228, 160, 0.15); | |
| --accent-secondary: #f5a623; | |
| --accent-danger: #ff4757; | |
| --accent-info: #00b4d8; | |
| --text-primary: #e8ecf4; | |
| --text-secondary: #8b95a8; | |
| --text-muted: #4a5568; | |
| --border: rgba(255,255,255,0.06); | |
| --border-accent: rgba(0,228,160,0.2); | |
| --font-display: 'Space Grotesk', sans-serif; | |
| --font-mono: 'JetBrains Mono', monospace; | |
| --radius: 12px; | |
| --radius-sm: 8px; | |
| --radius-lg: 20px; | |
| --shadow: 0 4px 30px rgba(0,0,0,0.4); | |
| --shadow-accent: 0 0 40px rgba(0,228,160,0.08); | |
| } | |
| *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } | |
| html { | |
| scroll-behavior: smooth; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--accent-dim) var(--bg-primary); | |
| } | |
| ::-webkit-scrollbar { width: 6px; } | |
| ::-webkit-scrollbar-track { background: var(--bg-primary); } | |
| ::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 3px; } | |
| body { | |
| font-family: var(--font-display); | |
| background: var(--bg-deep); | |
| color: var(--text-primary); | |
| line-height: 1.7; | |
| overflow-x: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* Background Canvas */ | |
| #bg-canvas { | |
| position: fixed; | |
| top: 0; left: 0; | |
| width: 100%; height: 100%; | |
| z-index: 0; | |
| pointer-events: none; | |
| } | |
| /* Navigation */ | |
| .nav-wrapper { | |
| position: fixed; | |
| top: 0; left: 0; right: 0; | |
| z-index: 1000; | |
| backdrop-filter: blur(20px) saturate(180%); | |
| -webkit-backdrop-filter: blur(20px) saturate(180%); | |
| background: rgba(6,11,20,0.82); | |
| border-bottom: 1px solid var(--border); | |
| transition: transform 0.35s ease, box-shadow 0.35s ease; | |
| } | |
| .nav-wrapper.scrolled { | |
| box-shadow: 0 2px 40px rgba(0,0,0,0.5); | |
| } | |
| .nav-inner { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| height: 64px; | |
| } | |
| .nav-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| text-decoration: none; | |
| color: var(--text-primary); | |
| } | |
| .nav-brand-icon { | |
| width: 36px; height: 36px; | |
| border-radius: 8px; | |
| background: linear-gradient(135deg, var(--accent), var(--accent-dim)); | |
| display: flex; align-items: center; justify-content: center; | |
| font-weight: 700; font-size: 14px; color: var(--bg-deep); | |
| font-family: var(--font-mono); | |
| } | |
| .nav-brand-text { | |
| font-weight: 700; | |
| font-size: 18px; | |
| letter-spacing: 1px; | |
| } | |
| .nav-brand-text span { color: var(--accent); } | |
| .nav-links { | |
| display: flex; | |
| gap: 4px; | |
| list-style: none; | |
| } | |
| .nav-links a { | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-size: 13px; | |
| font-weight: 500; | |
| padding: 8px 14px; | |
| border-radius: var(--radius-sm); | |
| transition: all 0.2s ease; | |
| letter-spacing: 0.3px; | |
| } | |
| .nav-links a:hover, .nav-links a.active { | |
| color: var(--accent); | |
| background: var(--accent-glow); | |
| } | |
| .nav-credit { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| padding: 6px 12px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| transition: all 0.2s ease; | |
| white-space: nowrap; | |
| } | |
| .nav-credit:hover { | |
| color: var(--accent); | |
| border-color: var(--border-accent); | |
| } | |
| .mobile-toggle { | |
| display: none; | |
| background: none; | |
| border: none; | |
| color: var(--text-primary); | |
| font-size: 22px; | |
| cursor: pointer; | |
| } | |
| /* Mobile Nav */ | |
| .mobile-nav { | |
| display: none; | |
| position: fixed; | |
| top: 64px; left: 0; right: 0; bottom: 0; | |
| background: rgba(6,11,20,0.97); | |
| backdrop-filter: blur(20px); | |
| z-index: 999; | |
| padding: 2rem; | |
| overflow-y: auto; | |
| } | |
| .mobile-nav.open { display: block; } | |
| .mobile-nav a { | |
| display: block; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-size: 16px; | |
| padding: 14px 0; | |
| border-bottom: 1px solid var(--border); | |
| transition: color 0.2s; | |
| } | |
| .mobile-nav a:hover { color: var(--accent); } | |
| /* Main Content */ | |
| main { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| padding: 120px 2rem 80px; | |
| position: relative; | |
| } | |
| .hero-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 6px 18px; | |
| border: 1px solid var(--border-accent); | |
| border-radius: 100px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--accent); | |
| letter-spacing: 1.5px; | |
| text-transform: uppercase; | |
| margin-bottom: 2rem; | |
| background: var(--accent-glow); | |
| animation: fadeSlideUp 0.8s ease both; | |
| } | |
| .hero-badge i { font-size: 10px; } | |
| .hero-title { | |
| font-size: clamp(2.5rem, 6vw, 5rem); | |
| font-weight: 700; | |
| line-height: 1.1; | |
| margin-bottom: 1.5rem; | |
| animation: fadeSlideUp 0.8s ease 0.1s both; | |
| } | |
| .hero-title .highlight { | |
| background: linear-gradient(135deg, var(--accent), #00b4d8); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero-subtitle { | |
| font-size: clamp(1rem, 2vw, 1.25rem); | |
| color: var(--text-secondary); | |
| max-width: 720px; | |
| margin-bottom: 3rem; | |
| font-weight: 300; | |
| animation: fadeSlideUp 0.8s ease 0.2s both; | |
| } | |
| .hero-actions { | |
| display: flex; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| animation: fadeSlideUp 0.8s ease 0.3s both; | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 14px 28px; | |
| border-radius: var(--radius); | |
| font-family: var(--font-display); | |
| font-size: 14px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| cursor: pointer; | |
| border: none; | |
| transition: all 0.25s ease; | |
| letter-spacing: 0.3px; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--accent), var(--accent-dim)); | |
| color: var(--bg-deep); | |
| box-shadow: 0 4px 20px rgba(0,228,160,0.25); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 30px rgba(0,228,160,0.35); | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| color: var(--text-primary); | |
| border: 1px solid var(--border); | |
| } | |
| .btn-outline:hover { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| background: var(--accent-glow); | |
| } | |
| .hero-stats { | |
| display: flex; | |
| gap: 3rem; | |
| margin-top: 4rem; | |
| animation: fadeSlideUp 0.8s ease 0.4s both; | |
| } | |
| .hero-stat { | |
| text-align: center; | |
| } | |
| .hero-stat-value { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--accent); | |
| font-family: var(--font-mono); | |
| } | |
| .hero-stat-label { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-top: 4px; | |
| } | |
| /* Sections */ | |
| .section { | |
| padding: 100px 2rem; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .section-header { | |
| margin-bottom: 4rem; | |
| } | |
| .section-number { | |
| font-family: var(--font-mono); | |
| font-size: 13px; | |
| color: var(--accent); | |
| font-weight: 600; | |
| letter-spacing: 2px; | |
| margin-bottom: 0.75rem; | |
| } | |
| .section-title { | |
| font-size: clamp(1.75rem, 3.5vw, 2.75rem); | |
| font-weight: 700; | |
| line-height: 1.2; | |
| margin-bottom: 1rem; | |
| } | |
| .section-desc { | |
| font-size: 1.05rem; | |
| color: var(--text-secondary); | |
| max-width: 680px; | |
| font-weight: 300; | |
| } | |
| /* Reveal animation */ | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: opacity 0.7s ease, transform 0.7s ease; | |
| } | |
| .reveal.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Cards */ | |
| .card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 2rem; | |
| transition: all 0.3s ease; | |
| } | |
| .card:hover { | |
| background: var(--bg-card-hover); | |
| border-color: var(--border-accent); | |
| box-shadow: var(--shadow-accent); | |
| transform: translateY(-3px); | |
| } | |
| .card-icon { | |
| width: 48px; height: 48px; | |
| border-radius: 12px; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 20px; | |
| margin-bottom: 1.25rem; | |
| } | |
| .card-icon.green { background: rgba(0,228,160,0.12); color: var(--accent); } | |
| .card-icon.amber { background: rgba(245,166,35,0.12); color: var(--accent-secondary); } | |
| .card-icon.red { background: rgba(255,71,87,0.12); color: var(--accent-danger); } | |
| .card-icon.blue { background: rgba(0,180,216,0.12); color: var(--accent-info); } | |
| .card-title { | |
| font-size: 1.15rem; | |
| font-weight: 600; | |
| margin-bottom: 0.75rem; | |
| } | |
| .card-text { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| line-height: 1.7; | |
| } | |
| /* Grid layouts */ | |
| .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } | |
| .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } | |
| .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } | |
| /* Governance table */ | |
| .gov-table { | |
| width: 100%; | |
| border-collapse: separate; | |
| border-spacing: 0; | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| } | |
| .gov-table thead th { | |
| background: var(--bg-elevated); | |
| padding: 14px 20px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| color: var(--text-secondary); | |
| text-align: left; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .gov-table tbody td { | |
| padding: 16px 20px; | |
| font-size: 14px; | |
| border-bottom: 1px solid var(--border); | |
| vertical-align: top; | |
| } | |
| .gov-table tbody tr:last-child td { border-bottom: none; } | |
| .gov-table tbody tr { | |
| transition: background 0.2s; | |
| } | |
| .gov-table tbody tr:hover { | |
| background: var(--bg-card-hover); | |
| } | |
| .tag { | |
| display: inline-block; | |
| padding: 3px 10px; | |
| border-radius: 100px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.5px; | |
| } | |
| .tag-green { background: rgba(0,228,160,0.12); color: var(--accent); } | |
| .tag-amber { background: rgba(245,166,35,0.12); color: var(--accent-secondary); } | |
| .tag-red { background: rgba(255,71,87,0.12); color: var(--accent-danger); } | |
| .tag-blue { background: rgba(0,180,216,0.12); color: var(--accent-info); } | |
| /* Architecture Diagram */ | |
| .arch-diagram { | |
| position: relative; | |
| padding: 3rem 2rem; | |
| border-radius: var(--radius-lg); | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| overflow: hidden; | |
| } | |
| .arch-diagram::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background: radial-gradient(ellipse at 50% 0%, rgba(0,228,160,0.04), transparent 60%); | |
| pointer-events: none; | |
| } | |
| .harbor-layer { | |
| position: relative; | |
| border-radius: var(--radius); | |
| padding: 2rem; | |
| margin-bottom: 1rem; | |
| border: 1px solid; | |
| transition: all 0.3s ease; | |
| cursor: default; | |
| } | |
| .harbor-layer:last-child { margin-bottom: 0; } | |
| .harbor-layer:hover { transform: scale(1.01); } | |
| .harbor-outer { | |
| border-color: rgba(245,166,35,0.3); | |
| background: rgba(245,166,35,0.04); | |
| } | |
| .harbor-outer:hover { border-color: rgba(245,166,35,0.6); box-shadow: 0 0 30px rgba(245,166,35,0.08); } | |
| .harbor-inner { | |
| border-color: rgba(0,180,216,0.3); | |
| background: rgba(0,180,216,0.04); | |
| } | |
| .harbor-inner:hover { border-color: rgba(0,180,216,0.6); box-shadow: 0 0 30px rgba(0,180,216,0.08); } | |
| .harbor-fort { | |
| border-color: rgba(0,228,160,0.3); | |
| background: rgba(0,228,160,0.04); | |
| } | |
| .harbor-fort:hover { border-color: rgba(0,228,160,0.6); box-shadow: 0 0 30px rgba(0,228,160,0.08); } | |
| .harbor-label { | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| margin-bottom: 0.5rem; | |
| } | |
| .harbor-outer .harbor-label { color: var(--accent-secondary); } | |
| .harbor-inner .harbor-label { color: var(--accent-info); } | |
| .harbor-fort .harbor-label { color: var(--accent); } | |
| .harbor-title { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| } | |
| .harbor-desc { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| font-family: var(--font-mono); | |
| } | |
| /* Crypto table */ | |
| .crypto-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 1px; | |
| background: var(--border); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| } | |
| .crypto-cell { | |
| background: var(--bg-card); | |
| padding: 16px 20px; | |
| font-size: 13px; | |
| transition: background 0.2s; | |
| } | |
| .crypto-cell:hover { background: var(--bg-card-hover); } | |
| .crypto-header { | |
| background: var(--bg-elevated); | |
| font-weight: 600; | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| color: var(--text-secondary); | |
| } | |
| .crypto-mono { | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| color: var(--accent); | |
| } | |
| /* Timeline / Roadmap */ | |
| .timeline { | |
| position: relative; | |
| padding-left: 3rem; | |
| } | |
| .timeline::before { | |
| content: ''; | |
| position: absolute; | |
| left: 14px; | |
| top: 0; bottom: 0; | |
| width: 2px; | |
| background: linear-gradient(to bottom, var(--accent), var(--accent-info), var(--accent-secondary)); | |
| border-radius: 2px; | |
| } | |
| .timeline-item { | |
| position: relative; | |
| margin-bottom: 2.5rem; | |
| padding-left: 1rem; | |
| } | |
| .timeline-item:last-child { margin-bottom: 0; } | |
| .timeline-dot { | |
| position: absolute; | |
| left: -2.35rem; | |
| top: 6px; | |
| width: 12px; height: 12px; | |
| border-radius: 50%; | |
| border: 2px solid var(--accent); | |
| background: var(--bg-deep); | |
| } | |
| .timeline-item:nth-child(2) .timeline-dot { border-color: var(--accent-info); } | |
| .timeline-item:nth-child(3) .timeline-dot { border-color: var(--accent-secondary); } | |
| .timeline-item:nth-child(4) .timeline-dot { border-color: var(--accent-danger); } | |
| .timeline-item:nth-child(5) .timeline-dot { border-color: #a78bfa; } | |
| .timeline-phase { | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: 1.5px; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| margin-bottom: 4px; | |
| } | |
| .timeline-item:nth-child(2) .timeline-phase { color: var(--accent-info); } | |
| .timeline-item:nth-child(3) .timeline-phase { color: var(--accent-secondary); } | |
| .timeline-item:nth-child(4) .timeline-phase { color: var(--accent-danger); } | |
| .timeline-item:nth-child(5) .timeline-phase { color: #a78bfa; } | |
| .timeline-title { | |
| font-size: 1.15rem; | |
| font-weight: 600; | |
| margin-bottom: 0.4rem; | |
| } | |
| .timeline-time { | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| margin-bottom: 0.5rem; | |
| } | |
| .timeline-desc { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 0.5rem; | |
| } | |
| .timeline-budget { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 12px; | |
| background: var(--bg-elevated); | |
| border-radius: 100px; | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| color: var(--accent); | |
| font-weight: 600; | |
| } | |
| /* Metrics */ | |
| .metric-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 2rem; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .metric-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 3px; | |
| border-radius: 3px 3px 0 0; | |
| } | |
| .metric-card:nth-child(1)::before { background: var(--accent); } | |
| .metric-card:nth-child(2)::before { background: var(--accent-info); } | |
| .metric-card:nth-child(3)::before { background: var(--accent-secondary); } | |
| .metric-card:nth-child(4)::before { background: var(--accent-danger); } | |
| .metric-card:nth-child(5)::before { background: #a78bfa; } | |
| .metric-card:hover { | |
| border-color: var(--border-accent); | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-accent); | |
| } | |
| .metric-value { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| font-family: var(--font-mono); | |
| margin-bottom: 0.5rem; | |
| } | |
| .metric-card:nth-child(1) .metric-value { color: var(--accent); } | |
| .metric-card:nth-child(2) .metric-value { color: var(--accent-info); } | |
| .metric-card:nth-child(3) .metric-value { color: var(--accent-secondary); } | |
| .metric-card:nth-child(4) .metric-value { color: var(--accent-danger); } | |
| .metric-card:nth-child(5) .metric-value { color: #a78bfa; } | |
| .metric-label { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| margin-bottom: 1rem; | |
| font-weight: 500; | |
| } | |
| .metric-bar { | |
| height: 4px; | |
| background: var(--bg-elevated); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin-top: 0.5rem; | |
| } | |
| .metric-bar-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| transition: width 1.5s ease; | |
| width: 0; | |
| } | |
| .metric-card:nth-child(1) .metric-bar-fill { background: var(--accent); } | |
| .metric-card:nth-child(2) .metric-bar-fill { background: var(--accent-info); } | |
| .metric-card:nth-child(3) .metric-bar-fill { background: var(--accent-secondary); } | |
| .metric-card:nth-child(4) .metric-bar-fill { background: var(--accent-danger); } | |
| .metric-card:nth-child(5) .metric-bar-fill { background: #a78bfa; } | |
| .metric-target { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| font-family: var(--font-mono); | |
| margin-top: 0.5rem; | |
| } | |
| /* Compliance items */ | |
| .compliance-item { | |
| display: flex; | |
| gap: 1.25rem; | |
| padding: 1.5rem; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| margin-bottom: 1rem; | |
| transition: all 0.3s ease; | |
| } | |
| .compliance-item:hover { | |
| border-color: var(--border-accent); | |
| background: var(--bg-card-hover); | |
| } | |
| .compliance-icon { | |
| flex-shrink: 0; | |
| width: 40px; height: 40px; | |
| border-radius: 10px; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 16px; | |
| } | |
| .compliance-title { | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| margin-bottom: 0.4rem; | |
| } | |
| .compliance-text { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| line-height: 1.7; | |
| } | |
| /* Threat table */ | |
| .threat-row { | |
| display: grid; | |
| grid-template-columns: 2fr 1.5fr 1.5fr 2.5fr; | |
| gap: 1rem; | |
| padding: 1.25rem 1.5rem; | |
| border-bottom: 1px solid var(--border); | |
| align-items: center; | |
| transition: background 0.2s; | |
| font-size: 13px; | |
| } | |
| .threat-row:hover { background: var(--bg-card-hover); } | |
| .threat-row.header { | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| color: var(--text-secondary); | |
| background: var(--bg-elevated); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .threat-name { font-weight: 600; } | |
| .threat-actor { color: var(--text-secondary); } | |
| .threat-impact { } | |
| .threat-control { color: var(--text-secondary); font-size: 12px; } | |
| /* IR table */ | |
| .ir-phase { | |
| display: grid; | |
| grid-template-columns: 120px 1fr 1fr; | |
| gap: 1.5rem; | |
| padding: 1.5rem; | |
| border-bottom: 1px solid var(--border); | |
| transition: background 0.2s; | |
| } | |
| .ir-phase:hover { background: var(--bg-card-hover); } | |
| .ir-phase-header { | |
| display: grid; | |
| grid-template-columns: 120px 1fr 1fr; | |
| gap: 1.5rem; | |
| padding: 1rem 1.5rem; | |
| background: var(--bg-elevated); | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| color: var(--text-secondary); | |
| border-bottom: 1px solid var(--border); | |
| border-radius: var(--radius) var(--radius) 0 0; | |
| } | |
| .ir-phase-name { | |
| font-weight: 700; | |
| font-size: 13px; | |
| } | |
| /* Phase indicators */ | |
| .phase-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 12px; | |
| border-radius: 100px; | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: 0.5px; | |
| } | |
| .phase-current { background: rgba(0,228,160,0.12); color: var(--accent); } | |
| .phase-future { background: rgba(0,180,216,0.12); color: var(--accent-info); } | |
| .phase-distant { background: rgba(167,139,250,0.12); color: #a78bfa; } | |
| /* PQC Phases */ | |
| .pqc-phase { | |
| padding: 1.5rem; | |
| border-radius: var(--radius); | |
| border: 1px solid var(--border); | |
| background: var(--bg-card); | |
| transition: all 0.3s ease; | |
| } | |
| .pqc-phase:hover { | |
| border-color: var(--border-accent); | |
| transform: translateY(-2px); | |
| } | |
| .pqc-phase-num { | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: 1.5px; | |
| color: var(--accent); | |
| margin-bottom: 0.5rem; | |
| } | |
| .pqc-phase-title { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| } | |
| .pqc-phase-time { | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| margin-bottom: 0.75rem; | |
| } | |
| .pqc-phase-desc { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| line-height: 1.7; | |
| } | |
| /* HSPA Emulator */ | |
| .spec-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1px; | |
| background: var(--border); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| } | |
| .spec-item { | |
| background: var(--bg-card); | |
| padding: 1.25rem 1.5rem; | |
| transition: background 0.2s; | |
| } | |
| .spec-item:hover { background: var(--bg-card-hover); } | |
| .spec-label { | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| color: var(--text-muted); | |
| margin-bottom: 0.4rem; | |
| } | |
| .spec-value { | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .spec-value.mono { | |
| font-family: var(--font-mono); | |
| color: var(--accent); | |
| font-size: 13px; | |
| } | |
| /* Artifact index */ | |
| .artifact-list { | |
| list-style: none; | |
| } | |
| .artifact-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| padding: 1rem 1.25rem; | |
| border-radius: var(--radius); | |
| margin-bottom: 0.5rem; | |
| transition: all 0.2s; | |
| cursor: default; | |
| } | |
| .artifact-item:hover { | |
| background: var(--bg-card); | |
| } | |
| .artifact-icon { | |
| width: 36px; height: 36px; | |
| border-radius: 8px; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 14px; | |
| flex-shrink: 0; | |
| } | |
| .artifact-name { | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .artifact-desc { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| /* Footer */ | |
| footer { | |
| border-top: 1px solid var(--border); | |
| padding: 3rem 2rem; | |
| text-align: center; | |
| color: var(--text-muted); | |
| font-size: 13px; | |
| } | |
| footer a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| } | |
| /* Divider */ | |
| .section-divider { | |
| width: 100%; | |
| height: 1px; | |
| background: linear-gradient(to right, transparent, var(--border), transparent); | |
| margin: 0; | |
| } | |
| /* Animations */ | |
| @keyframes fadeSlideUp { | |
| from { opacity: 0; transform: translateY(24px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-8px); } | |
| } | |
| .pulse { animation: pulse 2s ease-in-out infinite; } | |
| /* Toast notification */ | |
| .toast-container { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| z-index: 2000; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .toast { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border-accent); | |
| border-radius: var(--radius); | |
| padding: 1rem 1.5rem; | |
| font-size: 13px; | |
| color: var(--text-primary); | |
| box-shadow: var(--shadow); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| animation: fadeSlideUp 0.4s ease both; | |
| max-width: 360px; | |
| } | |
| .toast i { color: var(--accent); } | |
| /* Search overlay */ | |
| .search-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(6,11,20,0.9); | |
| backdrop-filter: blur(20px); | |
| z-index: 2000; | |
| display: none; | |
| justify-content: center; | |
| padding-top: 15vh; | |
| } | |
| .search-overlay.open { display: flex; } | |
| .search-box { | |
| width: 90%; | |
| max-width: 600px; | |
| } | |
| .search-input { | |
| width: 100%; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 1.25rem 1.5rem; | |
| font-size: 18px; | |
| font-family: var(--font-display); | |
| color: var(--text-primary); | |
| outline: none; | |
| transition: border-color 0.2s; | |
| } | |
| .search-input:focus { border-color: var(--accent); } | |
| .search-input::placeholder { color: var(--text-muted); } | |
| .search-results { | |
| margin-top: 1rem; | |
| max-height: 50vh; | |
| overflow-y: auto; | |
| } | |
| .search-result-item { | |
| padding: 1rem 1.5rem; | |
| border-radius: var(--radius); | |
| cursor: pointer; | |
| transition: background 0.2s; | |
| font-size: 14px; | |
| } | |
| .search-result-item:hover { background: var(--bg-card); } | |
| .search-result-section { | |
| font-size: 11px; | |
| color: var(--accent); | |
| font-weight: 600; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| } | |
| .search-result-title { font-weight: 500; margin-top: 2px; } | |
| /* Back to top */ | |
| .back-to-top { | |
| position: fixed; | |
| bottom: 2rem; | |
| left: 2rem; | |
| width: 44px; height: 44px; | |
| border-radius: 50%; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| color: var(--text-secondary); | |
| display: flex; align-items: center; justify-content: center; | |
| cursor: pointer; | |
| z-index: 100; | |
| transition: all 0.3s ease; | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .back-to-top.visible { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .back-to-top:hover { | |
| color: var(--accent); | |
| border-color: var(--border-accent); | |
| transform: translateY(-2px); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 1024px) { | |
| .grid-4 { grid-template-columns: repeat(2, 1fr); } | |
| .grid-3 { grid-template-columns: repeat(2, 1fr); } | |
| .threat-row { grid-template-columns: 1fr; gap: 0.5rem; } | |
| .threat-row.header { display: none; } | |
| .ir-phase, .ir-phase-header { grid-template-columns: 1fr; gap: 0.75rem; } | |
| .crypto-grid { grid-template-columns: repeat(2, 1fr); } | |
| } | |
| @media (max-width: 768px) { | |
| .nav-links, .nav-credit { display: none; } | |
| .mobile-toggle { display: block; } | |
| .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } | |
| .hero-stats { flex-direction: column; gap: 1.5rem; } | |
| .spec-grid { grid-template-columns: 1fr; } | |
| .section { padding: 60px 1.25rem; } | |
| .hero { padding: 100px 1.25rem 60px; } | |
| .crypto-grid { grid-template-columns: 1fr; } | |
| } | |
| /* Prefers reduced motion */ | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { | |
| animation-duration: 0.01ms ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="bg-canvas" aria-hidden="true"></canvas> | |
| <!-- Navigation --> | |
| <nav class="nav-wrapper" id="navbar" role="navigation" aria-label="Main navigation"> | |
| <div class="nav-inner"> | |
| <a href="#hero" class="nav-brand" aria-label="BSBS Home"> | |
| <div class="nav-brand-icon">BS</div> | |
| <div class="nav-brand-text"><span>BSBS</span> Framework</div> | |
| </a> | |
| <ul class="nav-links"> | |
| <li><a href="#executive">Executive</a></li> | |
| <li><a href="#governance">Governance</a></li> | |
| <li><a href="#threats">Threats</a></li> | |
| <li><a href="#architecture">Architecture</a></li> | |
| <li><a href="#pqc">Post-Quantum</a></li> | |
| <li><a href="#emulator">HSPA</a></li> | |
| <li><a href="#incident">IR Plan</a></li> | |
| <li><a href="#roadmap">Roadmap</a></li> | |
| <li><a href="#metrics">Metrics</a></li> | |
| </ul> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener" class="nav-credit">Built with anycoder</a> | |
| <button class="mobile-toggle" id="mobileToggle" aria-label="Toggle navigation menu"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Mobile Nav --> | |
| <div class="mobile-nav" id="mobileNav" role="navigation" aria-label="Mobile navigation"> | |
| <a href="#executive">Executive Summary</a> | |
| <a href="#governance">Governance & Legal</a> | |
| <a href="#threats">Threat Model</a> | |
| <a href="#architecture">Architecture</a> | |
| <a href="#pqc">Post-Quantum Crypto</a> | |
| <a href="#emulator">HSPA Emulator</a> | |
| <a href="#incident">Incident Response</a> | |
| <a href="#roadmap">Roadmap</a> | |
| <a href="#metrics">Metrics</a> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener">Built with anycoder</a> | |
| </div> | |
| <!-- Search Overlay --> | |
| <div class="search-overlay" id="searchOverlay" role="dialog" aria-label="Search"> | |
| <div class="search-box"> | |
| <input type="text" class="search-input" id="searchInput" placeholder="Search BSBS framework..." aria-label="Search"> | |
| <div class="search-results" id="searchResults"></div> | |
| </div> | |
| </div> | |
| <main> | |
| <!-- Hero Section --> | |
| <section class="hero" id="hero"> | |
| <div class="hero-badge"><i class="fas fa-shield-halved"></i> Municipal Cybersecurity Framework v1.0</div> | |
| <h1 class="hero-title">Baltimore Secure<br><span class="highlight">Backbone System</span></h1> | |
| <p class="hero-subtitle">A zero-trust municipal backbone integrating constitutional privacy safeguards, NIST-aligned risk management, and transitional post-quantum cryptographic protocols for critical infrastructure protection.</p> | |
| <div class="hero-actions"> | |
| <a href="#architecture" class="btn btn-primary"><i class="fas fa-diagram-project"></i> View Architecture</a> | |
| <a href="#executive" class="btn btn-outline"><i class="fas fa-file-lines"></i> Read Framework</a> | |
| <button class="btn btn-outline" id="searchBtn" aria-label="Search"><i class="fas fa-search"></i> Search</button> | |
| </div> | |
| <div class="hero-stats"> | |
| <div class="hero-stat"> | |
| <div class="hero-stat-value" data-count="47">0</div> | |
| <div class="hero-stat-label">Departments</div> | |
| </div> | |
| <div class="hero-stat"> | |
| <div class="hero-stat-value" data-count="5"> |