ATlast — you'll never need to find your favorites on another platform again. Find your favs in the ATmosphere.
byarielm.fyi
atproto
1@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800&family=Rubik:wght@400;500;600;700&display=swap");
2@tailwind base;
3@tailwind components;
4@tailwind utilities;
5
6@layer base {
7 * {
8 font-family:
9 "Fira Sans",
10 system-ui,
11 -apple-system,
12 sans-serif;
13 }
14
15 h1,
16 h2,
17 h3,
18 .font-display {
19 font-family: "Rubik", "Fira Sans", sans-serif;
20 }
21
22 html,
23 body {
24 min-height: 100vh;
25 min-height: -webkit-fill-available;
26 }
27
28 body {
29 @apply bg-gradient-to-br
30 from-cyan-50 via-purple-50 to-pink-50
31 dark:from-indigo-950 dark:via-purple-900 dark:to-slate-900
32 text-slate-900 dark:text-slate-100
33 transition-colors duration-300;
34 padding: env(safe-area-inset-top) env(safe-area-inset-right)
35 env(safe-area-inset-bottom) env(safe-area-inset-left);
36 }
37
38 button {
39 cursor: pointer;
40 }
41}
42
43/* Hide scrollbar but allow scrolling */
44.scrollbar-hide {
45 -ms-overflow-style: none;
46 scrollbar-width: none;
47}
48
49.scrollbar-hide::-webkit-scrollbar {
50 display: none;
51}
52
53/* Firefly animation keyframes */
54@keyframes float {
55 0%,
56 100% {
57 transform: translate(0, 0) scale(1);
58 opacity: 0.3;
59 }
60 25% {
61 transform: translate(10px, -20px) scale(1.2);
62 opacity: 0.8;
63 }
64 50% {
65 transform: translate(-5px, -40px) scale(1);
66 opacity: 0.5;
67 }
68 75% {
69 transform: translate(15px, -25px) scale(1.1);
70 opacity: 0.9;
71 }
72}
73
74@keyframes glow-pulse {
75 0%,
76 100% {
77 box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
78 }
79 50% {
80 box-shadow:
81 0 0 40px rgba(251, 191, 36, 0.6),
82 0 0 60px rgba(251, 191, 36, 0.3);
83 }
84}
85
86@keyframes svg-glow-left {
87 0%,
88 100% {
89 opacity: 0.5;
90 filter: blur(10px);
91 transform: scale(1);
92 }
93 50% {
94 opacity: 1;
95 filter: blur(15px);
96 transform: scale(1.2);
97 }
98}
99
100@keyframes svg-glow-right {
101 0%,
102 100% {
103 opacity: 0.5;
104 filter: blur(10px);
105 transform: scale(1);
106 }
107 50% {
108 opacity: 1;
109 filter: blur(15px);
110 transform: scale(1.2);
111 }
112}
113
114.logo-glow-container {
115 position: relative;
116 display: inline-block;
117}
118
119.logo-glow-container::before,
120.logo-glow-container::after {
121 content: "";
122 position: absolute;
123 width: 30px;
124 height: 30px;
125 border-radius: 50%;
126 pointer-events: none;
127 z-index: -1; /* Places glow behind the SVG */
128}
129
130/* Left firefly glow - cyan tint */
131.logo-glow-container::before {
132 bottom: 0;
133 left: 6%;
134 background: radial-gradient(
135 circle,
136 rgba(253, 224, 71, 1) 0%,
137 rgba(245, 158, 11, 0.8) 30%,
138 transparent 80%
139 );
140 animation: svg-glow-left 3s ease-in-out infinite;
141}
142
143/* Right firefly glow - orange/amber tint */
144.logo-glow-container::after {
145 bottom: 0;
146 right: 4%;
147 background: radial-gradient(
148 circle,
149 rgba(253, 224, 71, 1) 0%,
150 rgba(245, 158, 11, 0.8) 30%,
151 transparent 80%
152 );
153 animation: svg-glow-right 3s ease-in-out infinite 0.5s; /* offset timing */
154}
155
156/* Actor typeahead */
157actor-typeahead {
158 --color-background: rgb(249 250 251 / 1);
159 --color-border: rgb(6 182 212 / 0.5);
160 --color-shadow: rgb(88 28 135);
161 --color-hover: rgb(6 182 212 / 0.1);
162 --color-avatar-fallback: rgb(6 182 212 / 0.2);
163 --radius: 0.75rem;
164 --padding-menu: 0.5rem;
165}
166
167.dark actor-typeahead {
168 --color-background: rgb(15 23 42 / 1);
169 --color-border: rgb(126 34 206 / 0.3);
170 --color-shadow: rgb(0 0 0);
171 --color-hover: rgb(126 34 206 / 0.2);
172 --color-avatar-fallback: rgb(126 34 206 / 0.2);
173}
174
175/* Notification animations */
176@keyframes slide-in {
177 from {
178 transform: translateX(100%);
179 opacity: 0;
180 }
181 to {
182 transform: translateX(0);
183 opacity: 1;
184 }
185}
186
187.animate-slide-in {
188 animation: slide-in 0.3s ease-out;
189}