phase-4: scss upgrade

2026-06-04 15:49:49 -04:00
parent 0a0a368b87
commit 104ed81b9f
18 changed files with 1275 additions and 819 deletions
@@ -0,0 +1,109 @@
+// ── Shell & Navigation ────────────────────────────────────────────────────
+
+.shell {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+nav {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2xl);
+  padding: 14px 32px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-base);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.brand { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); }
+
+.links {
+  display: flex;
+  gap: var(--space-xs);
+  margin-left: auto;
+
+  a {
+    color: var(--text-dim);
+    text-decoration: none;
+    padding: 6px 14px;
+    border-radius: var(--radius-sm);
+    font-weight: 500;
+    transition: color var(--transition), background var(--transition);
+
+    // Active and hover share identical styles — one rule
+    &:hover,
+    &.active {
+      color: var(--text-secondary);
+      background: var(--bg-card);
+    }
+  }
+}
+
+main { flex: 1; padding: 28px 32px; }
+
+// ── Navigation progress bar ───────────────────────────────────────────────
+
+.nav-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  z-index: 100;
+  background: var(--bg-card);
+  overflow: hidden;
+
+  .nav-bar {
+    height: 100%;
+    background: var(--blue);
+    animation: nav-progress 1.5s ease-in-out infinite;
+    transform-origin: left;
+  }
+}
+
+@keyframes nav-progress {
+  0%   { transform: translateX(-100%) scaleX(0.3); }
+  50%  { transform: translateX(0%)    scaleX(0.7); }
+  100% { transform: translateX(100%)  scaleX(0.3); }
+}
+
+// ── Page-load overlay ─────────────────────────────────────────────────────
+
+.nav-overlay {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  padding: 100px 0;
+  flex: 1;
+}
+
+.nav-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--bg-card);
+  border-top-color: var(--blue);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+
+.nav-label {
+  font-size: var(--fs-xs);
+  color: var(--text-dimmer);
+  letter-spacing: 0.02em;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+// ── Shared loading area ───────────────────────────────────────────────────
+
+.loading-area {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 80px 0;
+}