+
+
+
+
+
+
+
+
+
+ roberto@thesolidchain: ~
+
+ online
+
+ uptime: 20y+
+
+
+ region: es-remote-1
+
+
+
+ );
+}
diff --git a/apps/website/src/styles.css b/apps/website/src/styles.css
index e23ee86..16a31be 100644
--- a/apps/website/src/styles.css
+++ b/apps/website/src/styles.css
@@ -40,6 +40,88 @@ body {
color: var(--lime);
}
+/* shared sticky header: corporate statusbar + product topbar */
+.hdr {
+ position: sticky;
+ top: 0;
+ z-index: 5;
+}
+
+.statusbar {
+ display: flex;
+ gap: 18px;
+ flex-wrap: wrap;
+ align-items: center;
+ padding: 6px 18px;
+ background: var(--panel);
+ border-bottom: 1px solid var(--edge);
+ font-size: 11.5px;
+ color: var(--dim);
+}
+
+.statusbar .brand {
+ display: inline-flex;
+ align-items: center;
+}
+
+.statusbar .dots {
+ display: inline-flex;
+ gap: 6px;
+ margin-right: 4px;
+}
+
+.statusbar .dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+}
+
+.dot.r {
+ background: #e5534b;
+}
+
+.dot.y {
+ background: #d4a72c;
+}
+
+.dot.g {
+ background: #3fb950;
+}
+
+.statusbar b {
+ color: var(--ink);
+ font-weight: 600;
+}
+
+.statusbar .led {
+ color: var(--ok);
+}
+
+.statusbar .led::before {
+ content: "\25cf ";
+}
+
+.statusbar .cursor {
+ display: inline-block;
+ width: 8px;
+ height: 14px;
+ margin-left: auto;
+ background: var(--accent);
+ animation: blink 1.1s steps(1) infinite;
+}
+
+@keyframes blink {
+ 50% {
+ opacity: 0;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .statusbar .cursor {
+ animation: none;
+ }
+}
+
/* topbar */
.topbar {
display: flex;
@@ -48,9 +130,6 @@ body {
padding: 12px 18px;
border-bottom: 1px solid var(--edge);
background: var(--panel);
- position: sticky;
- top: 0;
- z-index: 5;
font-size: 12px;
}