goose.art
extremely claude-assisted go game based on atproto! working on cleaning up and giving a more unique design, still has a bit of a slop vibe to it.
1@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');
2
3* {
4 box-sizing: border-box;
5 margin: 0;
6 padding: 0;
7}
8
9:root {
10 /* Sunset Sky Palette - extracted from aerial cloudscape */
11 --sky-apricot: #F2C5A0;
12 --sky-apricot-light: #F8DCC5;
13 --sky-apricot-dark: #E5A878;
14 --sky-rose: #D4A8B5;
15 --sky-rose-light: #E5C5CE;
16 --sky-rose-dark: #8B5A6B;
17 --sky-mauve: #C5A0B0;
18 --sky-blue-light: #B8D4E3;
19 --sky-blue-pale: #D4E5EF;
20 --sky-slate: #5A7A90;
21 --sky-slate-light: #7A98AD;
22 --sky-slate-dark: #455D6E;
23 --sky-gray: #94A8B8;
24 --sky-gray-light: #B5C5D0;
25 --sky-cloud: #E8EFF4;
26 --sky-white: #F5F8FA;
27
28 /* Semantic aliases */
29 --color-bg: var(--sky-cloud);
30 --color-bg-card: var(--sky-white);
31 --color-text: var(--sky-slate-dark);
32 --color-text-muted: var(--sky-gray);
33 --color-text-light: var(--sky-gray-light);
34 --color-primary: var(--sky-apricot-dark);
35 --color-primary-hover: var(--sky-apricot);
36 --color-primary-light: var(--sky-apricot-light);
37 --color-secondary: var(--sky-rose);
38 --color-secondary-hover: var(--sky-rose-light);
39 --color-accent: var(--sky-slate);
40 --color-accent-hover: var(--sky-slate-light);
41 --color-border: var(--sky-blue-pale);
42 --color-link: var(--sky-slate);
43 --color-link-hover: var(--sky-apricot-dark);
44
45 /* Typography */
46 --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
47 --font-heading: 'Nunito', 'Varela Round', 'Quicksand', sans-serif;
48
49 font-family: var(--font-body);
50 line-height: 1.6;
51 color: var(--color-text);
52}
53
54body {
55 background: linear-gradient(180deg, var(--sky-blue-pale) 0%, var(--sky-cloud) 30%, var(--sky-white) 100%);
56 min-height: 100vh;
57 overflow-x: hidden;
58}
59
60/* Animated clouds background */
61.clouds-container {
62 position: fixed;
63 top: 0;
64 left: 0;
65 width: 100%;
66 height: 100%;
67 pointer-events: none;
68 z-index: 0;
69 overflow: hidden;
70}
71
72.cloud {
73 position: absolute;
74 background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(232, 239, 244, 0.7) 100%);
75 border-radius: 50%;
76 filter: blur(1px);
77 opacity: 0.6;
78}
79
80.cloud::before,
81.cloud::after {
82 content: '';
83 position: absolute;
84 background: inherit;
85 border-radius: 50%;
86}
87
88/* Cloud shapes - varied sizes from small to large */
89.cloud-1 {
90 width: 120px;
91 height: 35px;
92 top: 8%;
93 animation: drift-1 60s linear infinite;
94 opacity: 0.5;
95}
96.cloud-1::before {
97 width: 55px;
98 height: 45px;
99 top: -25px;
100 left: 15px;
101}
102.cloud-1::after {
103 width: 65px;
104 height: 40px;
105 top: -20px;
106 right: 10px;
107}
108
109.cloud-2 {
110 width: 320px;
111 height: 90px;
112 top: 20%;
113 animation: drift-2 130s linear infinite;
114 animation-delay: -20s;
115 opacity: 0.55;
116}
117.cloud-2::before {
118 width: 160px;
119 height: 120px;
120 top: -70px;
121 left: 40px;
122}
123.cloud-2::after {
124 width: 140px;
125 height: 85px;
126 top: -40px;
127 right: 40px;
128}
129
130.cloud-3 {
131 width: 90px;
132 height: 28px;
133 top: 38%;
134 animation: drift-3 50s linear infinite;
135 animation-delay: -15s;
136 opacity: 0.4;
137}
138.cloud-3::before {
139 width: 45px;
140 height: 38px;
141 top: -22px;
142 left: 12px;
143}
144.cloud-3::after {
145 width: 50px;
146 height: 32px;
147 top: -16px;
148 right: 8px;
149}
150
151.cloud-4 {
152 width: 400px;
153 height: 110px;
154 top: 55%;
155 animation: drift-1 150s linear infinite;
156 animation-delay: -70s;
157 opacity: 0.4;
158}
159.cloud-4::before {
160 width: 200px;
161 height: 140px;
162 top: -80px;
163 left: 60px;
164}
165.cloud-4::after {
166 width: 170px;
167 height: 100px;
168 top: -50px;
169 right: 50px;
170}
171
172.cloud-5 {
173 width: 180px;
174 height: 50px;
175 top: 75%;
176 animation: drift-2 85s linear infinite;
177 animation-delay: -40s;
178 opacity: 0.35;
179}
180.cloud-5::before {
181 width: 85px;
182 height: 65px;
183 top: -38px;
184 left: 25px;
185}
186.cloud-5::after {
187 width: 95px;
188 height: 55px;
189 top: -28px;
190 right: 15px;
191}
192
193/* Drift animations - clouds move at different speeds and paths */
194@keyframes drift-1 {
195 0% {
196 left: -300px;
197 }
198 100% {
199 left: 100vw;
200 }
201}
202
203@keyframes drift-2 {
204 0% {
205 left: 100vw;
206 }
207 100% {
208 left: -350px;
209 }
210}
211
212@keyframes drift-3 {
213 0% {
214 left: -250px;
215 }
216 100% {
217 left: 100vw;
218 }
219}
220
221/* Ensure main content is above clouds */
222.page-content {
223 position: relative;
224 z-index: 1;
225}
226
227/* Cloud-like card styling */
228.cloud-card {
229 background: linear-gradient(
230 135deg,
231 rgba(255, 255, 255, 0.95) 0%,
232 rgba(245, 248, 250, 0.9) 50%,
233 rgba(232, 239, 244, 0.85) 100%
234 );
235 border: none;
236 border-radius: 2rem 2.5rem 2rem 2.2rem;
237 box-shadow:
238 0 0 20px rgba(255, 255, 255, 0.8),
239 0 0 40px rgba(255, 255, 255, 0.4),
240 0 8px 32px rgba(90, 122, 144, 0.12),
241 inset 0 1px 1px rgba(255, 255, 255, 0.9);
242 backdrop-filter: blur(8px);
243 position: relative;
244}
245
246.cloud-card::before {
247 content: '';
248 position: absolute;
249 inset: -2px;
250 border-radius: inherit;
251 background: linear-gradient(
252 135deg,
253 rgba(255, 255, 255, 0.6) 0%,
254 rgba(212, 229, 239, 0.3) 50%,
255 rgba(255, 255, 255, 0.4) 100%
256 );
257 filter: blur(4px);
258 z-index: -1;
259}
260
261a {
262 color: inherit;
263 text-decoration: none;
264}
265
266h1, h2, h3, h4, h5, h6 {
267 font-family: var(--font-heading);
268 font-weight: 700;
269 letter-spacing: -0.01em;
270}
271
272button {
273 font-family: var(--font-heading);
274 font-weight: 600;
275}
276
277/* Floating cloud effect - subtle rotation for natural off-kilter look */
278.games-list .game-item:nth-child(odd),
279.archive-grid .archive-card:nth-child(odd),
280.waiting-games-grid .game-item-compact:nth-child(odd) {
281 transform: rotate(0.5deg);
282}
283
284.games-list .game-item:nth-child(even),
285.archive-grid .archive-card:nth-child(even),
286.waiting-games-grid .game-item-compact:nth-child(even) {
287 transform: rotate(-0.5deg);
288}
289
290.games-list .game-item:nth-child(3n),
291.archive-grid .archive-card:nth-child(3n),
292.waiting-games-grid .game-item-compact:nth-child(3n) {
293 transform: rotate(1deg);
294}
295
296.games-list .game-item:nth-child(4n),
297.archive-grid .archive-card:nth-child(4n),
298.waiting-games-grid .game-item-compact:nth-child(4n) {
299 transform: rotate(-1deg);
300}
301
302.games-list .game-item:nth-child(5n),
303.archive-grid .archive-card:nth-child(5n),
304.waiting-games-grid .game-item-compact:nth-child(5n) {
305 transform: rotate(0.25deg);
306}
307
308/* Modal styles */
309.modal-overlay {
310 position: fixed;
311 top: 0;
312 left: 0;
313 width: 100%;
314 height: 100%;
315 background: rgba(90, 122, 144, 0.3);
316 backdrop-filter: blur(4px);
317 z-index: 1000;
318 display: flex;
319 align-items: center;
320 justify-content: center;
321 padding: 1rem;
322 animation: fadeIn 0.2s ease-out;
323}
324
325.modal-content {
326 max-width: 650px;
327 width: 100%;
328 max-height: 90vh;
329 overflow: visible;
330 animation: slideIn 0.3s ease-out;
331 display: flex;
332 flex-direction: column;
333}
334
335.modal-header {
336 display: flex;
337 justify-content: space-between;
338 align-items: center;
339 margin-bottom: 1.5rem;
340 padding-bottom: 1rem;
341 border-bottom: 1px solid var(--color-border);
342}
343
344.modal-header h2 {
345 margin: 0;
346 color: var(--color-text);
347 font-size: 1.5rem;
348}
349
350.modal-close {
351 background: none;
352 border: none;
353 font-size: 1.5rem;
354 color: var(--color-text-muted);
355 cursor: pointer;
356 padding: 0.25rem 0.5rem;
357 transition: color 0.2s;
358}
359
360.modal-close:hover {
361 color: var(--color-text);
362}
363
364.modal-body {
365 margin-bottom: 1.5rem;
366 color: var(--color-text);
367 line-height: 1.8;
368}
369
370.modal-footer {
371 display: flex;
372 justify-content: space-between;
373 align-items: center;
374 gap: 1rem;
375 padding-top: 1.5rem;
376 margin-top: 1.5rem;
377 border-top: 1px solid var(--color-border);
378}
379
380.modal-footer button {
381 padding: 0.75rem 1.5rem;
382 border: none;
383 border-radius: 0.5rem;
384 cursor: pointer;
385 font-size: 1rem;
386 transition: all 0.2s;
387 font-weight: 500;
388}
389
390.modal-footer .btn-primary {
391 background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
392 color: white;
393 box-shadow: 0 2px 8px rgba(242, 197, 160, 0.3);
394}
395
396.modal-footer .btn-primary:hover {
397 transform: translateY(-1px);
398 box-shadow: 0 4px 12px rgba(242, 197, 160, 0.4);
399}
400
401.modal-footer .btn-secondary {
402 background: var(--color-bg-card);
403 color: var(--color-text);
404 border: 1px solid var(--color-border);
405}
406
407.modal-footer .btn-secondary:hover {
408 background: var(--color-border);
409}
410
411.modal-progress {
412 text-align: center;
413 margin-bottom: 1rem;
414 color: var(--color-text-muted);
415 font-size: 0.875rem;
416}
417
418/* Footer styles */
419.site-footer {
420 position: relative;
421 margin-top: 4rem;
422 padding: 2rem 1rem;
423 text-align: center;
424 color: var(--color-text-muted);
425 font-size: 0.9rem;
426 z-index: 1;
427}
428
429.site-footer a {
430 color: var(--color-link);
431 text-decoration: none;
432 transition: color 0.2s;
433}
434
435.site-footer a:hover {
436 color: var(--color-link-hover);
437 text-decoration: underline;
438}
439
440.footer-links {
441 display: flex;
442 justify-content: center;
443 gap: 2rem;
444 margin-bottom: 1rem;
445 flex-wrap: wrap;
446}
447
448.footer-links button,
449.footer-links a {
450 background: none;
451 border: none;
452 cursor: pointer;
453 color: var(--color-link);
454 font-size: 0.9rem;
455 padding: 0.5rem 1rem;
456 transition: all 0.2s;
457}
458
459.footer-links button:hover,
460.footer-links a:hover {
461 color: var(--color-link-hover);
462}
463
464.footer-credit {
465 margin-top: 0.5rem;
466}
467
468/* Tenuki board container */
469.tenuki-board {
470 margin: 1.5rem auto;
471 display: flex;
472 justify-content: center;
473}
474
475.tenuki-board canvas {
476 border-radius: 0.5rem;
477 box-shadow: 0 2px 8px rgba(90, 122, 144, 0.15);
478}
479
480/* Animations */
481@keyframes fadeIn {
482 from {
483 opacity: 0;
484 }
485 to {
486 opacity: 1;
487 }
488}
489
490@keyframes slideIn {
491 from {
492 opacity: 0;
493 transform: translateY(-20px);
494 }
495 to {
496 opacity: 1;
497 transform: translateY(0);
498 }
499}
500
501/* Actor typeahead dropdown z-index */
502actor-typeahead {
503 position: relative;
504 z-index: 1000;
505}