Add nav styles to App.css

2026-04-25 17:27:32 +00:00
parent 54b97f28ff
commit 69b5f42ad6
1 changed files with 61 additions and 0 deletions
--- a/src/App.css
+++ b/src/App.css
@@ -330,3 +330,64 @@
  font-family: monospace;
  letter-spacing: 0.1em;
 }
+
+/* Navigation */
+.main-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid #c8b89a;
+  background: #f5f0e8;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.nav-title {
+  font-size: 0.85rem;
+  letter-spacing: 0.2em;
+  color: #6b5a3e;
+}
+
+.nav-links {
+  display: flex;
+  gap: 8px;
+}
+
+.nav-btn {
+  padding: 4px 14px;
+  border-radius: 12px;
+  border: 1px solid #c8b89a;
+  background: transparent;
+  color: #6b5a3e;
+  font-size: 0.78rem;
+  letter-spacing: 0.05em;
+  transition: background 0.15s;
+}
+
+.nav-btn:hover {
+  background: #ede8df;
+}
+
+.nav-btn.active {
+  background: #2a1f0e;
+  color: #f5f0e8;
+  border-color: #2a1f0e;
+}
+
+/* Screen wrapper */
+.screen-wrap {
+  min-height: calc(100vh - 49px);
+}
+
+/* Placeholder screens */
+.placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(100vh - 49px);
+  font-style: italic;
+  color: #6b5a3e;
+  font-size: 0.85rem;
+}