current state

2026-02-08 10:42:01 +01:00
parent 0a4372c40d
commit e055af9248
70 changed files with 4882 additions and 330 deletions
--- a/public/css/nova.css
+++ b/public/css/nova.css
@@ -0,0 +1,187 @@
+    /* RESET */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: system-ui, sans-serif;
+    }
+
+    body {
+      background: #dfe5e9;
+      color: #e3e3e3;
+      min-height: 200vh;
+    }
+
+    /* TOPBAR */
+    .topbar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 64px;
+      background: #1c1c1f;
+      border-bottom: 1px solid #2a2a33;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 20px;
+      z-index: 9999;
+    }
+
+    .topbar a {
+      color: #eaeaea;
+      text-decoration: none;
+      font-size: 14px;
+    }
+
+    /* LEFT */
+    .topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .logo {
+      font-size: 20px;
+      font-weight: 600;
+      color: #4da3ff;
+    }
+
+    /* CENTER SEARCH */
+    .topbar-center {
+      flex: 1;
+      max-width: 520px;
+      margin: 0 20px;
+    }
+
+    .search-box {
+      position: relative;
+      width: 100%;
+    }
+
+    .search-box input {
+      width: 100%;
+      background: #1a1a22;
+      border: 1px solid #262631;
+      border-radius: 8px;
+      padding: 10px 40px 10px 14px;
+      color: #fff;
+      outline: none;
+    }
+
+    .search-box i {
+      position: absolute;
+      right: 14px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #777;
+    }
+
+    /* RIGHT */
+    .topbar-right {
+      display: flex;
+      align-items: center;
+      gap: 18px;
+    }
+
+    .icon-btn {
+      background: none;
+      border: none;
+      color: #ddd;
+      font-size: 16px;
+      cursor: pointer;
+      position: relative;
+    }
+
+    /* BADGE */
+    .badge {
+      position: absolute;
+      top: -4px;
+      right: -6px;
+      background: #ff5c5c;
+      color: #fff;
+      font-size: 10px;
+      padding: 2px 5px;
+      border-radius: 10px;
+      line-height: 1;
+    }
+
+    .icon-btn:hover {
+      color: #4da3ff;
+    }
+
+    /* DROPDOWN */
+    .dropdown {
+      position: relative;
+    }
+
+    .dropdown-menu {
+      position: absolute;
+      top: 120%;
+      right: 0;
+      background: #1a1a22;
+      border: 1px solid #262631;
+      border-radius: 8px;
+      min-width: 180px;
+      display: none;
+      overflow: hidden;
+      box-shadow: 0 8px 24px rgba(0,0,0,.4);
+    }
+
+    .dropdown-menu a {
+      display: block;
+      padding: 10px 14px;
+      font-size: 13px;
+    }
+
+    .dropdown-menu a:hover {
+      background: #242430;
+    }
+
+    .dropdown.active .dropdown-menu {
+      display: block;
+    }
+
+    /* MOBILE */
+    .mobile-toggle {
+      display: none;
+      font-size: 18px;
+    }
+
+    .mobile-menu {
+      display: none;
+      position: fixed;
+      top: 64px;
+      left: 0;
+      right: 0;
+      background: #121217;
+      border-bottom: 1px solid #262631;
+      padding: 16px;
+    }
+
+    .mobile-menu a {
+      display: block;
+      padding: 10px 0;
+      border-bottom: 1px solid #1f1f26;
+    }
+
+    .mobile-menu.show {
+      display: block;
+    }
+
+    main {
+      padding-top: 80px;
+    }
+
+    /* RESPONSIVE */
+    @media (max-width: 768px) {
+
+      .topbar-center {
+        display: none;
+      }
+
+      .mobile-toggle {
+        display: block;
+      }
+
+    }