@howssatoshi/quantumcss 1.7.3 → 1.7.4

package/examples/admin-panel.html

@@ -34,7 +34,7 @@
             position: relative;
         }
 
-        .nav-item-custom.active::before {
+        .nav-item-custom.active=":before" {
             content: '';
             position: absolute;
             left: 0;
@@ -263,9 +263,10 @@
                 padding: 1rem;
             }
             
-            .admin-logo span,
+            .admin-logo > div:last-child,
             .nav-section-title,
             .nav-item span,
+            .nav-badge,
             .theme-label {
                 display: none;
             }
@@ -274,9 +275,11 @@
                 justify-content: center;
                 padding: 0.75rem;
             }
-            
-            .search-input {
-                width: 200px;
+        }
+
+        @media (max-width: 768px) {
+            .top-nav-actions .starlight-search {
+                display: none;
             }
         }
         
@@ -423,11 +426,11 @@
                     <span>All Users</span>
                 </nav>
                 <div class="top-nav-actions">
-                    <div class="search-box">
+                    <div class="starlight-search max-w-xs">
                         <svg class="search-icon w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                         </svg>
-                        <input type="text" class="search-input" placeholder="Search users...">
+                        <input type="text" class="bg-transparent border-none w-full h-full pl-12 outline-none text-sm text-white" placeholder="Search users...">
                     </div>
                     <button class="icon-btn">
                         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -453,13 +456,13 @@
                     <p class="page-subtitle">Manage your team members and their account permissions</p>
                 </div>
                 <div class="page-actions">
-                    <button class="btn btn-secondary">
+                    <button class="btn btn-secondary h-12">
                         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                         </svg>
                         Export
                     </button>
-                    <button class="btn btn-primary">
+                    <button class="btn btn-primary h-12">
                         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                         </svg>

package/examples/analytics-dashboard.html

@@ -54,6 +54,57 @@
             gap: 1rem;
         }
 
