@howssatoshi/quantumcss 1.4.2 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/README.md +8 -7
  2. package/dist/quantum.min.css +1 -4678
  3. package/examples/blog-template.html +268 -0
  4. package/examples/gaming-template.html +355 -0
  5. package/examples/images/starlight.jpg +0 -0
  6. package/examples/index.html +138 -0
  7. package/examples/kitchen-sink.html +1012 -0
  8. package/examples/news-template.html +320 -0
  9. package/examples/shopping/images/headset.jpg +0 -0
  10. package/examples/shopping/images/sneakers.jpg +0 -0
  11. package/examples/shopping/images/windbreaker.jpg +0 -0
  12. package/examples/shopping/index.html +330 -0
  13. package/examples/starlight.html +161 -0
  14. package/examples/theme-test.html +174 -0
  15. package/examples/travel/index.html +254 -0
  16. package/examples/verify_fixes.html +52 -0
  17. package/examples/verify_presets.html +32 -0
  18. package/package.json +8 -1
  19. package/src/generator.js +19 -8
  20. package/src/starlight.js +406 -15
  21. package/src/styles/quantum-animations.css +3 -2
  22. package/src/styles/quantum-base.css +295 -91
  23. package/src/styles/quantum-components.css +47 -47
  24. package/src/styles/quantum-responsive.css +5 -4
  25. package/src/styles/starlight.css +184 -184
