forked from
joebasser.com/atmosphere-account
this repo has no description
Tune sky scroll gradient and hero scroll cue on mobile
Keep the sky cycle in daytime tones so luminance never drops below the
dark-phase threshold; text and glass styles stay consistent.
Raise the hero scroll indicator on narrow viewports and add safe-area
inset so it clears mobile browser bottom chrome.
Made-with: Cursor
+72
-14
+65
-6
assets/styles.css
+65
-6
assets/styles.css
···
446
446
color: #0e1428;
447
447
}
448
448
449
+
/* Sit above mobile browser bottom chrome (e.g. Safari address bar tools) */
450
+
@media (max-width: 768px) {
451
+
.scroll-indicator {
452
+
bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
453
+
}
454
+
}
455
+
449
456
@keyframes bounce {
450
457
0%, 20%, 50%, 80%, 100% {
451
458
transform: translateX(-50%) translateY(0);
···
815
822
}
816
823
}
817
824
818
-
/* Mobile: stack vertically */
825
+
/* Mobile: hub on top, two columns of pills (shorter than a single tall stack) */
819
826
820
827
@media (max-width: 640px) {
821
828
.flow-diagram {
822
-
grid-template-columns: 1fr;
823
-
gap: 1.5rem;
829
+
grid-template-columns: 1fr 1fr;
830
+
grid-template-rows: auto auto;
831
+
gap: 0.65rem 0.5rem;
832
+
align-items: start;
833
+
margin-top: 1.75rem;
824
834
}
825
835
826
-
.flow-column-left,
836
+
/* Hub spans full width, first row */
837
+
.flow-center {
838
+
grid-column: 1 / -1;
839
+
grid-row: 1;
840
+
padding: 0.35rem 0 0.25rem;
841
+
min-height: 0;
842
+
}
843
+
844
+
.flow-column-left {
845
+
grid-column: 1;
846
+
grid-row: 2;
847
+
align-items: center;
848
+
}
849
+
827
850
.flow-column-right {
851
+
grid-column: 2;
852
+
grid-row: 2;
828
853
align-items: center;
829
854
}
830
855
831
856
.flow-column-left .flow-column-label,
832
857
.flow-column-right .flow-column-label {
833
858
text-align: center;
859
+
padding: 0 0.35rem;
860
+
font-size: 0.68rem;
861
+
margin-bottom: 0.15rem;
834
862
}
835
863
836
-
.flow-center {
837
-
padding: 0.5rem 0;
864
+
.flow-column {
865
+
gap: 0.35rem;
866
+
}
867
+
868
+
/* Drop last two examples per side — keeps the diagram short */
869
+
.flow-column-left .flow-node:nth-last-child(-n+2),
870
+
.flow-column-right .flow-node:nth-last-child(-n+2) {
871
+
display: none !important;
872
+
}
873
+
874
+
.flow-node {
875
+
padding: 0.42rem 0.65rem;
876
+
font-size: 0.72rem;
877
+
white-space: normal;
878
+
text-align: center;
879
+
max-width: 100%;
880
+
line-height: 1.25;
881
+
}
882
+
883
+
.flow-hub {
884
+
padding: 1rem 0.85rem;
885
+
gap: 0.35rem;
886
+
border-radius: 16px;
887
+
}
888
+
889
+
.flow-hub-logo {
890
+
width: 30px;
891
+
height: 30px;
892
+
}
893
+
894
+
.flow-hub-label {
895
+
font-size: 0.62rem;
896
+
max-width: 9rem;
838
897
}
839
898
840
899
.flow-lines {
+7
-8
routes/_app.tsx
+7
-8
routes/_app.tsx
···
31
31
32
32
var nav = document.getElementById('main-nav');
33
33
34
-
/* ---- Sky gradient: starts DAY, cycles day->sunset->night->sunrise->day ---- */
34
+
/* ---- Sky gradient: gentle day -> golden hour -> warm sunset -> back to day (never dark) ---- */
35
35
var K = [
36
36
{p:0, c:['#e8f0fe','#c9d8f5','#a8c4f0','#c0d4f5','#ebe4f5']},
37
-
{p:0.12, c:['#e0e8f8','#c8d0e8','#b0c0e0','#c8c0d8','#e0d4e0']},
38
-
{p:0.22, c:['#d08058','#d88868','#e87838','#f09848','#f0c870']},
39
-
{p:0.32, c:['#301040','#4a1848','#882858','#c04860','#d87050']},
40
-
{p:0.45, c:['#060510','#0a0f20','#0f1830','#152038','#0a0f1a']},
41
-
{p:0.60, c:['#060510','#0a0f20','#0f1830','#152038','#0a0f1a']},
42
-
{p:0.72, c:['#1a0a2e','#381540','#703050','#b86060','#e0a070']},
43
-
{p:0.84, c:['#c08070','#d8a888','#e0c8b0','#e8dcd0','#f0e8e0']},
37
+
{p:0.15, c:['#eae0d4','#ddd0c2','#ccc0b0','#d8ccc0','#e8ddd0']},
38
+
{p:0.28, c:['#eabc96','#e0b090','#d49870','#deb090','#ead0b0']},
39
+
{p:0.42, c:['#dca090','#d49488','#c88878','#d09488','#dcb8a8']},
40
+
{p:0.58, c:['#dca090','#d49488','#c88878','#d09488','#dcb8a8']},
41
+
{p:0.72, c:['#eabc96','#e0b090','#d49870','#deb090','#ead0b0']},
42
+
{p:0.85, c:['#eae0d4','#ddd0c2','#ccc0b0','#d8ccc0','#e8ddd0']},
44
43
{p:1, c:['#e8f0fe','#c9d8f5','#a8c4f0','#c0d4f5','#ebe4f5']}
45
44
];
46
45