Adjust nav links and dark header

1 files changed, 86 insertions, 79 deletions

diff --git a/makima/frontend/public/index.html b/makima/frontend/public/index.html
index 83544a1..b52bd05 100644
--- a/makima/frontend/public/index.html
+++ b/makima/frontend/public/index.html
@@ -14,12 +14,12 @@
       content="本ページは現在準備中です。技術試験的な仮ページとして、makima.jp の情報公開を待機中です。"
     />
     <style type="text/css">
-      /* Base layout with grid + ASCII-inspired accents */
+      /* Base layout with grid + ASCII-inspired accents (dark theme) */
       body {
         margin: 0;
         padding: 0;
-        color: #0c2343;
-        background: #e7edf7;
+        color: #dbe7ff;
+        background: #02040a;
         font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho",
           "MS Mincho", "Noto Serif JP", serif;
         line-height: 1.7;
@@ -35,16 +35,17 @@
         pointer-events: none;
         background: linear-gradient(
             90deg,
-            rgba(13, 46, 104, 0.08) 1px,
-            rgba(255, 255, 255, 0.06) 1px
+            rgba(117, 170, 252, 0.16) 1px,
+            rgba(255, 255, 255, 0.05) 1px
           ),
           linear-gradient(
             0deg,
-            rgba(13, 46, 104, 0.08) 1px,
-            rgba(255, 255, 255, 0.06) 1px
+            rgba(117, 170, 252, 0.16) 1px,
+            rgba(255, 255, 255, 0.05) 1px
           );
         background-size: 28px 28px, 28px 28px;
-        mix-blend-mode: multiply;
+        mix-blend-mode: screen;
+        opacity: 0.6;
       }
       body::after {
         content: "";
@@ -53,18 +54,18 @@
         pointer-events: none;
         background: linear-gradient(
           180deg,
-          rgba(0, 36, 110, 0.08) 0%,
-          rgba(231, 237, 247, 0.4) 40%,
-          rgba(0, 36, 110, 0.08) 100%
+          rgba(3, 17, 40, 0.8) 0%,
+          rgba(7, 15, 29, 0.5) 45%,
+          rgba(3, 17, 40, 0.8) 100%
         );
       }
       .frame {
         max-width: 980px;
         margin: 30px auto 40px auto;
-        background: rgba(255, 255, 255, 0.94);
-        border: 1px solid #375b8d;
-        box-shadow: 0 12px 30px rgba(14, 46, 104, 0.2),
-          0 0 0 6px rgba(255, 255, 255, 0.55);
+        background: rgba(9, 13, 20, 0.92);
+        border: 1px solid #2f476d;
+        box-shadow: 0 12px 30px rgba(5, 12, 25, 0.5),
+          0 0 0 6px rgba(14, 25, 44, 0.6);
         position: relative;
         overflow: hidden;
       }
@@ -79,8 +80,8 @@
           90deg,
           #0f3c78 0px,
           #0f3c78 40px,
-          #75aafc 40px,
-          #75aafc 44px
+          #3f6fb3 40px,
+          #3f6fb3 44px
         );
         opacity: 0.7;
       }
@@ -88,18 +89,13 @@
         content: "";
         position: absolute;
         inset: 0;
