|
47 | 47 | overflow-x: hidden; |
48 | 48 | } |
49 | 49 |
|
50 | | - /* Animated Background */ |
51 | 50 | .bg-effects { |
52 | 51 | position: fixed; |
53 | 52 | top: 0; |
|
120 | 119 | z-index: 1; |
121 | 120 | } |
122 | 121 |
|
123 | | - /* Header */ |
124 | 122 | header { |
125 | 123 | padding: 20px 0; |
126 | 124 | position: fixed; |
|
129 | 127 | right: 0; |
130 | 128 | z-index: 1000; |
131 | 129 | transition: all 0.3s ease; |
132 | | - } |
133 | | - |
134 | | - header.scrolled { |
135 | | - background: rgba(10, 10, 15, 0.8); |
| 130 | + background: rgba(10, 10, 15, 0.9); |
136 | 131 | backdrop-filter: blur(20px); |
137 | 132 | border-bottom: 1px solid var(--border); |
138 | 133 | } |
|
180 | 175 | position: relative; |
181 | 176 | } |
182 | 177 |
|
183 | | - nav a::after { |
184 | | - content: ''; |
185 | | - position: absolute; |
186 | | - bottom: -4px; |
187 | | - left: 0; |
188 | | - width: 0; |
189 | | - height: 2px; |
190 | | - background: var(--gradient-1); |
191 | | - transition: width 0.3s ease; |
192 | | - } |
193 | | - |
194 | 178 | nav a:hover { |
195 | 179 | color: var(--text); |
196 | 180 | } |
197 | 181 |
|
198 | | - nav a:hover::after { |
199 | | - width: 100%; |
200 | | - } |
201 | | - |
202 | 182 | .btn { |
203 | 183 | display: inline-flex; |
204 | 184 | align-items: center; |
|
233 | 213 |
|
234 | 214 | .btn-secondary:hover { |
235 | 215 | background: var(--surface-hover); |
236 | | - border-color: var(--text-muted); |
237 | 216 | } |
238 | 217 |
|
239 | | - /* Footer */ |
240 | 218 | footer { |
241 | 219 | padding: 60px 0; |
242 | 220 | border-top: 1px solid var(--border); |
243 | 221 | text-align: center; |
| 222 | + background: var(--surface); |
244 | 223 | } |
245 | 224 |
|
246 | 225 | footer .container { |
|
282 | 261 | } |
283 | 262 | } |
284 | 263 | </style> |
285 | | - {% if page.extra_styles %} |
286 | | - <style> |
287 | | - {{ page.extra_styles }} |
288 | | - </style> |
289 | | - {% endif %} |
290 | 264 | </head> |
291 | 265 | <body> |
292 | 266 | <div class="bg-effects"> |
|
296 | 270 | <div class="bg-grid"></div> |
297 | 271 | </div> |
298 | 272 |
|
299 | | - <header id="header"> |
| 273 | + <header> |
300 | 274 | <div class="container"> |
301 | 275 | <a href="{{ '/' | relative_url }}" class="logo"> |
302 | 276 | <div class="logo-icon">💰</div> |
|
333 | 307 | </footer> |
334 | 308 |
|
335 | 309 | <script> |
336 | | - // Header scroll effect |
337 | | - const header = document.getElementById('header'); |
338 | | - window.addEventListener('scroll', () => { |
339 | | - if (window.scrollY > 50) { |
340 | | - header.classList.add('scrolled'); |
341 | | - } else { |
342 | | - header.classList.remove('scrolled'); |
343 | | - } |
| 310 | + document.addEventListener('mousemove', (e) => { |
| 311 | + const x = (e.clientX / window.innerWidth - 0.5) * 20; |
| 312 | + const y = (e.clientY / window.innerHeight - 0.5) * 20; |
| 313 | + document.querySelectorAll('.bg-orb').forEach((orb, index) => { |
| 314 | + const speed = (index + 1) * 0.5; |
| 315 | + orb.style.transform = `translate(${x * speed}px, ${y * speed}px)`; |
| 316 | + }); |
344 | 317 | }); |
345 | 318 |
|
346 | | - // Smooth scroll for anchor links |
347 | 319 | document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
348 | 320 | anchor.addEventListener('click', function(e) { |
349 | 321 | e.preventDefault(); |
350 | 322 | const target = document.querySelector(this.getAttribute('href')); |
351 | 323 | if (target) { |
352 | | - target.scrollIntoView({ |
353 | | - behavior: 'smooth', |
354 | | - block: 'start' |
355 | | - }); |
| 324 | + target.scrollIntoView({ behavior: 'smooth', block: 'start' }); |
356 | 325 | } |
357 | 326 | }); |
358 | 327 | }); |
359 | | - |
360 | | - // Parallax effect on mouse move |
361 | | - document.addEventListener('mousemove', (e) => { |
362 | | - const x = (e.clientX / window.innerWidth - 0.5) * 20; |
363 | | - const y = (e.clientY / window.innerHeight - 0.5) * 20; |
364 | | - document.querySelectorAll('.bg-orb').forEach((orb, index) => { |
365 | | - const speed = (index + 1) * 0.5; |
366 | | - orb.style.transform = `translate(${x * speed}px, ${y * speed}px)`; |
367 | | - }); |
368 | | - }); |
369 | 328 | </script> |
370 | 329 | </body> |
371 | 330 | </html> |
0 commit comments