From f8ebe386be1c52bed5f5e33cf859b03dcd2a727d Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Wed, 10 Dec 2025 03:02:48 +0000
Subject: Refine mobile nav and overlays

---
 makima/frontend/public/index.html | 101 +++++++++++++++++++++++++++-----------
 1 file changed, 71 insertions(+), 30 deletions(-)

(limited to 'makima')

diff --git a/makima/frontend/public/index.html b/makima/frontend/public/index.html
index b52bd05..e6c9907 100644
--- a/makima/frontend/public/index.html
+++ b/makima/frontend/public/index.html
@@ -229,6 +229,11 @@
         margin-bottom: 22px;
         position: relative;
       }
+      .hero-signals {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+      }
       .floating-card {
         position: absolute;
         background: #0c203b;
@@ -236,19 +241,13 @@
         padding: 8px 10px;
         font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New",
           monospace;
-        font-size: 11px;
+        font-size: 10px;
         line-height: 1.4;
         border: 1px solid rgba(197, 219, 255, 0.4);
         box-shadow: 0 6px 16px rgba(12, 35, 67, 0.2);
         z-index: 4;
-      }
-      .floating-card.top-card {
-        top: 6px;
-        right: 10%;
-      }
-      .floating-card.bottom-card {
-        bottom: 0;
-        left: 2%;
+        text-align: center;
+        min-width: 160px;
       }
       .floating-card .label {
         display: block;
@@ -256,6 +255,14 @@
         margin-bottom: 4px;
         letter-spacing: 0.08em;
       }
+      .floating-card.top-card {
+        top: -8px;
+        right: -18px;
+      }
+      .floating-card.bottom-card {
+        bottom: -14px;
+        left: -18px;
+      }
       .hero-copy h2 {
         margin: 0 0 10px 0;
         font-size: 20px;
@@ -328,18 +335,7 @@
         z-index: 1;
       }
       .hero-logo::before {
-        content: "data-link// orbital / makima.jp";
-        position: absolute;
-        top: 6px;
-        left: 12px;
-        right: 12px;
-        font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New",
-          monospace;
-        font-size: 11px;
-        letter-spacing: 0.08em;
-        color: rgba(168, 201, 255, 0.55);
-        text-align: center;
-        z-index: 3;
+        content: none;
       }
       .logo-shell {
         width: 230px;
@@ -649,19 +645,62 @@
         .frame {
           margin: 16px 12px 22px 12px;
         }
+        .masthead {
+          padding: 12px 14px 10px 14px;
+        }
+        .nav-strip {
+          flex-direction: row;
+          align-items: center;
+          flex-wrap: wrap;
+          gap: 8px;
+        }
+        .nav-strip .nav-links {
+          width: auto;
+          gap: 8px;
+          flex-wrap: wrap;
+        }
+        .nav-strip .nav-links a {
+          width: auto;
+          min-width: 110px;
+          text-align: left;
+        }
         .hero {
           grid-template-columns: 1fr;
           text-align: center;
+          gap: 14px;
+          margin-bottom: 28px;
         }
         .hero-copy {
           text-align: left;
         }
+        .hero-logo {
+          width: 100%;
+          max-width: 240px;
+          height: auto;
+          margin: 0 auto 8px auto;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          position: relative;
+        }
+        .logo-shell {
+          margin-bottom: 8px;
+        }
+        .halo {
+          display: none;
+        }
+        .hero-signals {
+          display: none;
+        }
         .link-row {
           justify-content: center;
         }
         .meta-grid {
           grid-template-columns: 1fr;
         }
+        .terminal {
+          display: none;
+        }
       }
     </style>
   </head>
@@ -749,15 +788,17 @@
               </svg>
             </div>
             <div class="halo" aria-hidden="true"></div>
-            <div class="floating-card top-card" aria-hidden="true">
-              <span class="label">status: standby</span>
-              PLATFORM LINK MONITOR ENABLED / DESKTOP CLIENT PREPARATION ACTIVE
-            </div>
-            <div class="floating-card bottom-card" aria-hidden="true">
-              <span class="label">throughput</span>
-              Access: HTTPS<br />
-              Streams: WS / SSE pending<br />
-              Integrity: OK
+            <div class="hero-signals" aria-hidden="true">
+              <div class="floating-card top-card">
+                <span class="label">status: standby</span>
+                PLATFORM LINK MONITOR ENABLED / DESKTOP CLIENT PREPARATION ACTIVE
+              </div>
+              <div class="floating-card bottom-card">
+                <span class="label">throughput</span>
+                Access: HTTPS<br />
+                Streams: WS / SSE pending<br />
+                Integrity: OK
+              </div>
             </div>
           </div>
         </section>
-- 
cgit v1.2.3