public uptime monitoring + (soon) observability with events saved to PDS
nekomimi.pet
1@import "tailwindcss";
2
3:root {
4 color-scheme: light;
5 /* Warm beige background inspired by Sunset design #E9DDD8 */
6 --background: oklch(0.90 0.012 35);
7 /* Very dark brown text for strong contrast #2A2420 */
8 --foreground: oklch(0.18 0.01 30);
9 /* Slightly lighter card background */
10 --card: oklch(0.93 0.01 35);
11 --card-foreground: oklch(0.18 0.01 30);
12 --popover: oklch(0.93 0.01 35);
13 --popover-foreground: oklch(0.18 0.01 30);
14 /* Dark brown primary inspired by #645343 */
15 --primary: oklch(0.35 0.02 35);
16 --primary-foreground: oklch(0.95 0.01 35);
17 /* Bright pink accent for links #FFAAD2 */
18 --accent: oklch(0.78 0.15 345);
19 --accent-foreground: oklch(0.18 0.01 30);
20 /* Medium taupe secondary inspired by #867D76 */
21 --secondary: oklch(0.52 0.015 30);
22 --secondary-foreground: oklch(0.95 0.01 35);
23 /* Light warm muted background */
24 --muted: oklch(0.88 0.01 35);
25 --muted-foreground: oklch(0.42 0.015 30);
26 --border: oklch(0.75 0.015 30);
27 --input: oklch(0.92 0.01 35);
28 --ring: oklch(0.72 0.08 15);
29 --destructive: oklch(0.577 0.245 27.325);
30 --destructive-foreground: oklch(0.985 0 0);
31 --chart-1: oklch(0.78 0.15 345);
32 --chart-2: oklch(0.32 0.04 285);
33 --chart-3: oklch(0.56 0.08 220);
34 --chart-4: oklch(0.50 0.10 145);
35 --chart-5: oklch(0.93 0.03 85);
36 --radius: 0.75rem;
37}
38
39@media (prefers-color-scheme: dark) {
40 :root {
41 color-scheme: dark;
42 /* Slate violet background - #2C2C2C with violet tint */
43 --background: oklch(0.23 0.015 285);
44 /* Light gray text - #E4E4E4 */
45 --foreground: oklch(0.90 0.005 285);
46 /* Slightly lighter slate for cards */
47 --card: oklch(0.28 0.015 285);
48 --card-foreground: oklch(0.90 0.005 285);
49 --popover: oklch(0.28 0.015 285);
50 --popover-foreground: oklch(0.90 0.005 285);
51 /* Lavender buttons - #B39CD0 */
52 --primary: oklch(0.70 0.10 295);
53 --primary-foreground: oklch(0.23 0.015 285);
54 /* Soft pink accent - #FFC1CC */
55 --accent: oklch(0.85 0.08 5);
56 --accent-foreground: oklch(0.23 0.015 285);
57 /* Light cyan secondary - #A8DADC */
58 --secondary: oklch(0.82 0.05 200);
59 --secondary-foreground: oklch(0.23 0.015 285);
60 /* Muted slate areas */
61 --muted: oklch(0.33 0.015 285);
62 --muted-foreground: oklch(0.72 0.01 285);
63 /* Subtle borders */
64 --border: oklch(0.38 0.02 285);
65 --input: oklch(0.30 0.015 285);
66 --ring: oklch(0.70 0.10 295);
67 /* Warm destructive color */
68 --destructive: oklch(0.60 0.22 27);
69 --destructive-foreground: oklch(0.98 0.01 85);
70 /* Chart colors using the accent palette */
71 --chart-1: oklch(0.85 0.08 5);
72 --chart-2: oklch(0.82 0.05 200);
73 --chart-3: oklch(0.70 0.10 295);
74 --chart-4: oklch(0.75 0.08 340);
75 --chart-5: oklch(0.65 0.08 180);
76 }
77}
78
79@theme inline {
80 --color-background: var(--background);
81 --color-foreground: var(--foreground);
82 --color-card: var(--card);
83 --color-card-foreground: var(--card-foreground);
84 --color-popover: var(--popover);
85 --color-popover-foreground: var(--popover-foreground);
86 --color-primary: var(--primary);
87 --color-primary-foreground: var(--primary-foreground);
88 --color-secondary: var(--secondary);
89 --color-secondary-foreground: var(--secondary-foreground);
90 --color-muted: var(--muted);
91 --color-muted-foreground: var(--muted-foreground);
92 --color-accent: var(--accent);
93 --color-accent-foreground: var(--accent-foreground);
94 --color-destructive: var(--destructive);
95 --color-destructive-foreground: var(--destructive-foreground);
96 --color-border: var(--border);
97 --color-input: var(--input);
98 --color-ring: var(--ring);
99 --color-chart-1: var(--chart-1);
100 --color-chart-2: var(--chart-2);
101 --color-chart-3: var(--chart-3);
102 --color-chart-4: var(--chart-4);
103 --color-chart-5: var(--chart-5);
104 --radius-sm: calc(var(--radius) - 4px);
105 --radius-md: calc(var(--radius) - 2px);
106 --radius-lg: var(--radius);
107 --radius-xl: calc(var(--radius) + 4px);
108}
109
110@layer base {
111 * {
112 @apply border-border outline-ring/50;
113 }
114 body {
115 @apply bg-background text-foreground;
116 }
117}
118
119@keyframes arrow-bounce {
120 0%, 100% {
121 transform: translateX(0);
122 }
123 50% {
124 transform: translateX(4px);
125 }
126}
127
128.arrow-animate {
129 animation: arrow-bounce 1.5s ease-in-out infinite;
130}
131
132@keyframes shimmer {
133 100% {
134 transform: translateX(100%);
135 }
136}
137