rowanpaulflynn.dev
A personal media tracker built on the AT Protocol
opnshelf.xyz
1/* Plus Jakarta Sans - Material 3 Typography */
2@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
3
4@import 'tailwindcss';
5
6@import 'tw-animate-css';
7
8@custom-variant dark (&:is(.dark *));
9
10@theme {
11 --color-background: var(--md-sys-color-surface);
12 --color-foreground: var(--md-sys-color-on-surface);
13 --color-popover: var(--md-sys-color-surface-container);
14 --color-popover-foreground: var(--md-sys-color-on-surface);
15 --color-muted-foreground: var(--md-sys-color-on-surface-variant);
16 --color-accent: var(--md-sys-color-tertiary-container);
17 --color-accent-foreground: var(--md-sys-color-on-tertiary-container);
18 --color-destructive: var(--md-sys-color-error);
19 --color-border: var(--md-sys-color-outline-variant);
20 --color-input: var(--md-sys-color-surface-container-highest);
21 --color-ring: var(--md-sys-color-primary);
22
23 --radius-xs: var(--md-sys-shape-corner-extra-small);
24 --radius-sm: var(--md-sys-shape-corner-small);
25 --radius-md: var(--md-sys-shape-corner-medium);
26 --radius-lg: var(--md-sys-shape-corner-large);
27 --radius-xl: var(--md-sys-shape-corner-extra-large);
28 --radius-full: var(--md-sys-shape-corner-full);
29}
30
31/* ============================================
32 MATERIAL YOU DESIGN SYSTEM - CSS TOKENS
33 ============================================ */
34
35:root {
36 /* ============================================
37 SURFACE COLORS
38 ============================================ */
39 --md-sys-color-surface: #141218;
40 --md-sys-color-surface-variant: #49454f;
41 --md-sys-color-on-surface: #e6e0e9;
42 --md-sys-color-on-surface-variant: #cac4d0;
43 --md-sys-color-outline: #938f99;
44 --md-sys-color-outline-variant: #49454f;
45 --md-sys-color-surface-container: #211f26;
46 --md-sys-color-surface-container-low: #1c191c;
47 --md-sys-color-surface-container-high: #2b2930;
48 --md-sys-color-surface-container-highest: #36343b;
49
50 /* ============================================
51 PRIMARY COLORS (Amber/Cinematic Warmth)
52 ============================================ */
53 --md-sys-color-primary: #f3bc00;
54 --md-sys-color-on-primary: #3f2e00;
55 --md-sys-color-primary-container: #5c4500;
56 --md-sys-color-on-primary-container: #ffe08f;
57
58 /* ============================================
59 SECONDARY COLORS
60 ============================================ */
61 --md-sys-color-secondary: #d0c1a5;
62 --md-sys-color-on-secondary: #363016;
63 --md-sys-color-secondary-container: #4e462a;
64 --md-sys-color-on-secondary-container: #edddbf;
65
66 /* ============================================
67 TERTIARY COLORS
68 ============================================ */
69 --md-sys-color-tertiary: #b0cfba;
70 --md-sys-color-on-tertiary: #1c3526;
71 --md-sys-color-tertiary-container: #324b3b;
72 --md-sys-color-on-tertiary-container: #cbebd6;
73
74 /* ============================================
75 ERROR COLORS
76 ============================================ */
77 --md-sys-color-error: #ffb4ab;
78 --md-sys-color-on-error: #690005;
79 --md-sys-color-error-container: #93000a;
80 --md-sys-color-on-error-container: #ffdad6;
81
82 /* ============================================
83 INVERSE COLORS
84 ============================================ */
85 --md-sys-color-inverse-surface: #e6e0e9;
86 --md-sys-color-on-inverse-surface: #322f35;
87 --md-sys-color-inverse-primary: #7a5900;
88
89 /* ============================================
90 SCRIM & SHADOW
91 ============================================ */
92 --md-sys-color-scrim: #000000;
93 --md-sys-color-shadow: #000000;
94 --md-sys-color-surface-tint: #f3bc00;
95
96 /* ============================================
97 SURFACE TINT OVERLAYS (Material 3 Elevation)
98 ============================================ */
99 --md-sys-elevation-level1: rgba(243, 188, 0, 0.05);
100 --md-sys-elevation-level2: rgba(243, 188, 0, 0.08);
101 --md-sys-elevation-level3: rgba(243, 188, 0, 0.11);
102 --md-sys-elevation-level4: rgba(243, 188, 0, 0.12);
103 --md-sys-elevation-level5: rgba(243, 188, 0, 0.14);
104
105 /* ============================================
106 SHAPE (Corner Radius Tokens)
107 ============================================ */
108 --md-sys-shape-corner-none: 0px;
109 --md-sys-shape-corner-extra-small: 4px;
110 --md-sys-shape-corner-small: 8px;
111 --md-sys-shape-corner-medium: 12px;
112 --md-sys-shape-corner-large: 16px;
113 --md-sys-shape-corner-extra-large: 28px;
114 --md-sys-shape-corner-full: 9999px;
115
116 /* ============================================
117 TYPOGRAPHY (Plus Jakarta Sans Scale)
118 ============================================ */
119 --md-sys-font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
120
121 /* Display */
122 --md-sys-typescale-display-large-size: 57px;
123 --md-sys-typescale-display-large-line-height: 64px;
124 --md-sys-typescale-display-large-weight: 600;
125 --md-sys-typescale-display-large-letter-spacing: -0.25px;
126
127 --md-sys-typescale-display-medium-size: 45px;
128 --md-sys-typescale-display-medium-line-height: 52px;
129 --md-sys-typescale-display-medium-weight: 600;
130 --md-sys-typescale-display-medium-letter-spacing: 0px;
131
132 --md-sys-typescale-display-small-size: 36px;
133 --md-sys-typescale-display-small-line-height: 44px;
134 --md-sys-typescale-display-small-weight: 600;
135 --md-sys-typescale-display-small-letter-spacing: 0px;
136
137 /* Headline */
138 --md-sys-typescale-headline-large-size: 32px;
139 --md-sys-typescale-headline-large-line-height: 40px;
140 --md-sys-typescale-headline-large-weight: 600;
141 --md-sys-typescale-headline-large-letter-spacing: 0px;
142
143 --md-sys-typescale-headline-medium-size: 28px;
144 --md-sys-typescale-headline-medium-line-height: 36px;
145 --md-sys-typescale-headline-medium-weight: 600;
146 --md-sys-typescale-headline-medium-letter-spacing: 0px;
147
148 --md-sys-typescale-headline-small-size: 24px;
149 --md-sys-typescale-headline-small-line-height: 32px;
150 --md-sys-typescale-headline-small-weight: 600;
151 --md-sys-typescale-headline-small-letter-spacing: 0px;
152
153 /* Title */
154 --md-sys-typescale-title-large-size: 22px;
155 --md-sys-typescale-title-large-line-height: 28px;
156 --md-sys-typescale-title-large-weight: 600;
157 --md-sys-typescale-title-large-letter-spacing: 0px;
158
159 --md-sys-typescale-title-medium-size: 16px;
160 --md-sys-typescale-title-medium-line-height: 24px;
161 --md-sys-typescale-title-medium-weight: 600;
162 --md-sys-typescale-title-medium-letter-spacing: 0.15px;
163
164 --md-sys-typescale-title-small-size: 14px;
165 --md-sys-typescale-title-small-line-height: 20px;
166 --md-sys-typescale-title-small-weight: 600;
167 --md-sys-typescale-title-small-letter-spacing: 0.1px;
168
169 /* Body */
170 --md-sys-typescale-body-large-size: 16px;
171 --md-sys-typescale-body-large-line-height: 24px;
172 --md-sys-typescale-body-large-weight: 400;
173 --md-sys-typescale-body-large-letter-spacing: 0.5px;
174
175 --md-sys-typescale-body-medium-size: 14px;
176 --md-sys-typescale-body-medium-line-height: 20px;
177 --md-sys-typescale-body-medium-weight: 400;
178 --md-sys-typescale-body-medium-letter-spacing: 0.25px;
179
180 --md-sys-typescale-body-small-size: 12px;
181 --md-sys-typescale-body-small-line-height: 16px;
182 --md-sys-typescale-body-small-weight: 400;
183 --md-sys-typescale-body-small-letter-spacing: 0.4px;
184
185 /* Label */
186 --md-sys-typescale-label-large-size: 14px;
187 --md-sys-typescale-label-large-line-height: 20px;
188 --md-sys-typescale-label-large-weight: 600;
189 --md-sys-typescale-label-large-letter-spacing: 0.1px;
190
191 --md-sys-typescale-label-medium-size: 12px;
192 --md-sys-typescale-label-medium-line-height: 16px;
193 --md-sys-typescale-label-medium-weight: 600;
194 --md-sys-typescale-label-medium-letter-spacing: 0.5px;
195
196 --md-sys-typescale-label-small-size: 11px;
197 --md-sys-typescale-label-small-line-height: 16px;
198 --md-sys-typescale-label-small-weight: 600;
199 --md-sys-typescale-label-small-letter-spacing: 0.5px;
200
201 /* ============================================
202 MOTION (Easing & Duration)
203 ============================================ */
204 --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
205 --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
206 --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0, 0, 0.2, 1);
207 --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 1, 1);
208 --md-sys-motion-duration-short1: 50ms;
209 --md-sys-motion-duration-short2: 100ms;
210 --md-sys-motion-duration-short3: 150ms;
211 --md-sys-motion-duration-short4: 200ms;
212 --md-sys-motion-duration-medium1: 250ms;
213 --md-sys-motion-duration-medium2: 300ms;
214 --md-sys-motion-duration-medium3: 350ms;
215 --md-sys-motion-duration-medium4: 400ms;
216 --md-sys-motion-duration-long1: 450ms;
217 --md-sys-motion-duration-long2: 500ms;
218 --md-sys-motion-duration-long3: 550ms;
219 --md-sys-motion-duration-long4: 600ms;
220
221}
222
223/* ============================================
224 BASE STYLES
225 ============================================ */
226
227body {
228 font-family: var(--md-sys-font-family);
229 background-color: var(--md-sys-color-surface);
230 color: var(--md-sys-color-on-surface);
231 -webkit-font-smoothing: antialiased;
232 -moz-osx-font-smoothing: grayscale;
233 margin: 0;
234}
235
236/* ============================================
237 TYPOGRAPHY UTILITY CLASSES
238 ============================================ */
239
240.md-display-large {
241 font-family: var(--md-sys-font-family);
242 font-size: var(--md-sys-typescale-display-large-size);
243 line-height: var(--md-sys-typescale-display-large-line-height);
244 font-weight: var(--md-sys-typescale-display-large-weight);
245 letter-spacing: var(--md-sys-typescale-display-large-letter-spacing);
246}
247
248.md-display-medium {
249 font-family: var(--md-sys-font-family);
250 font-size: var(--md-sys-typescale-display-medium-size);
251 line-height: var(--md-sys-typescale-display-medium-line-height);
252 font-weight: var(--md-sys-typescale-display-medium-weight);
253 letter-spacing: var(--md-sys-typescale-display-medium-letter-spacing);
254}
255
256.md-display-small {
257 font-family: var(--md-sys-font-family);
258 font-size: var(--md-sys-typescale-display-small-size);
259 line-height: var(--md-sys-typescale-display-small-line-height);
260 font-weight: var(--md-sys-typescale-display-small-weight);
261 letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
262}
263
264.md-headline-large {
265 font-family: var(--md-sys-font-family);
266 font-size: var(--md-sys-typescale-headline-large-size);
267 line-height: var(--md-sys-typescale-headline-large-line-height);
268 font-weight: var(--md-sys-typescale-headline-large-weight);
269 letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
270}
271
272.md-headline-medium {
273 font-family: var(--md-sys-font-family);
274 font-size: var(--md-sys-typescale-headline-medium-size);
275 line-height: var(--md-sys-typescale-headline-medium-line-height);
276 font-weight: var(--md-sys-typescale-headline-medium-weight);
277 letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
278}
279
280.md-headline-small {
281 font-family: var(--md-sys-font-family);
282 font-size: var(--md-sys-typescale-headline-small-size);
283 line-height: var(--md-sys-typescale-headline-small-line-height);
284 font-weight: var(--md-sys-typescale-headline-small-weight);
285 letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
286}
287
288.md-title-large {
289 font-family: var(--md-sys-font-family);
290 font-size: var(--md-sys-typescale-title-large-size);
291 line-height: var(--md-sys-typescale-title-large-line-height);
292 font-weight: var(--md-sys-typescale-title-large-weight);
293 letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
294}
295
296.md-title-medium {
297 font-family: var(--md-sys-font-family);
298 font-size: var(--md-sys-typescale-title-medium-size);
299 line-height: var(--md-sys-typescale-title-medium-line-height);
300 font-weight: var(--md-sys-typescale-title-medium-weight);
301 letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
302}
303
304.md-title-small {
305 font-family: var(--md-sys-font-family);
306 font-size: var(--md-sys-typescale-title-small-size);
307 line-height: var(--md-sys-typescale-title-small-line-height);
308 font-weight: var(--md-sys-typescale-title-small-weight);
309 letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
310}
311
312.md-body-large {
313 font-family: var(--md-sys-font-family);
314 font-size: var(--md-sys-typescale-body-large-size);
315 line-height: var(--md-sys-typescale-body-large-line-height);
316 font-weight: var(--md-sys-typescale-body-large-weight);
317 letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
318}
319
320.md-body-medium {
321 font-family: var(--md-sys-font-family);
322 font-size: var(--md-sys-typescale-body-medium-size);
323 line-height: var(--md-sys-typescale-body-medium-line-height);
324 font-weight: var(--md-sys-typescale-body-medium-weight);
325 letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
326}
327
328.md-body-small {
329 font-family: var(--md-sys-font-family);
330 font-size: var(--md-sys-typescale-body-small-size);
331 line-height: var(--md-sys-typescale-body-small-line-height);
332 font-weight: var(--md-sys-typescale-body-small-weight);
333 letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
334}
335
336.md-label-large {
337 font-family: var(--md-sys-font-family);
338 font-size: var(--md-sys-typescale-label-large-size);
339 line-height: var(--md-sys-typescale-label-large-line-height);
340 font-weight: var(--md-sys-typescale-label-large-weight);
341 letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
342}
343
344.md-label-medium {
345 font-family: var(--md-sys-font-family);
346 font-size: var(--md-sys-typescale-label-medium-size);
347 line-height: var(--md-sys-typescale-label-medium-line-height);
348 font-weight: var(--md-sys-typescale-label-medium-weight);
349 letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
350}
351
352.md-label-small {
353 font-family: var(--md-sys-font-family);
354 font-size: var(--md-sys-typescale-label-small-size);
355 line-height: var(--md-sys-typescale-label-small-line-height);
356 font-weight: var(--md-sys-typescale-label-small-weight);
357 letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
358}
359
360/* ============================================
361 RIPPLE EFFECT UTILITY
362 ============================================ */
363
364.md-ripple {
365 position: relative;
366 overflow: hidden;
367}
368
369.md-ripple::after {
370 content: '';
371 position: absolute;
372 top: 50%;
373 left: 50%;
374 width: 0;
375 height: 0;
376 background: radial-gradient(
377 circle,
378 var(--md-sys-color-on-surface) 0%,
379 transparent 70%
380 );
381 opacity: 0;
382 transform: translate(-50%, -50%);
383 transition:
384 width 0.4s var(--md-sys-motion-easing-standard),
385 height 0.4s var(--md-sys-motion-easing-standard),
386 opacity 0.4s var(--md-sys-motion-easing-standard);
387 pointer-events: none;
388}
389
390.md-ripple:active::after {
391 width: 200%;
392 height: 200%;
393 opacity: 0.12;
394}
395
396/* ============================================
397 ELEVATION SURFACE TINTS
398 ============================================ */
399
400.md-elevation-0 {
401 background-color: var(--md-sys-color-surface);
402}
403
404.md-elevation-1 {
405 background-color: var(--md-sys-elevation-level1);
406 box-shadow:
407 0 1px 3px 1px rgba(0, 0, 0, 0.15),
408 0 1px 2px 0 rgba(0, 0, 0, 0.3);
409}
410
411.md-elevation-2 {
412 background-color: var(--md-sys-elevation-level2);
413 box-shadow:
414 0 2px 6px 2px rgba(0, 0, 0, 0.15),
415 0 1px 2px 0 rgba(0, 0, 0, 0.3);
416}
417
418.md-elevation-3 {
419 background-color: var(--md-sys-elevation-level3);
420 box-shadow:
421 0 4px 8px 3px rgba(0, 0, 0, 0.15),
422 0 1px 3px 0 rgba(0, 0, 0, 0.3);
423}
424
425.md-elevation-4 {
426 background-color: var(--md-sys-elevation-level4);
427 box-shadow:
428 0 6px 10px 4px rgba(0, 0, 0, 0.15),
429 0 2px 3px 0 rgba(0, 0, 0, 0.3);
430}
431
432.md-elevation-5 {
433 background-color: var(--md-sys-elevation-level5);
434 box-shadow:
435 0 8px 12px 6px rgba(0, 0, 0, 0.15),
436 0 4px 4px 0 rgba(0, 0, 0, 0.3);
437}
438
439/* ============================================
440 STATE LAYERS
441 ============================================ */
442
443.md-state-hover {
444 background-color: color-mix(
445 in srgb,
446 var(--md-sys-color-on-surface) 8%,
447 transparent
448 );
449}
450
451.md-state-focus {
452 background-color: color-mix(
453 in srgb,
454 var(--md-sys-color-on-surface) 12%,
455 transparent
456 );
457}
458
459.md-state-pressed {
460 background-color: color-mix(
461 in srgb,
462 var(--md-sys-color-on-surface) 12%,
463 transparent
464 );
465}
466
467.md-state-drag {
468 background-color: color-mix(
469 in srgb,
470 var(--md-sys-color-on-surface) 16%,
471 transparent
472 );
473}
474
475/* ============================================
476 TAILWIND THEME CONFIGURATION
477 ============================================ */
478
479@layer base {
480 * {
481 border-color: var(--md-sys-color-outline-variant);
482 }
483}