+        .notification-btn {
+            position: relative;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 0.75rem;
+            color: var(--text-secondary, #94a3b8);
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .notification-btn:hover {
+            background: rgba(255, 255, 255, 0.08);
+            border-color: rgba(255, 255, 255, 0.15);
+            color: var(--text-primary, #f1f5f9);
+        }
+
+        body.light-mode .notification-btn {
+            background: #ffffff;
+            border-color: #e2e8f0;
+            color: #64748b;
+        }
+
+        body.light-mode .notification-badge {
+            border-color: #ffffff;
+        }
+
+        .user-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.875rem;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .user-avatar:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
+        }
+
         .date-selector {
             display: flex;
             align-items: center;
@@ -102,6 +153,7 @@
         .main-content {
             max-width: 100%;
             box-sizing: border-box;
+            padding: 2rem;
         }
 
         .chart-card {
@@ -500,7 +552,7 @@
                         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
                         </svg>
-                        <span class="notification-badge"></span>
+                        <span class="notification-dot"></span>
                     </button>
                     <div class="user-avatar">JD</div>
                 </div>

package/examples/blog-template.html

@@ -90,8 +90,15 @@
   </div>
 
   <!-- Navigation -->
-  <nav class="sticky top-0 z-50 glass border-b border-white/10">
+  <nav class="starlight-navbar">
     <div class="container mx-auto px-6 h-24 flex items-center justify-between">
+      <div class="md:hidden hamburger-left">
+        <div class="hamburger">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
       <div class="flex items-center gap-4">
         <div class="w-8 h-8 rounded-full bg-starlight animate-pulse"></div>
         <span class="text-xl font-bold text-gradient-starlight">
@@ -109,6 +116,18 @@
         <button class="btn-starlight btn-sm">Subscribe</button>
       </div>
     </div>
+
+    <!-- Mobile Menu -->
+    <div class="nav-menu-mobile">
+      <ul class="nav-list vertical">
+        <li><a href="#" class="nav-link">Home</a></li>
+        <li><a href="#" class="nav-link">Articles</a></li>
+        <li><a href="#" class="nav-link">About</a></li>
+        <li class="pt-4 border-t border-white_5">
+          <button class="btn-starlight w-full py-3">Subscribe</button>
+        </li>
+      </ul>
+    </div>
   </nav>
 
   <!-- Main Content -->
@@ -133,7 +152,7 @@
           </h1>
 
           <div class="flex items-center gap-4 pt-4">
-            <img src="https://media.licdn.com/dms/image/v2/D5603AQFDAUK1PK6IzQ/profile-displayphoto-scale_100_100/B56Zml2ZwgJkAg-/0/1759424127811?e=1771459200&v=beta&t=kk4HtXlQ0REqJ5bz6yy3akXwYeEfvznb8PZ4hQg85u4" alt="Eric Yang" class="w-12 h-12 rounded-full border border-primary/30">
+            <img src="https://media.licdn.com/dms/image/v2/D5603AQFDAUK1PK6IzQ/profile-displayphoto-scale_100_100/B56Zml2ZwgJkAg-_0/1759424127811?e=1771459200&v=beta&t=kk4HtXlQ0REqJ5bz6yy3akXwYeEfvznb8PZ4hQg85u4" alt="Eric Yang" class="w-12 h-12 rounded-full border border-primary_30">
             <div>
               <p class="font-bold text-white uppercase text-xs tracking-widest">Eric Yang</p>
               <p class="text-xs text-secondary font-medium">Frontend Architect</p>
@@ -143,7 +162,7 @@
 
         <!-- Featured Image -->
         <div class="rounded-2xl overflow-hidden glass p-1 group">
-          <div class="aspect-video bg-black/40 rounded-xl relative overflow-hidden">
+          <div class="aspect-video bg-black_40 rounded-xl relative overflow-hidden">
             <img src="images/starlight.jpg" alt="Starlight Aesthetics" class="w-full h-full object-cover">
           </div>
         </div>
@@ -164,7 +183,7 @@
             </p>
           </div>
 
-          <div class="glass p-8 rounded-2xl border-l-4 border-primary bg-primary/5 italic text-xl text-white">
+          <div class="glass p-8 rounded-2xl   border-primary bg-primary_5 italic text-xl text-white">
             "Design is not just what it looks like and feels like. Design is how it works... in zero gravity."
           </div>
 
@@ -179,7 +198,7 @@
                 </div>
                 <span class="code-window-title">quantum.config.json</span>
               </div>
-              <pre class="p-8 text-sm overflow-x-auto bg-white/5"><code>{
+              <pre class="p-8 text-sm overflow-x-auto bg-white_5"><code>{
   "theme": {
     "extend": {
       "colors": {
@@ -193,11 +212,11 @@
         </div>
 
         <!-- Tags -->
-        <div class="flex flex-wrap gap-2 pt-8 mt-12 border-t border-white/10">
+        <div class="flex flex-wrap gap-2 pt-8 mt-12">
           <span class="text-muted text-sm mr-2">Tags:</span>
-          <a href="#" class="badge badge-secondary hover:bg-white/10 transition-colors">CSS</a>
-          <a href="#" class="badge badge-secondary hover:bg-white/10 transition-colors">Design</a>
-          <a href="#" class="badge badge-secondary hover:bg-white/10 transition-colors">QuantumCSS</a>
+          <a href="#" class="badge badge-secondary hover:bg-white_10 transition-colors">CSS</a>
+          <a href="#" class="badge badge-secondary hover:bg-white_10 transition-colors">Design</a>
+          <a href="#" class="badge badge-secondary hover:bg-white_10 transition-colors">QuantumCSS</a>
         </div>
 
       </article>
@@ -211,15 +230,15 @@
           <p class="text-secondary text-sm mb-4">
             Eric is a frontend wizard obsessed with making the web feel more organic and alive.
           </p>
-          <button class="btn btn-outline w-full text-sm">Follow</button>
+          <button class="btn btn-outline w-full h-12 text-sm">Follow</button>
         </div>
 
         <!-- Newsletter -->
-        <div class="glass p-6 rounded-2xl glow-blue border border-white/5">
+        <div class="glass p-6 rounded-2xl glow-blue border border-white_5">
           <h3 class="text-lg font-bold mb-2 text-white">Join the Newsletter</h3>
           <p class="text-secondary text-sm mb-4">Get the latest design trends delivered to your inbox.</p>
           <form class="space-y-3">
-            <input type="email" placeholder="your@email.com" class="input bg-black/20 border-white/10">
+            <input type="email" placeholder="your@email.com" class="input-starlight w-full bg-black_20 border-white_10">
             <button class="btn-starlight w-full">Subscribe</button>
           </form>
         </div>
@@ -228,12 +247,12 @@
         <div class="space-y-4">
           <h3 class="text-xs font-bold text-muted uppercase tracking-wider">Recommended</h3>
           
-          <a href="#" class="block glass p-4 rounded-xl hover:bg-white/5 transition-colors group">
+          <a href="#" class="block glass p-4 rounded-xl hover:bg-white_5 transition-colors group">
             <h4 class="font-bold text-white group-hover:text-primary transition-colors">Glassmorphism in 2026</h4>
             <p class="text-xs text-muted mt-1">Feb 1 • 4 min read</p>
           </a>
           
-          <a href="#" class="block glass p-4 rounded-xl hover:bg-white/5 transition-colors group">
+          <a href="#" class="block glass p-4 rounded-xl hover:bg-white_5 transition-colors group">
             <h4 class="font-bold text-white group-hover:text-primary transition-colors">Modern CSS Variables</h4>
             <p class="text-xs text-muted mt-1">Jan 28 • 8 min read</p>
           </a>
@@ -245,7 +264,7 @@
   </main>
 
   <!-- Footer -->
-  <footer class="border-t border-white/10 mt-12 bg-black/20 backdrop-blur-md">
+  <footer class="starlight-footer">
     <div class="container mx-auto px-6 py-12">
       <div class="flex flex-col md:flex-row justify-between items-center gap-6">
         <div class="text-muted text-sm">

package/examples/chat-messaging.html

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Starlight Chat - Messages</title>
     <link rel="stylesheet" href="../dist/quantum.min.css">
-    <link rel="stylesheet" href="../src/styles/quantum-components.css">
     <script src="../src/starlight.js"></script>
     <style>
         .chat-app {
@@ -95,11 +94,13 @@
                         <div class="user-email" style="color: var(--text-muted, #64748b); font-size: 0.8125rem;">Online</div>
                     </div>
                 </div>
-                <div class="search-box">
-                    <svg class="search-icon w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                    </svg>
-                    <input type="text" class="search-input search-input-full" placeholder="Search conversations...">
+                <div class="px-4 py-4 border-b border-white_5">
+                    <div class="starlight-search">
+                        <svg class="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                        </svg>
+                        <input type="text" class="bg-transparent border-none w-full h-full pl-12 outline-none text-sm text-white" placeholder="Search conversations...">
+                    </div>
                 </div>
             </div>
             <div class="chat-tabs">

package/examples/email-template.html

@@ -242,18 +242,24 @@
             }
             
             .email-content {
-                display: none;
-            }
-            
-            .email-content.mobile-visible {
-                display: block;
                 position: fixed;
                 top: 0;
                 left: 0;
                 right: 0;
                 bottom: 0;
                 z-index: 100;
-                background: inherit;
+                background: #08081a;
+                transform: translateX(100%);
+                transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+                display: block; /* Always block, use transform to hide */
+            }
+
+            body.light-mode .email-content {
+                background: #f8fafc;
+            }
+            
+            .email-content.mobile-visible {
+                transform: translateX(0);
             }
         }
 
@@ -376,7 +382,7 @@
                 </button>
             </nav>
 
-            <div class="pt-6 border-t border-white/10">
+            <div class="pt-6 border-t border-white_10">
                 <h3 class="nav-section-title" style="padding-left: 0.75rem;">Labels</h3>
                 <nav class="space-y-1">
                     <button class="nav-item" style="width: 100%;">
@@ -433,11 +439,13 @@
                     </div>
                 </div>
 
-                <div class="search-box px-4 py-3">
-                    <svg class="search-icon w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                    </svg>
-                    <input type="text" class="search-input search-input-full" placeholder="Search emails...">
+                <div class="px-4 py-3">
+                    <div class="starlight-search">
+                        <svg class="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                        </svg>
+                        <input type="text" class="bg-transparent border-none w-full h-full pl-12 outline-none text-sm text-white" placeholder="Search emails...">
+                    </div>
                 </div>
 
                 <div class="email-item unread active">
@@ -554,7 +562,13 @@
             </div>
 
             <!-- Email Content -->
-            <div class="email-content">
+            <div class="email-content" id="email-content">
+                <button class="md:hidden mb-6 flex items-center gap-2 text-starlight font-bold" onclick="closeEmail()">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+                    </svg>
+                    Back to Inbox
+                </button>
                 <div class="email-header">
                     <div class="email-sender-info">
                         <div class="avatar avatar-lg">SC</div>
@@ -617,11 +631,11 @@
                     <span style="color: var(--color-starlight, #00d4ff);">Starlight Technologies</span></p>
                 </div>
 
-                <div class="mt-8 pt-6 border-t border-white/10">
+                <div class="mt-8 pt-6 border-t border-white_10">
                     <h3 class="text-sm font-semibold mb-4 text-slate-400">Attachments (2)</h3>
                     <div class="flex gap-4">
-                        <div class="flex items-center gap-3 p-3 rounded-lg bg-white/5 border border-white/10 cursor-pointer hover:bg-white/10 transition-colors">
-                            <div class="w-10 h-10 rounded-lg bg-red-500/20 flex items-center justify-center">
+                        <div class="flex items-center gap-3 p-3 rounded-lg bg-white_5   cursor-pointer hover:bg-white_10 transition-colors">
+                            <div class="w-10 h-10 rounded-lg bg-red-500_20 flex items-center justify-center">
                                 <svg class="w-5 h-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
                                     <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"></path>
                                 </svg>
@@ -631,8 +645,8 @@
                                 <div class="text-xs text-slate-500">2.4 MB</div>
                             </div>
                         </div>
-                        <div class="flex items-center gap-3 p-3 rounded-lg bg-white/5 border border-white/10 cursor-pointer hover:bg-white/10 transition-colors">
-                            <div class="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
+                        <div class="flex items-center gap-3 p-3 rounded-lg bg-white_5   cursor-pointer hover:bg-white_10 transition-colors">
+                            <div class="w-10 h-10 rounded-lg bg-green-500_20 flex items-center justify-center">
                                 <svg class="w-5 h-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                                     <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"></path>
                                 </svg>
@@ -645,7 +659,7 @@
                     </div>
                 </div>
 
-                <div class="mt-8 flex gap-3">
+                <div class="mt-8 flex flex-wrap gap-3">
                     <button class="btn-starlight flex items-center gap-2">
                         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"></path>
@@ -682,9 +696,18 @@
                 document.querySelectorAll('.email-item').forEach(i => i.classList.remove('active'));
                 this.classList.add('active');
                 this.classList.remove('unread');
+                
+                // Mobile view toggle
+                if (window.innerWidth <= 768) {
+                    document.getElementById('email-content').classList.add('mobile-visible');
+                }
             });
         });
 
+        function closeEmail() {
+            document.getElementById('email-content').classList.remove('mobile-visible');
+        }
+
         // Folder click handler
         document.querySelectorAll('.folder-item').forEach(folder => {
             folder.addEventListener('click', function() {

package/examples/gaming-template.html

@@ -127,7 +127,7 @@
                 </div>
 
                 <!-- Mobile Actions -->
-                <div class="flex items-center gap-4 md:hidden">
+                <div class="flex items-center gap-4 md:hidden hamburger-left">
                     <div id="theme-btn-mobile" class="theme-toggle" title="Toggle Theme">
                         <svg class="w-6 h-6 sun-icon hidden" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path></svg>
                         <svg class="w-6 h-6 moon-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
@@ -148,7 +148,7 @@
                 <li><a href="#" class="nav-link">Games</a></li>
                 <li><a href="#" class="nav-link">News</a></li>
                 <li><a href="#" class="nav-link">Community</a></li>
-                <li class="pt-4 border-t border-white/10">
+                <li class="pt-4 border-t border-white_5">
                     <button class="bg-starlight text-black w-full py-3 rounded-xl font-bold glow-blue border-none">Play Now</button>
                 </li>
             </ul>
@@ -165,7 +165,7 @@
             </p>
             <div class="flex flex-col sm:flex-row gap-6 justify-center">
                 <button class="bg-white text-black px-12 py-4 rounded-full font-bold hover:bg-starlight transition shadow-lg border-none">Buy Now - $59.99</button>
-                <button class="glass text-white px-12 py-4 rounded-full font-bold hover:bg-opacity-20 transition border-2 border-solid border-white border-opacity-20">Watch Trailer</button>
+                <button class="glass text-white px-12 py-4 rounded-full font-bold hover:bg-opacity-20 transition border-2 border-solid border-opacity-20">Watch Trailer</button>
             </div>
         </div>
     </header>
@@ -177,7 +177,7 @@
                 <h2 class="text-sm font-bold text-starlight uppercase tracking-widest mb-2">Editor's Choice</h2>
                 <h3 class="text-4xl font-bold tracking-tight">Featured Games</h3>
             </div>
-            <a href="#" class="text-starlight font-bold border-b border-starlight pb-1 hover:text-white hover:border-white transition">View All Games →</a>
+            <a href="#" class="text-starlight font-bold border-b border-starlight pb-1 hover:text-white transition">View All Games →</a>
         </div>
 
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -276,7 +276,7 @@
 
     <!-- Call to Action -->
     <section class="max-w-[1200px] mx-auto px-6 mb-32">
-        <div class="glass p-16 rounded-3xl border border-white border-opacity-5 text-center glow-blue">
+        <div class="glass p-16 rounded-3xl border text-center glow-blue">
             <h2 class="text-5xl font-bold mb-6 tracking-tight">Join the <span class="text-gradient-starlight">Elite</span></h2>
             <p class="text-lg text-gray-400 mb-10 max-w-prose mx-auto">Get exclusive access to beta tests, early drops, and a community of over 10 million gamers.</p>
             <div class="flex flex-col md:flex-row gap-4 justify-center">
@@ -287,7 +287,7 @@
     </section>
 
     <!-- Footer -->
-    <footer class="bg-black py-20 px-6 border-t border-white border-opacity-5">
+    <footer class="bg-black py-20 px-6 border-t border-white_5">
         <div class="max-w-[1200px] mx-auto grid grid-cols-2 md:grid-cols-4 gap-12 mb-16">
             <div class="col-span-2 md:col-span-1">
                 <div class="text-2xl font-bold tracking-tighter text-gradient-starlight mb-6">GAMEVAULT</div>
@@ -321,7 +321,7 @@
                 </ul>
             </div>
         </div>
-        <div class="max-w-[1200px] mx-auto pt-8 border-t border-white border-opacity-5 flex flex-col md:flex-row justify-between items-center gap-6">
+        <div class="max-w-[1200px] mx-auto pt-8 border-t border-white_5 flex flex-col md:flex-row justify-between items-center gap-6">
             <p class="text-gray-600 text-xs">&copy; 2026 GameVault Interactive. All rights reserved.</p>
             <div class="flex gap-6">
                 <a href="#" class="text-gray-600 hover:text-starlight transition">Twitter</a>