package/examples/news-template.html ADDED
@@ -0,0 +1,320 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Quantum News | Decoding the Future</title>
7
+ <link rel="stylesheet" href="../dist/quantum.min.css">
8
+ <script src="../src/starlight.js"></script>
9
+ <style>
10
+ body { background-color: #020617; color: #f1f5f9; transition: background-color 0.5s ease, color 0.5s ease; }
11
+ html[data-theme="light"] body { background-color: #ffffff; color: #0f172a; }
12
+ .news-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
13
+ @media (min-width: 1024px) {
14
+ .news-grid { grid-template-columns: 3fr 1fr; }
15
+ }
16
+ .featured-card { position: relative; overflow: hidden; border-radius: 1rem; }
17
+ .featured-card img { width: 100%; height: 600px; object-cover: cover; transition: transform 0.5s ease; }
18
+ .featured-card:hover img { transform: scale(1.03); }
19
+ .featured-overlay {
20
+ position: absolute;
21
+ bottom: 0; left: 0; right: 0;
22
+ padding: 3rem;
23
+ background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
24
+ color: white;
25
+ }
26
+
27
+ /* Theme Toggle Styling */
28
+ .theme-toggle {
29
+ cursor: pointer;
30
+ width: 2.5rem;
31
+ height: 2.5rem;
32
+ border-radius: 50%;
33
+ transition: background 0.3s ease;
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: center;
37
+ flex-shrink: 0;
38
+ }
39
+
40
+ .theme-toggle:hover {
41
+ background: rgba(255, 255, 255, 0.1);
42
+ }
43
+
44
+ body.light-mode .theme-toggle:hover {
45
+ background: rgba(0, 0, 0, 0.05);
46
+ }
47
+
48
+ nav {
49
+ background-color: #020617 !important;
50
+ border-bottom-color: #f1f5f9 !important;
51
+ }
52
+
53
+ body.light-mode nav {
54
+ background-color: #ffffff !important;
55
+ border-bottom-color: #0f172a !important;
56
+ }
57
+
58
+ .bg-white {
59
+ background-color: #020617 !important;
60
+ }
61
+
62
+ body.light-mode .bg-white {
63
+ background-color: #ffffff !important;
64
+ }
65
+
66
+ .bg-slate-50 {
67
+ background-color: rgba(255, 255, 255, 0.05) !important;
68
+ }
69
+
70
+ body.light-mode .bg-slate-50 {
71
+ background-color: #f8fafc !important;
72
+ }
73
+
74
+ .border-slate-100 {
75
+ border-color: rgba(255, 255, 255, 0.1) !important;
76
+ }
77
+
78
+ body.light-mode .border-slate-100 {
79
+ border-color: #f1f5f9 !important;
80
+ }
81
+
82
+ .text-slate-900,
83
+ .text-slate-500 {
84
+ color: #f1f5f9 !important;
85
+ }
86
+
87
+ body.light-mode .text-slate-900 { color: #0f172a !important; }
88
+ body.light-mode .text-slate-500 { color: #64748b !important; }
89
+
90
+ .bg-slate-900 {
91
+ background-color: #f1f5f9 !important;
92
+ color: #020617 !important;
93
+ }
94
+
95
+ body.light-mode .bg-slate-900 {
96
+ background-color: #0f172a !important;
97
+ color: #ffffff !important;
98
+ }
99
+
100
+ /* Trending Terminal Number Visibility */
101
+ .text-slate-100 {
102
+ color: rgba(255, 255, 255, 0.2) !important;
103
+ }
104
+
105
+ body.light-mode .text-slate-100 {
106
+ color: #cbd5e1 !important;
107
+ }
108
+
109
+ .hover\:text-slate-900:hover {
110
+ color: #f1f5f9 !important;
111
+ }
112
+
113
+ body.light-mode .hover\:text-slate-900:hover {
114
+ color: #0f172a !important;
115
+ }
116
+
117
+ .group:hover .group-hover\:text-blue-100 {
118
+ color: #93c5fd !important;
119
+ }
120
+
121
+ body.light-mode .group:hover .group-hover\:text-blue-100 {
122
+ color: #3b82f6 !important;
123
+ }
124
+
125
+ /* Glassy Hover for Icons */
126
+ .hover\:glass-light:hover {
127
+ background-color: rgba(255, 255, 255, 0.1) !important;
128
+ backdrop-filter: blur(4px);
129
+ }
130
+
131
+ body.light-mode .hover\:glass-light:hover {
132
+ background-color: rgba(0, 0, 0, 0.05) !important;
133
+ backdrop-filter: blur(4px);
134
+ }
135
+
136
+ /* Footer Link Visibility */
137
+ footer a:hover {
138
+ color: #93c5fd !important;
139
+ }
140
+
141
+ body.light-mode footer a:hover {
142
+ color: #ea580c !important;
143
+ }
144
+
145
+ .moon-icon { display: block; }
146
+ body.light-mode .moon-icon { display: none; }
147
+ body.light-mode .sun-icon { display: block; }
148
+ .sun-icon { display: none; }
149
+ </style>
150
+ </head>
151
+ <body class="font-sans antialiased">
152
+ <!-- Top Bar -->
153
+ <div class="border-b border-slate-100 py-2 bg-slate-50">
154
+ <div class="container mx-auto px-6 flex justify-between items-center text-[10px] font-bold uppercase tracking-widest text-slate-500">
155
+ <div>Monday, February 2, 2026</div>
156
+ <div class="flex gap-6">
157
+ <a href="#" class="hover:text-slate-900">Archive</a>
158
+ <a href="#" class="hover:text-slate-900">Terminal</a>
159
+ <a href="#" class="hover:text-slate-900">Status: Stable</a>
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Navigation -->
165
+ <nav class="border-b border-slate-900 border-b-4 sticky top-0 bg-white z-50">
166
+ <div class="container mx-auto px-6 py-6 flex flex-col md:flex-row justify-between items-center gap-6">
167
+ <div class="text-4xl font-black tracking-tighter uppercase italic">QUANTUM<span class="text-blue-600">NEWS</span></div>
168
+ <div class="flex flex-wrap justify-center gap-8 text-xs font-black uppercase tracking-widest">
169
+ <a href="#" class="border-b-2 border-transparent hover:border-blue-600 transition-colors">Quantum Computing</a>
170
+ <a href="#" class="border-b-2 border-transparent hover:border-blue-600 transition-colors">Neural Nets</a>
171
+ <a href="#" class="border-b-2 border-transparent hover:border-blue-600 transition-colors">Bio-Tech</a>
172
+ <a href="#" class="border-b-2 border-transparent hover:border-blue-600 transition-colors">Space-X</a>
173
+ <a href="#" class="text-blue-600">Live Updates</a>
174
+ </div>
175
+ <div class="flex items-center gap-4">
176
+ <button class="w-10 h-10 flex items-center justify-center hover:glass-light rounded-full transition-colors">
177
+ <svg class="w-6 h-6" 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>
178
+ </button>
179
+ <div id="theme-btn" class="theme-toggle" title="Toggle Theme">
180
+ <svg class="w-6 h-6 sun-icon" 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>
181
+ <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>
182
+ </div>
183
+ <button class="bg-slate-900 text-white px-6 py-2 rounded font-bold text-xs uppercase tracking-widest">Login</button>
184
+ </div>
185
+ </div>
186
+ </nav>
187
+
188
+ <!-- Breaking News -->
189
+ <div class="bg-blue-600 text-white py-3 overflow-hidden whitespace-nowrap">
190
+ <div class="inline-block animate-marquee uppercase font-black text-xs tracking-widest">
191
+ BREAKING: FIRST QUANTUM RECTIFIER DEPLOYED IN MARS COLONY • NEURAL LINK 5.0 BETA BEGINS NEXT WEEK • TOKAMAK REACTOR REACHES NET GAIN STABILITY FOR 48 HOURS •
192
+ </div>
193
+ </div>
194
+
195
+ <main class="container mx-auto px-6 py-12">
196
+ <div class="news-grid">
197
+ <!-- Main Content -->
198
+ <div class="space-y-12">
199
+ <!-- Featured Article -->
200
+ <section class="featured-card group cursor-pointer">
201
+ <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&w=1200&q=80" alt="Quantum Core">
202
+ <div class="featured-overlay">
203
+ <span class="bg-blue-600 text-white px-3 py-1 text-[10px] font-black uppercase tracking-widest mb-4 inline-block">Exclusive</span>
204
+ <h2 class="text-5xl font-black leading-tight mb-4 tracking-tighter">Inside the First <br>Stable Qubit Lattice</h2>
205
+ <p class="text-slate-300 text-lg max-w-2xl mb-6 font-medium">Scientists have achieved a 99.99% coherence rate, effectively ending the era of digital computing as we know it.</p>
206
+ <div class="flex items-center gap-4 text-xs font-bold uppercase tracking-widest">
207
+ <span>By Dr. Aris Thorne</span>
208
+ <span class="text-slate-500">•</span>
209
+ <span>12 Min Read</span>
210
+ </div>
211
+ </div>
212
+ </section>
213
+
214
+ <!-- Secondary News -->
215
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
216
+ <article class="space-y-4 group cursor-pointer">
217
+ <div class="aspect-video bg-slate-100 overflow-hidden rounded-lg">
218
+ <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=600&q=80" class="w-full h-full object-cover group-hover:scale-105 transition-transform">
219
+ </div>
220
+ <span class="text-blue-600 text-[10px] font-black uppercase tracking-widest">Space-X</span>
221
+ <h3 class="text-2xl font-black tracking-tight leading-tight group-hover:underline">The Dyson Ring: First Solar Panels Deploy Around the Moon</h3>
222
+ <p class="text-slate-500 text-sm leading-relaxed">A massive infrastructure project aims to beam 500 terawatts of clean energy directly to Earth's grid.</p>
223
+ </article>
224
+
225
+ <article class="space-y-4 group cursor-pointer">
226
+ <div class="aspect-video bg-slate-100 overflow-hidden rounded-lg">
227
+ <img src="https://images.unsplash.com/photo-1507413245164-6160d8298b31?auto=format&fit=crop&w=600&q=80" class="w-full h-full object-cover group-hover:scale-105 transition-transform">
228
+ </div>
229
+ <span class="text-blue-600 text-[10px] font-black uppercase tracking-widest">Bio-Tech</span>
230
+ <h3 class="text-2xl font-black tracking-tight leading-tight group-hover:underline">Synthetic Neurons Successfully Grafted to Human Cortex</h3>
231
+ <p class="text-slate-500 text-sm leading-relaxed">The breakthrough could lead to a permanent cure for degenerative neural conditions by 2030.</p>
232
+ </article>
233
+ </div>
234
+ </div>
235
+
236
+ <!-- Sidebar -->
237
+ <aside class="space-y-12">
238
+ <div>
239
+ <h4 class="border-b-2 border-slate-900 pb-2 text-xs font-black uppercase tracking-widest mb-6">Trending Terminal</h4>
240
+ <div class="space-y-6">
241
+ <div class="flex gap-4 items-start group cursor-pointer">
242
+ <span class="text-4xl font-black text-slate-100 group-hover:text-blue-100 transition-colors">01</span>
243
+ <div>
244
+ <h5 class="font-bold text-sm leading-tight group-hover:text-blue-600 transition-colors">Market Pulse: Quantum Chip Stocks Surge 400%</h5>
245
+ <p class="text-[10px] text-slate-400 font-bold uppercase mt-1">2 hours ago</p>
246
+ </div>
247
+ </div>
248
+ <div class="flex gap-4 items-start group cursor-pointer">
249
+ <span class="text-4xl font-black text-slate-100 group-hover:text-blue-100 transition-colors">02</span>
250
+ <div>
251
+ <h5 class="font-bold text-sm leading-tight group-hover:text-blue-600 transition-colors">Autonomous Grid: AI Takes Over Power Distribution in EU</h5>
252
+ <p class="text-[10px] text-slate-400 font-bold uppercase mt-1">5 hours ago</p>
253
+ </div>
254
+ </div>
255
+ <div class="flex gap-4 items-start group cursor-pointer">
256
+ <span class="text-4xl font-black text-slate-100 group-hover:text-blue-100 transition-colors">03</span>
257
+ <div>
258
+ <h5 class="font-bold text-sm leading-tight group-hover:text-blue-600 transition-colors">Ocean Cleanup: Nano-Bots Clear Great Pacific Patch</h5>
259
+ <p class="text-[10px] text-slate-400 font-bold uppercase mt-1">8 hours ago</p>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <div class="bg-slate-50 p-6 rounded-xl border border-slate-100">
266
+ <h4 class="text-xs font-black uppercase tracking-widest mb-4">Newsletter</h4>
267
+ <p class="text-xs text-slate-500 mb-6">Join 2.4M subscribers for daily quantum insights.</p>
268
+ <input type="email" placeholder="terminal@id.io" class="w-full bg-white border border-slate-200 p-3 rounded text-sm mb-4 outline-none focus:border-blue-600">
269
+ <button class="w-full bg-blue-600 text-white font-black text-[10px] uppercase tracking-widest py-3 rounded hover:bg-blue-700 transition-colors">Subscribe</button>
270
+ </div>
271
+ </aside>
272
+ </div>
273
+ </main>
274
+
275
+ <!-- Footer -->
276
+ <footer class="bg-slate-900 text-white py-20 mt-24">
277
+ <div class="container mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-12 border-b border-slate-800 pb-16">
278
+ <div class="col-span-1 md:col-span-2">
279
+ <div class="text-3xl font-black tracking-tighter uppercase italic mb-6">QUANTUM<span class="text-blue-600">NEWS</span></div>
280
+ <p class="text-slate-400 max-w-md text-sm leading-relaxed">Reporting from the edge of tomorrow. We translate complex breakthroughs into human experience.</p>
281
+ </div>
282
+ <div>
283
+ <h5 class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-6">Network</h5>
284
+ <ul class="space-y-3 text-xs font-bold list-none p-0">
285
+ <li><a href="#" class="hover:text-blue-600">Quantum Intelligence</a></li>
286
+ <li><a href="#" class="hover:text-blue-600">Space Terminal</a></li>
287
+ <li><a href="#" class="hover:text-blue-600">Bio Nexus</a></li>
288
+ </ul>
289
+ </div>
290
+ <div>
291
+ <h5 class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-6">Connect</h5>
292
+ <ul class="space-y-3 text-xs font-bold list-none p-0">
293
+ <li><a href="#" class="hover:text-blue-600">Neural Link</a></li>
294
+ <li><a href="#" class="hover:text-blue-600">Secure Comms</a></li>
295
+ <li><a href="#" class="hover:text-blue-600">Terminal Access</a></li>
296
+ </ul>
297
+ </div>
298
+ </div>
299
+ <div class="container mx-auto px-6 pt-12 flex justify-between items-center text-[10px] font-bold text-slate-600 uppercase tracking-widest">
300
+ <p>&copy; 2026 Quantum News Network</p>
301
+ <p>Verification Code: QN-9982-X</p>
302
+ </div>
303
+ </footer>
304
+
305
+ <style>
306
+ @keyframes marquee {
307
+ 0% { transform: translateX(100%); }
308
+ 100% { transform: translateX(-100%); }
309
+ }
310
+ .animate-marquee {
311
+ display: inline-block;
312
+ animation: marquee 30s linear infinite;
313
+ }
314
+ </style>
315
+ <script>
316
+ // Theme initialization and management is now handled
317
+ // automatically by Starlight.initTheme() in starlight.js
318
+ </script>
319
+ </body>
320
+ </html>
package/examples/shopping/index.html ADDED
@@ -0,0 +1,330 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Quantum Store | Future of Fashion</title>
7
+ <link rel="stylesheet" href="../../dist/quantum.min.css">
8
+ <script src="../../src/starlight.js"></script>
9
+ <style>
10
+ body { background-color: #f8fafc; color: #0f172a; transition: background-color 0.5s ease, color 0.5s ease; }
11
+ body.dark-mode { background-color: #020617; color: #f1f5f9; }
12
+ .product-card:hover .product-image { transform: scale(1.05); }
13
+ .product-image { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
14
+
15
+ /* Twinkle Hover Effect */
16
+ a:hover, .product-card:hover, .color-swatch:hover {
17
+ animation: star-twinkle 1s infinite ease-in-out;
18
+ }
19
+
20
+ @keyframes star-twinkle {
21
+ 0%, 100% { opacity: 0.8; transform: scale(1); }
22
+ 50% { opacity: 1; transform: scale(1.02); }
23
+ }
24
+
25
+ .color-swatch.selected {
26
+ box-shadow: 0 0 0 4px #00d4ff, 0 0 20px rgba(0, 212, 255, 0.6);
27
+ border-color: #00d4ff !important;
28
+ }
29
+
30
+ /* Theme Toggle Styling */
31
+ .theme-toggle {
32
+ cursor: pointer;
33
+ width: 2.5rem;
34
+ height: 2.5rem;
35
+ border-radius: 50%;
36
+ transition: background 0.3s ease;
37
+ display: flex;
38
+ align-items: center;
39
+ justify-content: center;
40
+ flex-shrink: 0;
41
+ }
42
+
43
+ .theme-toggle:hover {
44
+ background: rgba(0, 0, 0, 0.05);
45
+ }
46
+
47
+ body.dark-mode .theme-toggle:hover {
48
+ background: rgba(255, 255, 255, 0.1);
49
+ }
50
+
51
+ body.dark-mode .bg-white {
52
+ background-color: #0f172a !important;
53
+ border-color: rgba(255, 255, 255, 0.1) !important;
54
+ }
55
+
56
+ body.dark-mode .bg-white\/80 {
57
+ background-color: rgba(2, 6, 23, 0.8) !important;
58
+ }
59
+
60
+ body.dark-mode .glass {
61
+ background-color: rgba(255, 255, 255, 0.08) !important;
62
+ border-color: rgba(255, 255, 255, 0.15) !important;
63
+ }
64
+
65
+ body.dark-mode .bg-slate-100 {
66
+ background-color: rgba(255, 255, 255, 0.1) !important;
67
+ }
68
+
69
+ body.dark-mode .border-slate-100 {
70
+ border-color: rgba(255, 255, 255, 0.1) !important;
71
+ }
72
+
73
+ body.dark-mode nav {
74
+ background-color: rgba(2, 6, 23, 0.8) !important;
75
+ border-color: rgba(255, 255, 255, 0.1) !important;
76
+ }
77
+
78
+ body.light-mode footer {
79
+ background-color: rgba(255, 255, 255, 0.8) !important;
80
+ backdrop-filter: blur(20px);
81
+ border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
82
+ color: #1e293b !important;
83
+ }
84
+
85
+ body.light-mode footer h5 {
86
+ color: #64748b !important;
87
+ }
88
+
89
+ body.light-mode footer a {
90
+ color: #475569 !important;
91
+ }
92
+
93
+ body.light-mode footer a:hover {
94
+ color: #ea580c !important;
95
+ }
96
+
97
+ body.light-mode footer .text-orange-600 {
98
+ color: #ea580c !important;
99
+ }
100
+
101
+ body.light-mode footer .bg-slate-950 {
102
+ background-color: rgba(255, 255, 255, 0.8) !important;
103
+ }
104
+
105
+ body.dark-mode .text-slate-900 {
106
+ color: #f1f5f9 !important;
107
+ }
108
+
109
+ .sun-icon { display: block; }
110
+ body.dark-mode .sun-icon { display: none; }
111
+ body.dark-mode .moon-icon { display: block; }
112
+ .moon-icon { display: none; }
113
+ </style>
114
+ </head>
115
+ <body class="">
116
+ <!-- Announcement Bar -->
117
+ <div class="bg-slate-900 text-white py-3 text-center text-[10px] font-black tracking-[0.3em] uppercase">
118
+ Interstellar Shipping Enabled • New Drops Every Sunday
119
+ </div>
120
+
121
+ <!-- Navigation -->
122
+ <nav class="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200">
123
+ <div class="max-w-[1440px] mx-auto px-8 py-4 flex justify-between items-center">
124
+ <div class="text-2xl font-black tracking-tighter uppercase">QUANTUM<span class="text-orange-600">STORE</span></div>
125
+ <div class="hidden lg:flex space-x-12 text-[11px] font-black uppercase tracking-[0.2em]">
126
+ <a href="#" class="text-slate-900 hover:text-orange-600 transition-colors">Men</a>
127
+ <a href="#" class="text-slate-900 hover:text-orange-600 transition-colors">Women</a>
128
+ <a href="#" class="text-slate-900 hover:text-orange-600 transition-colors">Cybernetics</a>
129
+ <a href="#" class="text-orange-600 font-bold">Limited</a>
130
+ </div>
131
+ <div class="flex items-center space-x-6">
132
+ <div id="theme-btn" class="theme-toggle" title="Toggle Theme">
133
+ <svg class="w-6 h-6 sun-icon" 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>
134
+ <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>
135
+ </div>
136
+ <div class="relative group">
137
+ <a href="#" class="text-slate-900 w-10 h-10 flex items-center justify-center bg-slate-100 rounded-full hover:bg-slate-200 transition-colors">
138
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
139
+ <span class="absolute -top-1 -right-1 bg-orange-600 text-white text-[9px] w-5 h-5 rounded-full flex items-center justify-center font-black shadow-lg border-2 border-white">3</span>
140
+ </a>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </nav>
145
+
146
+ <!-- Header Section -->
147
+ <header class="bg-white border-b border-slate-100">
148
+ <div class="max-w-[1440px] mx-auto px-8 py-12">
149
+ <div class="flex flex-col md:flex-row justify-between items-end gap-12">
150
+ <div class="max-w-2xl">
151
+ <span class="text-orange-600 font-bold uppercase text-xs tracking-widest mb-4 block">Season 2026</span>
152
+ <h1 class="text-6xl font-black mb-4 uppercase italic tracking-tighter leading-none">Cyber-Wear</h1>
153
+ <p class="text-slate-500 text-xl font-medium leading-relaxed">Synthetics, LED-integration, and reactive fibers for the next digital era.</p>
154
+ </div>
155
+ <div class="flex items-center space-x-6">
156
+ <span class="text-xs font-bold text-slate-400 uppercase tracking-widest">Sort by</span>
157
+ <select class="input-starlight h-14 min-w-56 text-slate-900 border-slate-200">
158
+ <option>Newest Arrivals</option>
159
+ <option>Price: Low to High</option>
160
+ <option>Price: High to Low</option>
161
+ </select>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </header>
166
+
167
+ <!-- Main Content -->
168
+ <main class="max-w-[1440px] mx-auto px-8 py-16">
169
+ <div class="flex flex-col lg:flex-row gap-16 items-start">
170
+ <!-- Sidebar -->
171
+ <aside class="w-full lg:w-64 flex-shrink-0 space-y-12">
172
+ <div>
173
+ <h4 class="font-black uppercase text-[10px] tracking-[0.3em] text-slate-400 mb-8">Categories</h4>
174
+ <div class="space-y-4">
175
+ <label class="flex items-center space-x-4 cursor-pointer group">
176
+ <input type="checkbox" class="checkbox-starlight" checked>
177
+ <span class="text-sm font-bold text-slate-600 group-hover:text-slate-900 transition-colors">Heavy Jackets</span>
178
+ </label>
179
+ <label class="flex items-center space-x-4 cursor-pointer group">
180
+ <input type="checkbox" class="checkbox-starlight">
181
+ <span class="text-sm font-bold text-slate-600 group-hover:text-slate-900 transition-colors">Tech Footwear</span>
182
+ </label>
183
+ <label class="flex items-center space-x-4 cursor-pointer group">
184
+ <input type="checkbox" class="checkbox-starlight">
185
+ <span class="text-sm font-bold text-slate-600 group-hover:text-slate-900 transition-colors">Cyber-Accessories</span>
186
+ </label>
187
+ </div>
188
+ </div>
189
+
190
+ <div>
191
+ <h4 class="font-black uppercase text-[10px] tracking-[0.3em] text-slate-400 mb-8">Color Way</h4>
192
+ <div class="flex flex-wrap gap-4" id="color-swatches">
193
+ <button class="w-10 h-10 rounded-full border-2 border-slate-900 color-swatch selected transition-transform" style="background-color: #0f172a;"></button>
194
+ <button class="w-10 h-10 rounded-full border-2 border-slate-200 color-swatch transition-transform" style="background-color: #ffffff;"></button>
195
+ <button class="w-10 h-10 rounded-full border-2 border-transparent color-swatch transition-transform" style="background-color: #ea580c;"></button>
196
+ <button class="w-10 h-10 rounded-full border-2 border-transparent color-swatch transition-transform" style="background-color: #2563eb;"></button>
197
+ </div>
198
+ </div>
199
+ </aside>
200
+
201
+ <!-- Product Grid -->
202
+ <div class="flex-1 min-w-0">
203
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-8 gap-y-16">
204
+ <!-- Product 1 -->
205
+ <div class="product-card group cursor-pointer block">
206
+ <div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl border border-slate-100">
207
+ <img src="images/windbreaker.jpg" alt="Neon Pulse" class="product-image w-full h-full object-cover">
208
+ <div class="absolute top-4 left-4 flex flex-col space-y-2">
209
+ <span class="badge badge-primary bg-orange-600 text-white border-none px-3 py-1 text-[9px] shadow-lg font-black tracking-widest">New Season</span>
210
+ </div>
211
+ <div class="absolute inset-x-4 bottom-4 opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300">
212
+ <button class="btn-starlight w-full border-none rounded-xl text-[9px] font-black uppercase tracking-widest py-4 shadow-2xl">Quick Add</button>
213
+ </div>
214
+ </div>
215
+ <div class="flex justify-between items-start px-1">
216
+ <div>
217
+ <h3 class="font-black text-[13px] uppercase tracking-tight text-slate-900">Neon Pulse Windbreaker</h3>
218
+ <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Reflective Fiber</p>
219
+ </div>
220
+ <span class="font-black text-base text-slate-900">299S</span>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Product 2 -->
225
+ <div class="product-card group cursor-pointer block">
226
+ <div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl border border-slate-100">
227
+ <img src="images/sneakers.jpg" alt="Gravity-Lock" class="product-image w-full h-full object-cover">
228
+ <div class="absolute top-4 left-4">
229
+ <span class="badge badge-secondary bg-slate-900/80 text-white border-none px-3 py-1 text-[9px] backdrop-blur-md font-black tracking-widest">Best Seller</span>
230
+ </div>
231
+ <div class="absolute inset-x-4 bottom-4 opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300">
232
+ <button class="btn-starlight w-full border-none rounded-xl text-[9px] font-black uppercase tracking-widest py-4 shadow-2xl">Quick Add</button>
233
+ </div>
234
+ </div>
235
+ <div class="flex justify-between items-start px-1">
236
+ <div>
237
+ <h3 class="font-black text-[13px] uppercase tracking-tight text-slate-900">Gravity-Lock Sneakers</h3>
238
+ <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Mag-Closure v4</p>
239
+ </div>
240
+ <span class="font-black text-base text-slate-900">540S</span>
241
+ </div>
242
+ </div>
243
+
244
+ <!-- Product 3 -->
245
+ <div class="product-card group cursor-pointer block">
246
+ <div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl border border-slate-100">
247
+ <img src="images/headset.jpg" alt="Neural Link" class="product-image w-full h-full object-cover">
248
+ <div class="absolute top-4 left-4">
249
+ <span class="badge badge-secondary bg-blue-600 text-white border-none px-3 py-1 text-[9px] shadow-lg font-black tracking-widest">Pre-Order</span>
250
+ </div>
251
+ <div class="absolute inset-x-4 bottom-4 opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300">
252
+ <button class="btn-starlight w-full border-none rounded-xl text-[9px] font-black uppercase tracking-widest py-4 shadow-2xl">Quick Add</button>
253
+ </div>
254
+ </div>
255
+ <div class="flex justify-between items-start px-1">
256
+ <div>
257
+ <h3 class="font-black text-[13px] uppercase tracking-tight text-slate-900">Neural Link Headset v2</h3>
258
+ <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Neural-Fiber Mesh</p>
259
+ </div>
260
+ <span class="font-black text-base text-slate-900">1,200S</span>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <!-- Pagination -->
266
+ <div class="mt-20 flex justify-center items-center space-x-6 w-full border-t border-slate-100 pt-16">
267
+ <button class="glass w-12 h-12 flex items-center justify-center p-0 text-base shadow-sm font-black border-blue-600/50">1</button>
268
+ <button class="glass w-12 h-12 flex items-center justify-center p-0 text-slate-400 hover:text-slate-900 transition-all text-base opacity-60 hover:opacity-100">2</button>
269
+ <button class="glass w-12 h-12 flex items-center justify-center p-0 text-slate-400 hover:text-slate-900 transition-all text-base opacity-60 hover:opacity-100">3</button>
270
+ <div class="px-4 text-slate-200 font-black text-lg">/</div>
271
+ <button class="glass px-10 h-12 text-[10px] font-black uppercase tracking-widest shadow-sm opacity-80 hover:opacity-100">Next Cluster</button>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </main>
276
+
277
+ <!-- Footer -->
278
+ <footer class="bg-slate-950 text-white py-12 mt-32 relative">
279
+ <div class="max-w-[1440px] mx-auto px-8">
280
+ <div class="grid grid-cols-1 lg:grid-cols-12 gap-16">
281
+ <div class="lg:col-span-4 space-y-8">
282
+ <div class="text-4xl font-black tracking-tighter uppercase">QUANTUM<span class="text-orange-600">STORE</span></div>
283
+ <p class="text-slate-400 text-sm font-medium leading-loose max-w-sm">Redefining human aesthetics for the digital era through synthetic fiber and light integration.</p>
284
+ </div>
285
+ <div class="lg:col-span-2">
286
+ <h5 class="text-[10px] font-black uppercase tracking-[0.3em] mb-8 text-slate-600">Inventory</h5>
287
+ <ul class="space-y-4 text-sm font-bold list-none p-0">
288
+ <li><a href="#" class="text-white hover:text-orange-600 transition-colors">Drops</a></li>
289
+ <li><a href="#" class="text-white hover:text-orange-600 transition-colors">Wanted</a></li>
290
+ <li><a href="#" class="text-white hover:text-orange-600 transition-colors">Tech</a></li>
291
+ </ul>
292
+ </div>
293
+ <div class="lg:col-span-2">
294
+ <h5 class="text-[10px] font-black uppercase tracking-[0.3em] mb-8 text-slate-600">Support</h5>
295
+ <ul class="space-y-4 text-sm font-bold list-none p-0">
296
+ <li><a href="#" class="text-white hover:text-orange-600 transition-colors">Logistics</a></li>
297
+ <li><a href="#" class="text-white hover:text-orange-600 transition-colors">Returns</a></li>
298
+ <li><a href="#" class="text-white hover:text-orange-600 transition-colors">Sizing</a></li>
299
+ </ul>
300
+ </div>
301
+ <div class="lg:col-span-4 space-y-8">
302
+ <h5 class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-600">Neural Connect</h5>
303
+ <div class="flex flex-col space-y-4">
304
+ <input type="email" class="input-starlight h-12 w-full bg-slate-900 border-slate-800 text-white placeholder:text-slate-600" placeholder="id@nexus.io">
305
+ <button class="btn-starlight w-full h-12 text-[10px] font-black uppercase tracking-widest shadow-2xl shadow-orange-600/20">Sync Comms Link</button>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ <div class="mt-20 pt-12 border-t border-white/5 flex justify-between items-center text-[10px] font-bold text-slate-600 uppercase tracking-widest">
310
+ <p>© 2026 Quantum Store</p>
311
+ <p class="italic tracking-normal">Encrypted Connection Verified</p>
312
+ </div>
313
+ </div>
314
+ </footer>
315
+
316
+ <script>
317
+ // Color Swatch Selection
318
+ const swatches = document.querySelectorAll('.color-swatch');
319
+ swatches.forEach(swatch => {
320
+ swatch.addEventListener('click', () => {
321
+ swatches.forEach(s => s.classList.remove('selected'));
322
+ swatch.classList.add('selected');
323
+ });
324
+ });
325
+
326
+ // Theme initialization and management is now handled
327
+ // automatically by Starlight.initTheme() in starlight.js
328
+ </script>
329
+ </body>
330
+ </html>