Monorepo for Aesthetic.Computer
aesthetic.computer
buy: cosmetic refresh and responsive typography scaling
+74
-13
+74
-13
system/public/kidlisp.com/buy.html
+74
-13
system/public/kidlisp.com/buy.html
···
30
30
--bg: #12101a;
31
31
--bg2: #1a1726;
32
32
--bg3: #221e30;
33
+
--bg-grad-1: rgba(205, 92, 155, 0.16);
34
+
--bg-grad-2: rgba(112, 214, 255, 0.12);
33
35
--text: #e8e0f0;
34
36
--text2: #9088a0;
35
37
--border: #2e2840;
···
55
57
--bg: #faf8ff;
56
58
--bg2: #f0ecf8;
57
59
--bg3: white;
60
+
--bg-grad-1: rgba(205, 92, 155, 0.12);
61
+
--bg-grad-2: rgba(112, 214, 255, 0.1);
58
62
--text: #1a1528;
59
63
--text2: #6a5f80;
60
64
--border: #ddd4ee;
···
67
71
68
72
body {
69
73
font-family: var(--font-fun);
70
-
background: var(--bg);
74
+
background:
75
+
radial-gradient(1100px 620px at 8% -12%, var(--bg-grad-1), transparent 70%),
76
+
radial-gradient(900px 560px at 92% -18%, var(--bg-grad-2), transparent 72%),
77
+
var(--bg);
71
78
color: var(--text);
72
79
min-height: 100vh;
73
80
-webkit-font-smoothing: antialiased;
81
+
background-attachment: fixed;
74
82
}
75
83
76
84
/* ── Header ── */
···
85
93
top: 0;
86
94
z-index: 100;
87
95
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
96
+
backdrop-filter: blur(8px);
88
97
}
89
98
90
99
.logo {
···
122
131
background: linear-gradient(135deg, rgba(78, 205, 196, 0.15), rgba(205, 92, 155, 0.15));
123
132
border: 1px solid var(--neon-cyan);
124
133
color: var(--neon-cyan);
125
-
padding: 6px 14px;
134
+
padding: 8px 14px;
126
135
border-radius: var(--radius);
127
136
font-family: var(--font-fun);
128
137
font-size: 12px;
···
137
146
.grid {
138
147
display: flex;
139
148
flex-direction: column;
140
-
gap: 10px;
141
-
padding: 16px;
142
-
max-width: 640px;
149
+
gap: 12px;
150
+
padding: 18px 16px 14px;
151
+
max-width: 760px;
143
152
margin: 0 auto;
144
153
}
145
154
.grid.sold-grid {
···
154
163
.card {
155
164
position: relative;
156
165
border: 1px solid var(--border);
157
-
border-radius: var(--radius);
166
+
border-radius: 14px;
158
167
overflow: hidden;
159
168
cursor: pointer;
160
169
transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
···
162
171
display: flex;
163
172
flex-direction: row;
164
173
align-items: center;
165
-
min-height: 100px;
174
+
min-height: 112px;
166
175
background-size: cover;
167
176
background-position: center;
168
177
background-color: var(--bg3);
···
189
198
.card-body {
190
199
position: relative;
191
200
z-index: 2;
192
-
padding: 14px 18px;
201
+
padding: 15px 18px;
193
202
display: flex;
194
203
flex-direction: column;
195
204
justify-content: center;
···
199
208
}
200
209
201
210
.card-code {
202
-
font-size: 18px;
211
+
font-size: 20px;
203
212
font-weight: 700;
204
-
font-family: var(--font-mono);
213
+
font-family: var(--font-display);
214
+
letter-spacing: 0.02em;
205
215
color: #fff;
206
216
text-shadow: 0 1px 4px rgba(0,0,0,0.6);
207
217
}
208
218
209
219
.card-price {
210
-
font-size: 16px;
220
+
font-size: 17px;
211
221
font-weight: 700;
212
222
color: var(--gold);
213
223
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
···
427
437
.tab {
428
438
width: 100%;
429
439
min-width: 0;
430
-
padding: 18px 12px;
440
+
padding: 16px 12px;
431
441
font-family: var(--font-fun);
432
442
font-size: 20px;
433
443
font-weight: 700;
···
460
470
border-bottom-color: var(--gold);
461
471
box-shadow: inset 0 -1px 0 rgba(255, 230, 109, 0.5);
462
472
}
473
+
474
+
.shop-intro {
475
+
max-width: 760px;
476
+
margin: 12px auto 0;
477
+
padding: 10px 16px;
478
+
font-family: var(--font-mono);
479
+
font-size: 11px;
480
+
letter-spacing: 0.03em;
481
+
text-transform: uppercase;
482
+
color: var(--text2);
483
+
border-left: 2px solid var(--accent);
484
+
background: rgba(255, 255, 255, 0.03);
485
+
}
486
+
@media (prefers-color-scheme: light) {
487
+
.shop-intro {
488
+
background: rgba(255, 255, 255, 0.6);
489
+
}
490
+
}
463
491
/* ── Albums ── */
464
492
.albums-grid {
465
493
display: flex;
···
565
593
.card-buy-btn {
566
594
position: relative;
567
595
z-index: 2;
568
-
background: var(--gold);
596
+
background: linear-gradient(180deg, #fff3ac 0%, var(--gold) 100%);
569
597
color: #1a1528;
570
598
border: none;
571
599
padding: 12px 20px;
···
580
608
white-space: nowrap;
581
609
align-self: center;
582
610
flex-shrink: 0;
611
+
box-shadow: 0 2px 8px rgba(255, 230, 109, 0.38);
583
612
}
584
613
.card-buy-btn:hover { opacity: 0.85; transform: scale(1.03); }
585
614
.card-buy-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
586
615
616
+
/* ── Larger screens: scale typography up ── */
617
+
@media (min-width: 900px) {
618
+
.logo { font-size: 24px; }
619
+
.tab { font-size: 24px; padding: 20px 14px; }
620
+
.shop-intro { font-size: 12px; padding: 12px 18px; }
621
+
.grid { max-width: 820px; }
622
+
.card { min-height: 124px; }
623
+
.card-body { padding: 18px 22px; }
624
+
.card-code { font-size: 24px; }
625
+
.card-price { font-size: 19px; }
626
+
.card-seller { font-size: 11px; }
627
+
.card-buy-btn { font-size: 15px; padding: 14px 24px; }
628
+
.loading { font-size: 16px; }
629
+
.modal-title { font-size: 18px; }
630
+
.modal-price { font-size: 21px; }
631
+
.buy-btn { font-size: 18px; padding: 15px 34px; }
632
+
}
633
+
634
+
@media (min-width: 1300px) {
635
+
.logo { font-size: 27px; }
636
+
.tab { font-size: 27px; padding: 22px 16px; }
637
+
.shop-intro { font-size: 13px; }
638
+
.grid { max-width: 940px; padding-top: 22px; }
639
+
.card { min-height: 136px; }
640
+
.card-code { font-size: 28px; }
641
+
.card-price { font-size: 21px; }
642
+
.card-seller { font-size: 12px; }
643
+
.card-buy-btn { font-size: 16px; padding: 16px 26px; }
644
+
}
645
+
587
646
/* ── Footer ── */
588
647
footer {
589
648
text-align: center;
···
646
705
<button class="tab active" data-tab="fresh">Shop</button>
647
706
<button class="tab" data-tab="albums">Buyers</button>
648
707
</div>
708
+
709
+
<div class="shop-intro">Fresh keeps are listed below. Buyers shows who is currently collecting.</div>
649
710
650
711
<div class="grid" id="grid">
651
712
<div class="loading">Loading listings…</div>