@howssatoshi/quantumcss 1.8.0 → 1.11.0

package/examples/music-streaming.html

@@ -634,10 +634,6 @@
             color: var(--color-starlight, #00d4ff);
         }
 
-        .sun-icon { display: none; }
-        html[data-theme="light"] .sun-icon { display: inline; }
-        html[data-theme="light"] .moon-icon { display: none; }
-
         /* Light Mode */
         html[data-theme="light"] {
             --bg-primary: #f8fafc;
@@ -809,31 +805,23 @@
         <aside class="music-sidebar">
             <div class="music-logo">
                 <div class="music-logo-icon">
-                    <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
-                        <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
-                    </svg>
+                    <i class="q-icon-music text-white"></i>
                 </div>
-                <span class="text-xl font-bold text-gradient-starlight">Starlight</span>
+                <span class="text-xl font-bold text-gradient">Starlight</span>
             </div>
 
             <div class="nav-section">
                 <nav>
                     <button class="nav-item active">
-                        <svg fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
-                        </svg>
+                        <i class="q-icon-home-fill"></i>
                         <span>Home</span>
                     </button>
                     <button class="nav-item">
-                        <svg fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
-                        </svg>
+                        <i class="q-icon-search"></i>
                         <span>Search</span>
                     </button>
                     <button class="nav-item">
-                        <svg fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-                        </svg>
+                        <i class="q-icon-library-fill"></i>
                         <span>Your Library</span>
                     </button>
                 </nav>
@@ -843,15 +831,11 @@
                 <div class="nav-title">Playlists</div>
                 <nav>
                     <div class="nav-item">
-                        <svg fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
-                        </svg>
+                        <i class="q-icon-plus-fill"></i>
                         <span>Create Playlist</span>
                     </div>
                     <div class="nav-item">
-                        <svg fill="currentColor" viewBox="0 0 24 24" style="color: #ec4899;">
-                            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
-                        </svg>
+                        <i class="q-icon-heart-fill" style="color: #ec4899;"></i>
                         <span>Liked Songs</span>
                     </div>
                 </nav>
@@ -879,9 +863,7 @@
             </div>
 
             <button class="create-playlist-btn">
-                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
-                </svg>
+                <i class="q-icon-plus-fill"></i>
                 <span>Create New Playlist</span>
             </button>
         </aside>
@@ -894,14 +876,10 @@
             <header class="music-header">
                 <div class="nav-arrows">
                     <button class="nav-arrow">
-                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
-                        </svg>
+                        <i class="q-icon-chevron-left-fill"></i>
                     </button>
                     <button class="nav-arrow">
-                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
-                        </svg>
+                        <i class="q-icon-chevron-right-fill"></i>
                     </button>
                 </div>
                 <div class="user-menu">
@@ -934,19 +912,13 @@
             <!-- Action Bar -->
             <div class="action-bar">
                 <button class="play-btn">
-                    <svg fill="currentColor" viewBox="0 0 24 24">
-                        <path d="M8 5v14l11-7z"/>
-                    </svg>
+                    <i class="q-icon-play-fill"></i>
                 </button>
                 <button class="action-icon liked">
-                    <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-                        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
-                    </svg>
+                    <i class="q-icon-heart-fill w-8 h-8"></i>
                 </button>
                 <button class="action-icon">
-                    <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
-                        <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
-                    </svg>
+                    <i class="q-icon-more-horizontal-fill w-7 h-7"></i>
                 </button>
             </div>
 
@@ -980,9 +952,7 @@
                     <div class="track-date">2 days ago</div>
                     <div style="display: flex; align-items: center; justify-content: flex-end; gap: 1rem;">
                         <div class="track-like">
-                            <svg fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
-                            </svg>
+                            <i class="q-icon-heart-fill"></i>
                         </div>
                         <div class="track-duration">3:45</div>
                     </div>
@@ -1005,9 +975,7 @@
                     <div class="track-date">5 days ago</div>
                     <div style="display: flex; align-items: center; justify-content: flex-end; gap: 1rem;">
                         <div class="track-like">
-                            <svg fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
-                            </svg>
+                            <i class="q-icon-heart-fill"></i>
                         </div>
                         <div class="track-duration">4:12</div>
                     </div>
@@ -1033,9 +1001,7 @@
                     <div class="track-date">1 week ago</div>
                     <div style="display: flex; align-items: center; justify-content: flex-end; gap: 1rem;">
                         <div class="track-like">
-                            <svg fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
-                            </svg>
+                            <i class="q-icon-heart-fill"></i>
                         </div>
                         <div class="track-duration">3:28</div>
                     </div>
@@ -1058,9 +1024,7 @@
                     <div class="track-date">2 weeks ago</div>
                     <div style="display: flex; align-items: center; justify-content: flex-end; gap: 1rem;">
                         <div class="track-like">
-                            <svg fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
-                            </svg>
+                            <i class="q-icon-heart-fill"></i>
                         </div>
                         <div class="track-duration">3:56</div>
                     </div>
@@ -1083,9 +1047,7 @@
                     <div class="track-date">3 weeks ago</div>
                     <div style="display: flex; align-items: center; justify-content: flex-end; gap: 1rem;">
                         <div class="track-like">
-                            <svg fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
-                            </svg>
+                            <i class="q-icon-heart-fill"></i>
                         </div>
                         <div class="track-duration">4:33</div>
                     </div>
@@ -1111,9 +1073,7 @@
                     <div class="track-date">1 month ago</div>
                     <div style="display: flex; align-items: center; justify-content: flex-end; gap: 1rem;">
                         <div class="track-like">
-                            <svg fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
-                            </svg>
+                            <i class="q-icon-heart-fill"></i>
                         </div>
                         <div class="track-duration">5:01</div>
                     </div>
@@ -1133,9 +1093,7 @@
                     <div class="now-playing-artist">Cosmic Collective</div>
                 </div>
                 <div class="now-playing-like">
-                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
-                    </svg>
+                    <i class="q-icon-heart-fill"></i>
                 </div>
             </div>
 
@@ -1143,29 +1101,19 @@
             <div class="player-controls">
                 <div class="control-buttons">
                     <button class="control-btn" title="Shuffle">
-                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.45 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/>
-                        </svg>
+                        <i class="q-icon-shuffle-fill"></i>
                     </button>
                     <button class="control-btn" title="Previous">
-                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
-                        </svg>
+                        <i class="q-icon-previous-fill"></i>
                     </button>
                     <button class="control-btn play" title="Play/Pause">
-                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
-                        </svg>
+                        <i class="q-icon-pause-fill"></i>
                     </button>
                     <button class="control-btn" title="Next">
-                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
-                        </svg>
+                        <i class="q-icon-next-fill"></i>
                     </button>
                     <button class="control-btn" title="Repeat">
-                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/>
-                        </svg>
+                        <i class="q-icon-repeat-fill"></i>
                     </button>
                 </div>
                 <div class="progress-bar">
@@ -1181,25 +1129,18 @@
             <!-- Volume Controls -->
             <div class="volume-controls">
                 <button class="control-btn">
-                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                        <path d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z"/>
-                    </svg>
+                    <i class="q-icon-queue-fill"></i>
                 </button>
                 <button class="control-btn">
-                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                        <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
-                    </svg>
+                    <i class="q-icon-volume-fill"></i>
                 </button>
                 <div class="volume-slider">
                     <div class="volume-fill"></div>
                 </div>
                 <button class="theme-toggle-player" onclick="toggleTheme()">
-                    <svg class="sun-icon w-5 h-5" 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"/>
-                    </svg>
-                    <svg class="moon-icon w-5 h-5" 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"/>
-                    </svg>
+                    <i class="q-icon-display"></i>
+                    <i class="q-icon-sun sun-icon"></i>
+                    <i class="q-icon-moon moon-icon"></i>
                 </button>
             </div>
         </div>
@@ -1223,8 +1164,8 @@
         playBtn.addEventListener('click', function() {
             isPlaying = !isPlaying;
             this.innerHTML = isPlaying 
-                ? '<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>'
-                : '<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>';
+                ? '<i class="q-icon-pause-fill"></i>'
+                : '<i class="q-icon-play-fill"></i>';
         });
     </script>
 </body>

package/examples/news.html

@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quantum News | Decoding the Future</title>
+    <link rel="stylesheet" href="../dist/quantum.min.css">
+    <script src="../src/starlight.js"></script>
+    <style>
+        body { 
+            background-color: var(--q-color-bg); 
+            color: var(--q-color-text); 
+            transition: background-color 0.5s ease, color 0.5s ease; 
+        }
+        
+        .newsletter-input::placeholder { color: #cbd5e1; }
+        
+        .news-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
+        @media (min-width: 1024px) {
+            .news-grid { grid-template-columns: 3fr 1fr; }
+        }
+        .featured-card { position: relative; overflow: hidden; border-radius: 1rem; }
+        .featured-card img { width: 100%; height: 600px; object-fit: cover; transition: transform 0.5s ease; }
+        .featured-card:hover img { transform: scale(1.03); }
+        .featured-overlay { 
+            position: absolute; 
+            bottom: 0; left: 0; right: 0; 
+            padding: 3rem; 
+            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); 
+            color: white; 
+        }
+
+        /* Marquee Animation */
+        @keyframes marquee {
+            0% { transform: translateX(0); }
+            100% { transform: translateX(-50%); }
+        }
+        .animate-marquee {
+            display: flex;
+            width: max-content;
+            animation: marquee 30s linear infinite;
+        }
+
+        /* Theme Toggle Styling */
+        .theme-toggle {
+            cursor: pointer;
+            width: 2.5rem;
+            height: 2.5rem;
+            border-radius: 50%;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            color: var(--q-color-text);
+        }
+
+        .theme-toggle:hover {
+            background: var(--q-highlight-bg);
+        }
+
+        /* Nav Header Overrides */
+        .nav-header { padding: 0; }
+        .nav-header .nav-links { flex: none; }
+        .nav-header .btn-secondary { display: none; }
+        @media (min-width: 768px) {
+            .nav-header .btn-secondary { display: block; }
+        }
+    </style>
+</head>
+<body class="bg-surface">
+    <!-- Navigation -->
+    <input type="checkbox" id="nav-toggle" class="nav-toggle" />
+    <header class="nav-header">
+        <div class="container mx-auto px-6 flex items-center justify-between w-full h-full">
+            <div class="text-2xl sm:text-4xl font-bold tracking-tighter uppercase italic text-primary shrink-0">QUANTUM<span class="text-blue-600">NEWS</span></div>
+            
+            <nav class="nav-links space-x-12 text-xs font-black uppercase tracking-widest flex-1 justify-center">
+                <a href="#" class="hover:text-blue-600 transition-colors">Neural Mesh</a>
+                <a href="#" class="hover:text-blue-600 transition-colors">Bio-Tech</a>
+                <a href="#" class="hover:text-blue-600 transition-colors">Space-X</a>
+                <a href="#" class="hover:text-blue-600 transition-colors">Quantum Compute</a>
+            </nav>
+
+            <div class="flex items-center gap-6 shrink-0">
+                <div id="theme-btn" class="theme-toggle" onclick="toggleTheme()" title="Toggle Theme">
+                    <i class="q-icon-display"></i>
+                    <i class="q-icon-sun sun-icon"></i>
+                    <i class="q-icon-moon moon-icon"></i>
+                </div>
+                <button class="btn btn-secondary px-6 py-2 rounded font-bold text-xs uppercase tracking-widest">Login</button>
+                <label for="nav-toggle" class="nav-hamburger" aria-label="Toggle menu">
+                    <span class="nav-hamburger-icon"><span></span><span></span><span></span></span>
+                </label>
+            </div>
+        </div>
+    </header>
+
+    <!-- Mobile Drawer -->
+    <div class="nav-drawer">
+        <div class="nav-drawer-inner">
+            <a href="#">Neural Mesh</a>
+            <a href="#">Bio-Tech</a>
+            <a href="#">Space-X</a>
+            <a href="#">Quantum Compute</a>
+            <div class="pt-4 border-t border-white_5">
+                <button class="btn btn-secondary w-full py-3 rounded font-bold text-xs uppercase tracking-widest">Login</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Breaking News Ticker -->
+    <div class="bg-blue-600 text-white py-3 overflow-hidden">
+        <div class="flex animate-marquee uppercase font-black text-xs tracking-widest gap-24 items-center">
+            <span class="whitespace-nowrap">First Mars colony reports stable oxygen synthesis</span>
+            <span class="whitespace-nowrap">Global Neural-Link rollout scheduled for Q3</span>
+            <span class="whitespace-nowrap">Quantum encryption broken by experimental lattice</span>
+            <span class="whitespace-nowrap">Voyager 1 signal restored after 50 years</span>
+            <!-- Duplicated for seamless loop -->
+            <span class="whitespace-nowrap">First Mars colony reports stable oxygen synthesis</span>
+            <span class="whitespace-nowrap">Global Neural-Link rollout scheduled for Q3</span>
+            <span class="whitespace-nowrap">Quantum encryption broken by experimental lattice</span>
+            <span class="whitespace-nowrap">Voyager 1 signal restored after 50 years</span>
+        </div>
+    </div>
+
+    <!-- Main Grid -->
+    <main class="max-w-7xl mx-auto px-6 py-12">
+        <div class="news-grid">
+            
+            <!-- Left Column: News Feed -->
+            <div class="space-y-12">
+                <!-- Featured Article -->
+                <div class="featured-card group cursor-pointer">
+                    <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&w=1200&q=80" alt="Quantum Compute">
+                    <div class="featured-overlay">
+                        <span class="bg-blue-600 text-white px-3 py-1 text-[10px] font-black uppercase tracking-widest mb-4 inline-block">Exclusive</span>
+                        <h2 class="text-5xl font-black leading-tight mb-4 tracking-tighter uppercase italic">Inside the First <br>Stable Qubit Lattice</h2>
+                        <p class="text-lg opacity-90 max-w-xl">Deep dive into the breakthrough that ended the quantum decoherence era, paving the way for instantaneous planetary compute.</p>
+                    </div>
+                </div>
+
+                <!-- Secondary Grid -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
+                    <div class="group cursor-pointer">
+                        <div class="overflow-hidden rounded-xl mb-6 aspect-video bg-slate-800">
+                            <img src="https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?auto=format&fit=crop&w=800&q=80" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
+                        </div>
+                        <span class="text-blue-600 text-[10px] font-black uppercase tracking-widest">Space-X</span>
+                        <h3 class="text-2xl font-bold tracking-tight leading-tight group-hover:underline uppercase mt-2">The Dyson Ring: First Solar Panels Deploy Around the Moon</h3>
+                    </div>
+                    <div class="group cursor-pointer">
+                        <div class="overflow-hidden rounded-xl mb-6 aspect-video bg-slate-800">
+                            <img src="https://images.unsplash.com/photo-1507413245164-6160d8298b31?auto=format&fit=crop&w=800&q=80" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
+                        </div>
+                        <span class="text-blue-600 text-[10px] font-black uppercase tracking-widest">Bio-Tech</span>
+                        <h3 class="text-2xl font-bold tracking-tight leading-tight group-hover:underline uppercase mt-2">Synthetic Neurons Successfully Grafted to Human Cortex</h3>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Right Column: Sidebar -->
+            <aside class="space-y-12">
+                <div class="bg-highlight p-8 rounded-2xl border border-white_5">
+                    <h4 class="border-b-2 border-accent pb-2 text-xs font-black uppercase tracking-widest mb-6">Trending Terminal</h4>
+                    <div class="space-y-8">
+                        <div class="flex gap-6 group cursor-pointer">
+                            <span class="text-4xl font-black text-secondary opacity-30 group-hover:text-blue-600 group-hover:opacity-100 transition-all">01</span>
+                            <p class="text-sm font-bold leading-snug">The Ethics of Algorithmic Governance in Neo-Tokyo</p>
+                        </div>
+                        <div class="flex gap-6 group cursor-pointer">
+                            <span class="text-4xl font-black text-secondary opacity-30 group-hover:text-blue-600 group-hover:opacity-100 transition-all">02</span>
+                            <p class="text-sm font-bold leading-snug">Liquid Metal Battery: Storage Problem Solved?</p>
+                        </div>
+                        <div class="flex gap-6 group cursor-pointer">
+                            <span class="text-4xl font-black text-secondary opacity-30 group-hover:text-blue-600 group-hover:opacity-100 transition-all">03</span>
+                            <p class="text-sm font-bold leading-snug">Interstellar Web: Laser Relay Reaches Alpha Centauri</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="p-8 rounded-2xl bg-accent text-white">
+                    <h4 class="text-xs font-black uppercase tracking-widest mb-4">Newsletter</h4>
+                    <p class="text-sm opacity-90 mb-6">Receive the morning data-stream directly to your neural link.</p>
+                    <input type="email" placeholder="terminal@id.io" class="w-full bg-white_20 border border-white_20 p-3 rounded text-sm mb-4 outline-none focus:border-white text-white newsletter-input">
+                    <button class="w-full bg-white text-blue-600 font-black text-[10px] uppercase tracking-widest py-3 rounded hover:bg-slate-100 transition-colors">Subscribe</button>
+                </div>
+            </aside>
+        </div>
+    </main>
+
+    <footer class="border-t border-white_5 py-12 mt-12 bg-surface">
+        <div class="max-w-7xl mx-auto px-6 text-center">
+            <div class="text-2xl font-black tracking-tighter uppercase italic text-primary mb-4">QUANTUM<span class="text-blue-600">NEWS</span></div>
+            <p class="text-xs text-secondary uppercase tracking-[0.3em]">&copy; 2026 Interstellar News Network. No Rights Reserved.</p>
+        </div>
+    </footer>
+</body>
+</html>