-        border: 1px dashed rgba(12, 35, 67, 0.22);
+        border: 1px dashed rgba(89, 122, 170, 0.25);
         pointer-events: none;
       }
       .masthead {
         padding: 14px 18px 12px 18px;
-        border-bottom: 4px double #153667;
-        background: linear-gradient(
-          90deg,
-          rgba(21, 54, 103, 0.12),
-          rgba(255, 255, 255, 0.9),
-          rgba(21, 54, 103, 0.12)
-        );
+        border-bottom: 4px double #050d1f;
+        background: #08162e;
       }
       .masthead-top {
         display: flex;
@@ -116,12 +112,13 @@
       .masthead h1 {
         margin: 0;
         font-size: 22px;
-        color: #0f3c78;
+        color: #ffffff;
+        text-shadow: 0 0 6px rgba(0, 0, 0, 0.18);
         letter-spacing: 0.1em;
       }
       .masthead .subtitle {
         display: block;
-        color: #1f2f50;
+        color: #dbe7ff;
         font-size: 12px;
         letter-spacing: 0.08em;
       }
@@ -129,8 +126,8 @@
         margin-left: auto;
         padding: 4px 10px;
         background: #153667;
-        color: #e8f1ff;
-        border: 1px solid #0f3c78;
+        color: #dbe7ff;
+        border: 1px solid #3f6fb3;
         font-size: 12px;
         letter-spacing: 0.12em;
         text-transform: uppercase;
@@ -140,19 +137,19 @@
         align-items: center;
         gap: 10px;
         padding: 10px 12px;
-        border-top: 1px dashed rgba(15, 60, 120, 0.4);
-        border-bottom: 1px dashed rgba(15, 60, 120, 0.4);
-        background: #f6f8ff;
+        border-top: 1px dashed rgba(117, 170, 252, 0.35);
+        border-bottom: 1px dashed rgba(117, 170, 252, 0.35);
+        background: #0c1729;
         font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New",
           monospace;
         text-transform: uppercase;
         letter-spacing: 0.06em;
       }
       .nav-strip .nav-label {
-        color: #0f3c78;
+        color: #9bc3ff;
         font-size: 11px;
         padding-right: 10px;
-        border-right: 1px solid rgba(15, 60, 120, 0.35);
+        border-right: 1px solid rgba(117, 170, 252, 0.35);
       }
       .nav-strip .nav-links {
         display: flex;
@@ -161,17 +158,25 @@
         align-items: center;
       }
       .nav-strip .nav-links a {
-        color: #0f3c78;
+        color: #eef5ff;
         text-decoration: none;
         padding: 4px 8px;
-        border: 1px dashed rgba(15, 60, 120, 0.35);
-        background: #fff;
+        border: 1px dashed rgba(117, 170, 252, 0.5);
+        background: #0f1c2f;
+      }
+      .nav-strip .nav-links a[aria-disabled="true"] {
+        color: #9aa9c6;
+        border-color: rgba(117, 170, 252, 0.25);
+        cursor: not-allowed;
+        pointer-events: none;
+        text-decoration: none;
+        background: #0b1423;
       }
       .ticker {
         margin-top: 12px;
         border: 1px solid #153667;
-        background: #0f3c78;
-        color: #c5dbff;
+        background: #0a2242;
+        color: #b9d4ff;
         font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New",
           monospace;
         font-size: 12px;
@@ -226,8 +231,8 @@
       }
       .floating-card {
         position: absolute;
-        background: #0f3c78;
-        color: #c5dbff;
+        background: #0c203b;
+        color: #cfe2ff;
         padding: 8px 10px;
         font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New",
           monospace;
@@ -254,18 +259,19 @@
       .hero-copy h2 {
         margin: 0 0 10px 0;
         font-size: 20px;
-        color: #112f5f;
+        color: #f0f5ff;
         letter-spacing: 0.08em;
       }
       .hero-copy p {
         margin: 4px 0 12px 0;
+        color: #e4edff;
       }
       .badge {
         display: inline-block;
         padding: 4px 8px;
-        border: 1px solid #0f3c78;
-        background: #f4f7ff;
-        color: #0f3c78;
+        border: 1px solid #3f6fb3;
+        background: #0f1c2f;
+        color: #9bc3ff;
         font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New",
           monospace;
         font-size: 11px;
@@ -283,9 +289,9 @@
         display: inline-block;
         padding: 8px 10px;
         border: 1px solid #0f3c78;
-        background: #ffffff;
+        background: #0d1b2d;
         text-decoration: none;
-        color: #0f3c78;
+        color: #dbe7ff;
         font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New",
           monospace;
         font-size: 13px;
@@ -298,7 +304,7 @@
         inset: 0;
         display: grid;
         place-items: center;
-        color: rgba(117, 170, 252, 0.55);
+        color: rgba(200, 225, 255, 0.8);
         mix-blend-mode: multiply;
         opacity: 0;
         transition: opacity 0.2s ease-in-out;
@@ -331,7 +337,7 @@
           monospace;
         font-size: 11px;
         letter-spacing: 0.08em;
-        color: rgba(15, 60, 120, 0.55);
+        color: rgba(168, 201, 255, 0.55);
         text-align: center;
         z-index: 3;
       }
@@ -339,8 +345,8 @@
         width: 230px;
         height: 230px;
         border-radius: 50%;
-        border: 1px solid rgba(21, 54, 103, 0.6);
-        background: radial-gradient(circle, #e8f1ff 0%, #d6e5ff 60%, #bcd2ff 100%);
+        border: 1px solid rgba(63, 111, 179, 0.6);
+        background: #070f1d;
         display: grid;
         place-items: center;
         position: relative;
@@ -353,9 +359,9 @@
         border-radius: 50%;
         background: radial-gradient(
           circle,
-          rgba(117, 170, 252, 0.4) 0%,
-          rgba(117, 170, 252, 0.2) 38%,
-          rgba(15, 60, 120, 0.1) 64%,
+          rgba(117, 170, 252, 0.25) 0%,
+          rgba(117, 170, 252, 0.12) 38%,
+          rgba(15, 60, 120, 0.06) 64%,
           transparent 85%
         );
         opacity: 0;
@@ -372,8 +378,8 @@
         position: absolute;
         inset: 10px;
         border-radius: 50%;
-        border: 1px solid rgba(117, 170, 252, 0.5);
-        box-shadow: 0 0 18px rgba(15, 60, 120, 0.25);
+        border: 1px solid rgba(15, 60, 120, 0.35);
+        box-shadow: 0 0 0 rgba(15, 60, 120, 0.1);
         opacity: 0;
         transform: scale(0.9);
         transition: opacity 0.45s ease, transform 0.6s ease;
@@ -411,7 +417,7 @@
         fill: #0f3c78;
       }
       .logo-shell:hover .logo-svg {
-        filter: drop-shadow(0 0 14px rgba(15, 60, 120, 0.45));
+        filter: drop-shadow(0 0 10px rgba(15, 60, 120, 0.35));
       }
       .logo-shell:hover .ring-outer {
         animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
@@ -466,15 +472,15 @@
       }
       @keyframes glow-pulse {
         0% {
-          opacity: 0.4;
+          opacity: 0.16;
           transform: scale(1.02);
         }
         50% {
-          opacity: 1;
+          opacity: 0.28;
           transform: scale(1.12);
         }
         100% {
-          opacity: 0.4;
+          opacity: 0.16;
           transform: scale(1.02);
         }
       }
@@ -529,7 +535,7 @@
       }
       .notice-panel {
         border: 1px solid #b3c8e8;
-        background: #fdfdff;
+        background: #0c1525;
         padding: 16px 18px;
         position: relative;
       }
