feat: add functionalities overview

2026-05-09 19:16:30 +02:00
parent 2d2febb7aa
commit 96c26c2406
3 changed files with 292 additions and 2 deletions
@@ -592,3 +592,137 @@ pre {
    align-items: stretch;
  }
 }
+
+.functionality-summary,
+.functionality-signal {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+
+.functionality-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
+  gap: 1rem;
+  overflow: hidden;
+  position: relative;
+}
+
+.functionality-hero::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(45, 212, 191, 0.08), rgba(129, 140, 248, 0.08), transparent 70%);
+  pointer-events: none;
+}
+
+.functionality-hero > *,
+.functionality-card > *,
+.functionality-roadmap > * {
+  position: relative;
+  z-index: 1;
+}
+
+.functionality-hero h3,
+.functionality-card h3,
+.functionality-roadmap h3 {
+  margin: 0;
+}
+
+.functionality-hero p,
+.functionality-card p,
+.functionality-roadmap p {
+  color: #c9d4ea;
+}
+
+.functionality-scorecard,
+.roadmap-grid {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.functionality-scorecard div,
+.roadmap-grid div {
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  border-radius: 18px;
+  background: rgba(30, 41, 59, 0.58);
+  padding: 1rem;
+}
+
+.functionality-scorecard span {
+  display: block;
+  color: #9fb4d9;
+  font-size: 0.82rem;
+}
+
+.functionality-scorecard strong {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 1.45rem;
+}
+
+.functionality-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.functionality-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+  min-height: 240px;
+  overflow: hidden;
+  position: relative;
+}
+
+.functionality-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.functionality-live::before,
+.functionality-active::before {
+  background: linear-gradient(180deg, rgba(52, 211, 153, 0.09), transparent 55%);
+}
+
+.functionality-ready::before,
+.functionality-syncing::before {
+  background: linear-gradient(180deg, rgba(96, 165, 250, 0.09), transparent 55%);
+}
+
+.functionality-degraded::before {
+  background: linear-gradient(180deg, rgba(248, 113, 113, 0.12), transparent 55%);
+}
+
+.functionality-signal {
+  margin-top: auto;
+  justify-content: space-between;
+  color: #bfdbfe;
+  font-size: 0.9rem;
+}
+
+.roadmap-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+@media (max-width: 1080px) {
+  .functionality-grid,
+  .functionality-hero,
+  .roadmap-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 720px) {
+  .functionality-summary,
+  .functionality-signal {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}