website is now phone

style/styles.css

@@ -33,7 +33,7 @@ html, body {
     top: 0;
     left: 0;
     width: 100%;
-    height: 115px; /* 95px + 2×10px padding — other tabs' top offsets assume this */
+    height: 115px; /* other tabs are spaced for this height */
     box-sizing: border-box;
     backdrop-filter: blur(2px);
     -webkit-backdrop-filter: blur(2px);
@@ -45,7 +45,12 @@ html, body {
     padding: 10px;
 }
 
-#top-line button {
+#nav-tabs {
+    display: flex;
+    align-items: center;
+}
+
+#nav-tabs button {
     display: flex;
     justify-content: flex-start;
     align-items: center;
@@ -64,12 +69,12 @@ html, body {
     transition: box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.4s ease, color 0.4s ease;
 }
 
-#top-line button:hover {
+#nav-tabs button:hover {
     text-decoration: underline;
 }
 
-/* ── Calendar-themed top bar buttons only ─────────────── */
-#top-line.cal-theme button {
+/* calendar theme */
+#top-line.cal-theme #nav-tabs button {
     border-bottom-color: #FBC4CC;
     border-left-color: #FBC4CC;
     border-right-color: #FBC4CC;
@@ -77,8 +82,8 @@ html, body {
     transition: border-color 0.4s ease, color 0.4s ease;
 }
 
-/* ── Bucketlist-themed top bar buttons ─────────────────── */
-#top-line.bucketlist-theme button {
+/* bucketlist theme */
+#top-line.bucketlist-theme #nav-tabs button {
     border-bottom-color: #B5B1C6;
     border-left-color: #B5B1C6;
     border-right-color: #B5B1C6;
@@ -102,3 +107,117 @@ p {
 img {
     display:block;
 }
+
+/* mobile only */
+#nav-current,
+#nav-hamburger {
+    display: none;
+}
+
+/* mobile, same setup as userevolt.app */
+@media (max-width: 1300px) {
+    #nav-tabs button {
+        padding: 22px 18px;
+        margin: 30px 8px;
+    }
+}
+
+@media (max-width: 900px) {
+    #top-line {
+        height: 56px;
+        padding: 0 8px 0 16px;
+        justify-content: space-between;
+        background: rgba(13, 17, 23, 0.75);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    }
+
+    #nav-current {
+        display: block;
+        color: #fff;
+        font-weight: bold;
+        font-size: 1.1rem;
+    }
+
+    #nav-hamburger {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 5px;
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 8px;
+        width: 40px;
+        height: 40px;
+        flex-shrink: 0;
+    }
+    #nav-hamburger span {
+        display: block;
+        width: 22px;
+        height: 2px;
+        background: #fff;
+        border-radius: 1px;
+        transition: transform 0.25s, opacity 0.25s;
+    }
+    /* turns into an X */
+    #top-line.nav-open #nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+    #top-line.nav-open #nav-hamburger span:nth-child(2) { opacity: 0; }
+    #top-line.nav-open #nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+
+    #nav-tabs {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        flex-direction: column;
+        align-items: stretch;
+        background: rgba(13, 17, 23, 0.95);
+        backdrop-filter: blur(16px);
+        -webkit-backdrop-filter: blur(16px);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+        padding: 8px 0;
+    }
+    #top-line.nav-open #nav-tabs {
+        display: flex;
+    }
+
+    #nav-tabs button,
+    #top-line.cal-theme #nav-tabs button,
+    #top-line.bucketlist-theme #nav-tabs button {
+        width: 100%;
+        margin: 0;
+        padding: 12px 24px;
+        min-height: 44px;
+        border: none;
+        border-left: 3px solid transparent;
+        border-radius: 0;
+        color: rgba(255, 255, 255, 0.85);
+        font-size: 1rem;
+        text-align: left;
+    }
+    #nav-tabs button:hover {
+        text-decoration: none;
+        background: rgba(255, 255, 255, 0.06);
+        border-left-color: #5b6fde;
+    }
+    #top-line.cal-theme #nav-tabs button:hover { border-left-color: #FBC4CC; }
+    #top-line.bucketlist-theme #nav-tabs button:hover { border-left-color: #B84457; }
+
+    /* keep the video centered on tall screens */
+    #background-video,
+    #calendar-background-video,
+    #bucketlist-background-video,
+    #yuukabot-background-video {
+        top: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .tab-content { padding: 12px; }
+
+    h1 { font-size: 2.2rem; }
+    p  { font-size: 1.2rem; }
+}