forked from
joebasser.com/atmosphere-account
this repo has no description
Split nav and effects into separate fixed strips
Keep the main nav (logo + actions) as its own frosted bar; place the
Effects toggle in a second fixed row below with transparent background.
Restore scroll styling on #main-nav and use CSS variables for bar
heights so hero padding clears both strips.
Made-with: Cursor
+69
-38
+40
-14
assets/styles.css
+40
-14
assets/styles.css
···
151
151
152
152
/* Sky “static” mode is handled in JS (p=0, no cloud parallax) — clouds stay visible */
153
153
154
-
.nav-protocol-stack {
155
-
display: flex;
156
-
flex-direction: column;
157
-
align-items: flex-end;
158
-
gap: 0.35rem;
159
-
}
160
-
161
154
.nav-sky-switch-label {
162
155
display: flex;
163
156
align-items: center;
···
235
228
font-size: 0.6rem;
236
229
gap: 0.3rem;
237
230
}
238
-
239
-
.nav-protocol-stack {
240
-
gap: 0.28rem;
241
-
}
242
231
}
243
232
244
233
/* ================================
···
295
284
Navigation
296
285
================================ */
297
286
287
+
:root {
288
+
/* Height of fixed .nav row — keeps .nav-effects-bar aligned below it */
289
+
--nav-bar-height: 4.5rem;
290
+
--nav-effects-strip: 2rem;
291
+
}
292
+
298
293
.nav {
299
294
position: fixed;
300
295
top: 0;
301
296
left: 0;
302
297
right: 0;
303
-
z-index: 100;
298
+
z-index: 101;
304
299
padding: 1rem 1.5rem;
305
300
display: flex;
306
301
align-items: center;
307
302
justify-content: space-between;
303
+
gap: 0.75rem;
304
+
min-width: 0;
308
305
/* Reserve border so .scrolled doesn’t flash a dark seam during backdrop compositing */
309
306
border-bottom: 1px solid transparent;
310
307
transition:
···
323
320
box-shadow: 0 12px 40px rgba(14, 20, 40, 0.05);
324
321
}
325
322
323
+
/* Effects toggle: own fixed strip under the nav (not inside nav glass) */
324
+
.nav-effects-bar {
325
+
position: fixed;
326
+
top: var(--nav-bar-height);
327
+
left: 0;
328
+
right: 0;
329
+
z-index: 100;
330
+
padding: 0.35rem 1.5rem 0.55rem;
331
+
display: flex;
332
+
justify-content: flex-end;
333
+
align-items: center;
334
+
min-height: 1.75rem;
335
+
background: transparent;
336
+
pointer-events: none;
337
+
}
338
+
339
+
.nav-effects-bar .nav-sky-switch-label {
340
+
pointer-events: auto;
341
+
}
342
+
343
+
@media (max-width: 480px) {
344
+
:root {
345
+
--nav-bar-height: 4.35rem;
346
+
}
347
+
}
348
+
326
349
.nav-logo {
327
350
display: flex;
328
351
align-items: center;
···
347
370
348
371
.nav-links {
349
372
display: flex;
350
-
align-items: flex-start;
373
+
align-items: center;
351
374
gap: 0.75rem;
375
+
flex-shrink: 0;
352
376
}
353
377
354
378
.nav-btn {
···
515
539
justify-content: center;
516
540
text-align: center;
517
541
position: relative;
518
-
padding: 6rem 1.5rem 4rem;
542
+
/* Clear fixed nav + separate effects strip */
543
+
padding: calc(var(--nav-bar-height) + var(--nav-effects-strip) + 1rem) 1.5rem
544
+
4rem;
519
545
}
520
546
521
547
.hero-eyebrow {