forked from
joebasser.com/atmosphere-account
this repo has no description
Fix nav scroll flash; align provider cards; solid popular badge
Reserve nav bottom border and soften scrolled shadow to avoid a dark
hairline when the bar appears. Drop featured-card blue border so the
Apps tile matches other glass cards. Make the Most popular pill a
higher-contrast solid fill.
Made-with: Cursor
+15
-18
+14
-17
assets/styles.css
+14
-17
assets/styles.css
···
212
212
display: flex;
213
213
align-items: center;
214
214
justify-content: space-between;
215
+
/* Reserve border so .scrolled doesn’t flash a dark seam during backdrop compositing */
216
+
border-bottom: 1px solid transparent;
215
217
transition:
216
218
background 0.3s ease,
217
219
border-color 0.3s ease,
···
223
225
background: rgba(255, 255, 255, 0.55);
224
226
backdrop-filter: blur(20px);
225
227
-webkit-backdrop-filter: blur(20px);
226
-
border-bottom: 1px solid rgba(255, 255, 255, 0.65);
227
-
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
228
+
border-bottom-color: rgba(255, 255, 255, 0.65);
229
+
/* Avoid dark drop shadow — it reads as a black hairline while the bar eases in */
230
+
box-shadow: 0 12px 40px rgba(14, 20, 40, 0.05);
228
231
}
229
232
230
233
.nav-logo {
···
1015
1018
transform: translateY(-4px);
1016
1019
}
1017
1020
1018
-
.provider-card-featured {
1019
-
border-color: rgba(32, 112, 200, 0.38);
1020
-
}
1021
-
1022
1021
.provider-card-badge {
1023
1022
position: absolute;
1024
1023
top: -0.65rem;
1025
1024
left: 50%;
1026
1025
transform: translateX(-50%);
1027
-
padding: 0.2rem 0.75rem;
1026
+
padding: 0.25rem 0.85rem;
1028
1027
border-radius: 100px;
1029
1028
font-size: 0.65rem;
1030
1029
font-weight: 600;
1031
1030
letter-spacing: 0.06em;
1032
1031
text-transform: uppercase;
1033
-
background: rgba(32, 112, 200, 0.14);
1034
-
border: 1px solid rgba(32, 112, 200, 0.28);
1035
-
color: #154f9c;
1032
+
background: #174a8c;
1033
+
border: 1px solid rgba(10, 35, 72, 0.45);
1034
+
color: #f4f8ff;
1036
1035
white-space: nowrap;
1036
+
box-shadow: 0 1px 2px rgba(10, 24, 48, 0.12);
1037
1037
}
1038
1038
1039
1039
.provider-logo-row {
···
1418
1418
color: #9ec8f0;
1419
1419
}
1420
1420
1421
-
.dark-phase .provider-card-featured {
1422
-
border-color: rgba(120, 195, 255, 0.35);
1423
-
}
1424
-
1425
1421
.dark-phase .provider-card-badge {
1426
-
background: rgba(120, 195, 255, 0.18);
1427
-
border-color: rgba(120, 195, 255, 0.32);
1428
-
color: #a8d8fc;
1422
+
background: #2a6ec4;
1423
+
border-color: rgba(180, 215, 255, 0.35);
1424
+
color: #f4f8ff;
1425
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
1429
1426
}
1430
1427
1431
1428
.dark-phase .provider-logo-row {
+1
-1
components/BlueskySection.tsx
+1
-1
components/BlueskySection.tsx