@howssatoshi/quantumcss 1.8.0 → 1.10.1
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.
- package/README.md +1 -1
- package/dist/quantum.min.css +10 -1
- package/examples/admin-panel.html +2 -2
- package/examples/analytics-dashboard.html +6 -11
- package/examples/blog-template.html +16 -15
- package/examples/chat-messaging.html +33 -44
- package/examples/email-template.html +2 -2
- package/examples/gaming-template.html +148 -17
- package/examples/gradient-test.html +5 -0
- package/examples/images/eric.png +0 -0
- package/examples/index.html +89 -116
- package/examples/kitchen-sink.html +49 -1
- package/examples/music-streaming.html +3 -3
- package/examples/news-template.html +87 -229
- package/examples/portfolio-resume.html +121 -563
- package/examples/shopping/index.html +514 -327
- package/examples/shopping/nova-shop.css +984 -0
- package/examples/starlight.html +4 -3
- package/examples/travel/index.html +170 -13
- package/examples/video-streaming.html +10 -3
- package/package.json +1 -1
- package/src/defaults.js +1 -0
- package/src/generator.js +12 -3
- package/src/styles/quantum-animations.css +13 -13
- package/src/styles/quantum-base.css +106 -58
- package/src/styles/quantum-components.css +550 -265
- package/src/styles/starlight.css +327 -99
- package/dist/index.html +0 -232
|
@@ -7,10 +7,9 @@
|
|
|
7
7
|
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
8
|
<script src="../src/starlight.js"></script>
|
|
9
9
|
<style>
|
|
10
|
-
/* Base / Dark Mode (Default) */
|
|
11
10
|
body {
|
|
12
|
-
background-color:
|
|
13
|
-
color:
|
|
11
|
+
background-color: var(--q-color-bg);
|
|
12
|
+
color: var(--q-color-text);
|
|
14
13
|
transition: background-color 0.5s ease, color 0.5s ease;
|
|
15
14
|
}
|
|
16
15
|
|
|
@@ -29,6 +28,17 @@
|
|
|
29
28
|
color: white;
|
|
30
29
|
}
|
|
31
30
|
|
|
31
|
+
/* Marquee Animation */
|
|
32
|
+
@keyframes marquee {
|
|
33
|
+
0% { transform: translateX(0); }
|
|
34
|
+
100% { transform: translateX(-50%); }
|
|
35
|
+
}
|
|
36
|
+
.animate-marquee {
|
|
37
|
+
display: flex;
|
|
38
|
+
width: max-content;
|
|
39
|
+
animation: marquee 30s linear infinite;
|
|
40
|
+
}
|
|
41
|
+
|
|
32
42
|
/* Theme Toggle Styling */
|
|
33
43
|
.theme-toggle {
|
|
34
44
|
cursor: pointer;
|
|
@@ -40,278 +50,126 @@
|
|
|
40
50
|
align-items: center;
|
|
41
51
|
justify-content: center;
|
|
42
52
|
flex-shrink: 0;
|
|
43
|
-
color:
|
|
53
|
+
color: var(--q-color-text);
|
|
44
54
|
}
|
|
45
55
|
|
|
46
56
|
.theme-toggle:hover {
|
|
47
|
-
background:
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
/* Dark Mode Styles (Default Overrides) */
|
|
51
|
-
.bg-white {
|
|
52
|
-
background-color: #020617 !important;
|
|
53
|
-
color: #f1f5f9 !important;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.bg-slate-50 {
|
|
57
|
-
background-color: rgba(255, 255, 255, 0.05) !important;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.bg-slate-900 {
|
|
61
|
-
background-color: #f1f5f9 !important;
|
|
62
|
-
color: #020617 !important;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.border-slate-100 {
|
|
66
|
-
border-color: rgba(255, 255, 255, 0.1) !important;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.text-slate-900,
|
|
70
|
-
.text-slate-500 {
|
|
71
|
-
color: #f1f5f9 !important;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.text-blue-600 {
|
|
75
|
-
color: #60a5fa !important;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
nav {
|
|
79
|
-
background-color: #020617 !important;
|
|
80
|
-
ottom-color: rgba(255, 255, 255, 0.1) !important;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/* Light Mode Overrides */
|
|
84
|
-
html[data-theme="light"] {
|
|
85
|
-
background-color: #ffffff;
|
|
86
|
-
color: #0f172a;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
html[data-theme="light"] .bg-white {
|
|
90
|
-
background-color: #ffffff !important;
|
|
91
|
-
color: #0f172a !important;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
html[data-theme="light"] .bg-slate-50 {
|
|
95
|
-
background-color: #f8fafc !important;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
html[data-theme="light"] .bg-slate-900 {
|
|
99
|
-
background-color: #0f172a !important;
|
|
100
|
-
color: #ffffff !important;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
html[data-theme="light"] .border-slate-100 {
|
|
104
|
-
border-color: #f1f5f9 !important;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
html[data-theme="light"] .text-slate-900 { color: #0f172a !important; }
|
|
108
|
-
html[data-theme="light"] .text-slate-500 { color: #64748b !important; }
|
|
109
|
-
html[data-theme="light"] .text-blue-600 { color: #2563eb !important; }
|
|
110
|
-
|
|
111
|
-
html[data-theme="light"] nav {
|
|
112
|
-
background-color: #ffffff !important;
|
|
113
|
-
ottom-color: #0f172a !important;
|
|
57
|
+
background: var(--q-highlight-bg);
|
|
114
58
|
}
|
|
115
59
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
html[data-theme="light"] .theme-toggle:hover {
|
|
121
|
-
background: rgba(0, 0, 0, 0.05);
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
/* Component Visibility */
|
|
125
|
-
.text-slate-100 {
|
|
126
|
-
color: rgba(255, 255, 255, 0.2) !important;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
html[data-theme="light"] .text-slate-100 {
|
|
130
|
-
color: #cbd5e1 !important;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
/* Glassy Hover for Icons */
|
|
134
|
-
.hover\:glass-light="hover" {
|
|
135
|
-
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
136
|
-
backdrop-filter: blur(4px);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
html[data-theme="light"] .hover\:glass-light="hover" {
|
|
140
|
-
background-color: rgba(0, 0, 0, 0.05) !important;
|
|
141
|
-
backdrop-filter: blur(4px);
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
footer a:hover { color: #60a5fa !important; }
|
|
145
|
-
html[data-theme="light"] footer a:hover { color: #2563eb !important; }
|
|
60
|
+
.sun-icon { display: none; }
|
|
61
|
+
html[data-theme="light"] .sun-icon { display: inline; }
|
|
62
|
+
html[data-theme="light"] .moon-icon { display: none; }
|
|
146
63
|
</style>
|
|
147
64
|
</head>
|
|
148
|
-
<body class="
|
|
149
|
-
<!-- Top Bar -->
|
|
150
|
-
<div class=" border-slate-100 py-2 bg-slate-50">
|
|
151
|
-
<div class="container mx-auto px-6 flex justify-between items-center text-[10px] font-bold uppercase tracking-widest text-slate-500">
|
|
152
|
-
<div>Monday, February 2, 2026</div>
|
|
153
|
-
<div class="flex gap-6">
|
|
154
|
-
<a href="#" class="hover="text-slate-900"">Archive</a>
|
|
155
|
-
<a href="#" class="hover="text-slate-900"">Terminal</a>
|
|
156
|
-
<a href="#" class="hover="text-slate-900"">Status: Stable</a>
|
|
157
|
-
</div>
|
|
158
|
-
</div>
|
|
159
|
-
</div>
|
|
160
|
-
|
|
65
|
+
<body class="bg-surface">
|
|
161
66
|
<!-- Navigation -->
|
|
162
|
-
<nav class="
|
|
163
|
-
<div class="container mx-auto px-6
|
|
164
|
-
<div class="text-2xl sm:text-4xl font-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
<a href="#" class="
|
|
168
|
-
<a href="#" class="
|
|
169
|
-
<a href="#" class="
|
|
170
|
-
<a href="#" class="text-blue-600">
|
|
67
|
+
<nav class="starlight-navbar">
|
|
68
|
+
<div class="container mx-auto px-6 h-20 flex justify-between items-center">
|
|
69
|
+
<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>
|
|
70
|
+
|
|
71
|
+
<div class="hidden md:flex flex-1 justify-center gap-12 text-xs font-black uppercase tracking-widest">
|
|
72
|
+
<a href="#" class="hover:text-blue-600 transition-colors">Neural Mesh</a>
|
|
73
|
+
<a href="#" class="hover:text-blue-600 transition-colors">Bio-Tech</a>
|
|
74
|
+
<a href="#" class="hover:text-blue-600 transition-colors">Space-X</a>
|
|
75
|
+
<a href="#" class="hover:text-blue-600 transition-colors">Quantum Compute</a>
|
|
171
76
|
</div>
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
<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>
|
|
178
|
-
<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>
|
|
77
|
+
|
|
78
|
+
<div class="flex items-center gap-6 shrink-0">
|
|
79
|
+
<div id="theme-btn" class="theme-toggle" onclick="toggleTheme()" title="Toggle Theme">
|
|
80
|
+
<svg class="sun-icon w-6 h-6" 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>
|
|
81
|
+
<svg class="moon-icon w-6 h-6" 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>
|
|
179
82
|
</div>
|
|
180
|
-
<button class="
|
|
83
|
+
<button class="btn btn-secondary px-6 py-2 rounded font-bold text-xs uppercase tracking-widest">Login</button>
|
|
181
84
|
</div>
|
|
182
85
|
</div>
|
|
183
86
|
</nav>
|
|
184
87
|
|
|
185
|
-
<!-- Breaking News -->
|
|
186
|
-
<div class="bg-blue-600 text-white py-3 overflow-hidden
|
|
187
|
-
<div class="
|
|
188
|
-
|
|
88
|
+
<!-- Breaking News Ticker -->
|
|
89
|
+
<div class="bg-blue-600 text-white py-3 overflow-hidden">
|
|
90
|
+
<div class="flex animate-marquee uppercase font-black text-xs tracking-widest gap-24 items-center">
|
|
91
|
+
<span class="whitespace-nowrap">First Mars colony reports stable oxygen synthesis</span>
|
|
92
|
+
<span class="whitespace-nowrap">Global Neural-Link rollout scheduled for Q3</span>
|
|
93
|
+
<span class="whitespace-nowrap">Quantum encryption broken by experimental lattice</span>
|
|
94
|
+
<span class="whitespace-nowrap">Voyager 1 signal restored after 50 years</span>
|
|
95
|
+
<!-- Duplicated for seamless loop -->
|
|
96
|
+
<span class="whitespace-nowrap">First Mars colony reports stable oxygen synthesis</span>
|
|
97
|
+
<span class="whitespace-nowrap">Global Neural-Link rollout scheduled for Q3</span>
|
|
98
|
+
<span class="whitespace-nowrap">Quantum encryption broken by experimental lattice</span>
|
|
99
|
+
<span class="whitespace-nowrap">Voyager 1 signal restored after 50 years</span>
|
|
189
100
|
</div>
|
|
190
101
|
</div>
|
|
191
102
|
|
|
192
|
-
|
|
103
|
+
<!-- Main Grid -->
|
|
104
|
+
<main class="max-w-7xl mx-auto px-6 py-12">
|
|
193
105
|
<div class="news-grid">
|
|
194
|
-
|
|
106
|
+
|
|
107
|
+
<!-- Left Column: News Feed -->
|
|
195
108
|
<div class="space-y-12">
|
|
196
109
|
<!-- Featured Article -->
|
|
197
|
-
<
|
|
198
|
-
<img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&w=1200&q=80" alt="Quantum
|
|
110
|
+
<div class="featured-card group cursor-pointer">
|
|
111
|
+
<img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&w=1200&q=80" alt="Quantum Compute">
|
|
199
112
|
<div class="featured-overlay">
|
|
200
113
|
<span class="bg-blue-600 text-white px-3 py-1 text-[10px] font-black uppercase tracking-widest mb-4 inline-block">Exclusive</span>
|
|
201
|
-
<h2 class="text-5xl font-black leading-tight mb-4 tracking-tighter">Inside the First <br>Stable Qubit Lattice</h2>
|
|
202
|
-
<p class="text-
|
|
203
|
-
<div class="flex items-center gap-4 text-xs font-bold uppercase tracking-widest">
|
|
204
|
-
<span>By Dr. Aris Thorne</span>
|
|
205
|
-
<span class="text-slate-500">•</span>
|
|
206
|
-
<span>12 Min Read</span>
|
|
207
|
-
</div>
|
|
114
|
+
<h2 class="text-5xl font-black leading-tight mb-4 tracking-tighter uppercase italic">Inside the First <br>Stable Qubit Lattice</h2>
|
|
115
|
+
<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>
|
|
208
116
|
</div>
|
|
209
|
-
</
|
|
117
|
+
</div>
|
|
210
118
|
|
|
211
|
-
<!-- Secondary
|
|
119
|
+
<!-- Secondary Grid -->
|
|
212
120
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
|
|
213
|
-
<
|
|
214
|
-
<div class="aspect-video bg-slate-
|
|
215
|
-
<img src="https://images.unsplash.com/photo-
|
|
121
|
+
<div class="group cursor-pointer">
|
|
122
|
+
<div class="overflow-hidden rounded-xl mb-6 aspect-video bg-slate-800">
|
|
123
|
+
<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">
|
|
216
124
|
</div>
|
|
217
125
|
<span class="text-blue-600 text-[10px] font-black uppercase tracking-widest">Space-X</span>
|
|
218
|
-
<h3 class="text-2xl font-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
<div class="aspect-video bg-slate-100 overflow-hidden rounded-lg">
|
|
224
|
-
<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">
|
|
126
|
+
<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>
|
|
127
|
+
</div>
|
|
128
|
+
<div class="group cursor-pointer">
|
|
129
|
+
<div class="overflow-hidden rounded-xl mb-6 aspect-video bg-slate-800">
|
|
130
|
+
<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">
|
|
225
131
|
</div>
|
|
226
132
|
<span class="text-blue-600 text-[10px] font-black uppercase tracking-widest">Bio-Tech</span>
|
|
227
|
-
<h3 class="text-2xl font-
|
|
228
|
-
|
|
229
|
-
</article>
|
|
133
|
+
<h3 class="text-2xl font-bold tracking-tight leading-tight group-hover:underline uppercase mt-2">Synthetic Neurons Successfully Grafted to Human Cortex</h3>
|
|
134
|
+
</div>
|
|
230
135
|
</div>
|
|
231
136
|
</div>
|
|
232
137
|
|
|
233
|
-
<!-- Sidebar -->
|
|
138
|
+
<!-- Right Column: Sidebar -->
|
|
234
139
|
<aside class="space-y-12">
|
|
235
|
-
<div>
|
|
236
|
-
<h4 class="border-b-2 border-
|
|
237
|
-
<div class="space-y-
|
|
238
|
-
<div class="flex gap-
|
|
239
|
-
<span class="text-4xl font-black text-
|
|
240
|
-
<
|
|
241
|
-
<h5 class="font-bold text-sm leading-tight group-hover:text-blue-600 transition-colors">Market Pulse: Quantum Chip Stocks Surge 400%</h5>
|
|
242
|
-
<p class="text-[10px] text-slate-400 font-bold uppercase mt-1">2 hours ago</p>
|
|
243
|
-
</div>
|
|
140
|
+
<div class="bg-highlight p-8 rounded-2xl border border-white_5">
|
|
141
|
+
<h4 class="border-b-2 border-accent pb-2 text-xs font-black uppercase tracking-widest mb-6">Trending Terminal</h4>
|
|
142
|
+
<div class="space-y-8">
|
|
143
|
+
<div class="flex gap-6 group cursor-pointer">
|
|
144
|
+
<span class="text-4xl font-black text-secondary opacity-30 group-hover:text-blue-600 group-hover:opacity-100 transition-all">01</span>
|
|
145
|
+
<p class="text-sm font-bold leading-snug">The Ethics of Algorithmic Governance in Neo-Tokyo</p>
|
|
244
146
|
</div>
|
|
245
|
-
<div class="flex gap-
|
|
246
|
-
<span class="text-4xl font-black text-
|
|
247
|
-
<
|
|
248
|
-
<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>
|
|
249
|
-
<p class="text-[10px] text-slate-400 font-bold uppercase mt-1">5 hours ago</p>
|
|
250
|
-
</div>
|
|
147
|
+
<div class="flex gap-6 group cursor-pointer">
|
|
148
|
+
<span class="text-4xl font-black text-secondary opacity-30 group-hover:text-blue-600 group-hover:opacity-100 transition-all">02</span>
|
|
149
|
+
<p class="text-sm font-bold leading-snug">Liquid Metal Battery: Storage Problem Solved?</p>
|
|
251
150
|
</div>
|
|
252
|
-
<div class="flex gap-
|
|
253
|
-
<span class="text-4xl font-black text-
|
|
254
|
-
<
|
|
255
|
-
<h5 class="font-bold text-sm leading-tight group-hover:text-blue-600 transition-colors">Ocean Cleanup: Nano-Bots Clear Great Pacific Patch</h5>
|
|
256
|
-
<p class="text-[10px] text-slate-400 font-bold uppercase mt-1">8 hours ago</p>
|
|
257
|
-
</div>
|
|
151
|
+
<div class="flex gap-6 group cursor-pointer">
|
|
152
|
+
<span class="text-4xl font-black text-secondary opacity-30 group-hover:text-blue-600 group-hover:opacity-100 transition-all">03</span>
|
|
153
|
+
<p class="text-sm font-bold leading-snug">Interstellar Web: Laser Relay Reaches Alpha Centauri</p>
|
|
258
154
|
</div>
|
|
259
155
|
</div>
|
|
260
156
|
</div>
|
|
261
157
|
|
|
262
|
-
<div class="
|
|
158
|
+
<div class="p-8 rounded-2xl bg-accent text-white">
|
|
263
159
|
<h4 class="text-xs font-black uppercase tracking-widest mb-4">Newsletter</h4>
|
|
264
|
-
<p class="text-
|
|
265
|
-
<input type="email" placeholder="terminal@id.io" class="w-full bg-
|
|
266
|
-
<button class="w-full bg-blue-600
|
|
160
|
+
<p class="text-sm opacity-90 mb-6">Receive the morning data-stream directly to your neural link.</p>
|
|
161
|
+
<input type="email" placeholder="terminal@id.io" class="w-full bg-white_10 border border-white_20 p-3 rounded text-sm mb-4 outline-none focus:border-white text-white placeholder:text-white_50">
|
|
162
|
+
<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>
|
|
267
163
|
</div>
|
|
268
164
|
</aside>
|
|
269
165
|
</div>
|
|
270
166
|
</main>
|
|
271
167
|
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
<
|
|
276
|
-
<div class="text-3xl font-black tracking-tighter uppercase italic mb-6 text-primary">QUANTUM<span class="text-blue-600">NEWS</span></div>
|
|
277
|
-
<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>
|
|
278
|
-
</div>
|
|
279
|
-
<div>
|
|
280
|
-
<h5 class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-6">Network</h5>
|
|
281
|
-
<ul class="space-y-3 text-xs font-bold list-none p-0">
|
|
282
|
-
<li><a href="#" class="hover:text-blue-600">Quantum Intelligence</a></li>
|
|
283
|
-
<li><a href="#" class="hover:text-blue-600">Space Terminal</a></li>
|
|
284
|
-
<li><a href="#" class="hover:text-blue-600">Bio Nexus</a></li>
|
|
285
|
-
</ul>
|
|
286
|
-
</div>
|
|
287
|
-
<div>
|
|
288
|
-
<h5 class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-6">Connect</h5>
|
|
289
|
-
<ul class="space-y-3 text-xs font-bold list-none p-0">
|
|
290
|
-
<li><a href="#" class="hover:text-blue-600">Neural Link</a></li>
|
|
291
|
-
<li><a href="#" class="hover:text-blue-600">Secure Comms</a></li>
|
|
292
|
-
<li><a href="#" class="hover:text-blue-600">Terminal Access</a></li>
|
|
293
|
-
</ul>
|
|
294
|
-
</div>
|
|
295
|
-
</div>
|
|
296
|
-
<div class="container mx-auto px-6 pt-12 flex justify-between items-center text-[10px] font-bold text-slate-600 uppercase tracking-widest">
|
|
297
|
-
<p>© 2026 Quantum News Network</p>
|
|
298
|
-
<p>Verification Code: QN-9982-X</p>
|
|
168
|
+
<footer class="border-t border-white_5 py-12 mt-12 bg-surface">
|
|
169
|
+
<div class="max-w-7xl mx-auto px-6 text-center">
|
|
170
|
+
<div class="text-2xl font-black tracking-tighter uppercase italic text-primary mb-4">QUANTUM<span class="text-blue-600">NEWS</span></div>
|
|
171
|
+
<p class="text-xs text-secondary uppercase tracking-[0.3em]">© 2026 Interstellar News Network. No Rights Reserved.</p>
|
|
299
172
|
</div>
|
|
300
173
|
</footer>
|
|
301
|
-
|
|
302
|
-
<style>
|
|
303
|
-
@keyframes marquee {
|
|
304
|
-
0% { transform: translateX(100%); }
|
|
305
|
-
100% { transform: translateX(-100%); }
|
|
306
|
-
}
|
|
307
|
-
.animate-marquee {
|
|
308
|
-
display: inline-block;
|
|
309
|
-
animation: marquee 30s linear infinite;
|
|
310
|
-
}
|
|
311
|
-
</style>
|
|
312
|
-
<script>
|
|
313
|
-
// Theme initialization and management is now handled
|
|
314
|
-
// automatically by Starlight.initTheme() in starlight.js
|
|
315
|
-
</script>
|
|
316
174
|
</body>
|
|
317
175
|
</html>
|