@@ -539,8 +545,8 @@
         top: -10px;
         left: 12px;
         padding: 2px 6px;
-        background: #e8f1ff;
-        border: 1px solid #0f3c78;
+        background: #0f1c2f;
+        border: 1px solid #3f6fb3;
         font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New",
           monospace;
         font-size: 11px;
@@ -549,10 +555,11 @@
       .notice-panel h3 {
         margin: 4px 0 8px 0;
         font-size: 18px;
-        color: #112f5f;
+        color: #eef5ff;
       }
       .notice-panel p {
         margin: 6px 0;
+        color: #dbe7ff;
       }
       .meta-grid {
         display: grid;
@@ -560,11 +567,11 @@
         gap: 12px;
         margin-top: 12px;
         font-size: 12px;
-        color: #283d66;
+        color: #e4edff;
       }
       .meta-grid .box {
-        border: 1px solid #c2d4f0;
-        background: #fff;
+        border: 1px solid #3f6fb3;
+        background: #0d1b2d;
         padding: 10px 12px;
         font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New",
           monospace;
@@ -574,7 +581,7 @@
         margin-top: 24px;
         border: 1px solid #0f3c78;
         background: #0f3c78;
-        color: #c5dbff;
+        color: #dbe7ff;
         box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
       }
       .terminal header {
@@ -613,30 +620,30 @@
       }
       .links li {
         margin: 6px 0;
-        color: #0f3c78;
+        color: #e4edff;
       }
       .links a {
-        color: #0f3c78;
+        color: #dbe7ff;
         text-decoration: underline;
       }
       .footer {
         padding: 12px 18px 16px 18px;
-        border-top: 4px double #153667;
+        border-top: 4px double #23477a;
         background: linear-gradient(
           180deg,
-          rgba(255, 255, 255, 0.95),
-          rgba(21, 54, 103, 0.08)
+          rgba(11, 18, 32, 0.95),
+          rgba(14, 26, 45, 0.7)
         );
         font-size: 12px;
-        color: #1f2f50;
+        color: #e4edff;
         text-align: center;
       }
       .footer .domain {
-        color: #0f3c78;
+        color: #dbe7ff;
         text-decoration: underline;
       }
       ::selection {
-        background: #d8e6ff;
+        background: rgba(117, 170, 252, 0.35);
       }
       @media (max-width: 720px) {
         .frame {
@@ -693,14 +700,14 @@
         <div class="nav-strip" aria-label="quick navigation">
           <span class="nav-label">NAV//</span>
           <div class="nav-links">
-            <a href="https://github.com" target="_blank" rel="noopener" class="rewrite-link" data-ghost="rewrite"
+            <a href="https://github.com/soryu-co" target="_blank" rel="noopener" class="rewrite-link" data-ghost="rewrite"
               >GitHub</a
             >
-            <a href="https://docs.makima.jp" class="rewrite-link" data-ghost="rewrite">Docs</a>
-            <a href="https://makima.jp" class="rewrite-link" data-ghost="rewrite">Domain</a>
+            <a href="#" aria-disabled="true" class="rewrite-link" data-ghost="rewrite">Docs</a>
             <a href="https://soryu.co" class="rewrite-link" data-ghost="rewrite" target="_blank" rel="noopener"
               >Soryu</a
             >
+            <a href="#" aria-disabled="true" class="rewrite-link" data-ghost="rewrite">Download</a>
           </div>
         </div>
       </div>