Monorepo for wisp.place. A static site hosting service built on top of the AT Protocol.
wisp.place
nekomimi.pet
1@import "tailwindcss";
2@import "tw-animate-css";
3
4@custom-variant dark (@media (prefers-color-scheme: dark));
5
6:root {
7 color-scheme: light;
8
9 /* Warm beige background inspired by Sunset design #E9DDD8 */
10 --background: oklch(0.90 0.012 35);
11 /* Very dark brown text for strong contrast #2A2420 */
12 --foreground: oklch(0.18 0.01 30);
13
14 /* Slightly lighter card background */
15 --card: oklch(0.93 0.01 35);
16 --card-foreground: oklch(0.18 0.01 30);
17
18 --popover: oklch(0.93 0.01 35);
19 --popover-foreground: oklch(0.18 0.01 30);
20
21 /* Dark brown primary inspired by #645343 */
22 --primary: oklch(0.35 0.02 35);
23 --primary-foreground: oklch(0.95 0.01 35);
24
25 /* Bright pink accent for links #FFAAD2 */
26 --accent: oklch(0.78 0.15 345);
27 --accent-foreground: oklch(0.18 0.01 30);
28
29 /* Medium taupe secondary inspired by #867D76 */
30 --secondary: oklch(0.52 0.015 30);
31 --secondary-foreground: oklch(0.95 0.01 35);
32
33 /* Light warm muted background */
34 --muted: oklch(0.88 0.01 35);
35 --muted-foreground: oklch(0.42 0.015 30);
36
37 --border: oklch(0.75 0.015 30);
38 --input: oklch(0.92 0.01 35);
39 --ring: oklch(0.72 0.08 15);
40
41 --destructive: oklch(0.577 0.245 27.325);
42 --destructive-foreground: oklch(0.985 0 0);
43
44 --chart-1: oklch(0.78 0.15 345);
45 --chart-2: oklch(0.32 0.04 285);
46 --chart-3: oklch(0.56 0.08 220);
47 --chart-4: oklch(0.85 0.02 130);
48 --chart-5: oklch(0.93 0.03 85);
49
50 --radius: 0.75rem;
51 --sidebar: oklch(0.985 0 0);
52 --sidebar-foreground: oklch(0.145 0 0);
53 --sidebar-primary: oklch(0.205 0 0);
54 --sidebar-primary-foreground: oklch(0.985 0 0);
55 --sidebar-accent: oklch(0.97 0 0);
56 --sidebar-accent-foreground: oklch(0.205 0 0);
57 --sidebar-border: oklch(0.922 0 0);
58 --sidebar-ring: oklch(0.708 0 0);
59}
60
61.dark {
62 color-scheme: dark;
63
64 /* Slate violet background - #2C2C2C with violet tint */
65 --background: oklch(0.23 0.015 285);
66 /* Light gray text - #E4E4E4 */
67 --foreground: oklch(0.90 0.005 285);
68
69 /* Slightly lighter slate for cards */
70 --card: oklch(0.28 0.015 285);
71 --card-foreground: oklch(0.90 0.005 285);
72
73 --popover: oklch(0.28 0.015 285);
74 --popover-foreground: oklch(0.90 0.005 285);
75
76 /* Lavender buttons - #B39CD0 */
77 --primary: oklch(0.70 0.10 295);
78 --primary-foreground: oklch(0.23 0.015 285);
79
80 /* Soft pink accent - #FFC1CC */
81 --accent: oklch(0.85 0.08 5);
82 --accent-foreground: oklch(0.23 0.015 285);
83
84 /* Light cyan secondary - #A8DADC */
85 --secondary: oklch(0.82 0.05 200);
86 --secondary-foreground: oklch(0.23 0.015 285);
87
88 /* Muted slate areas */
89 --muted: oklch(0.33 0.015 285);
90 --muted-foreground: oklch(0.72 0.01 285);
91
92 /* Subtle borders */
93 --border: oklch(0.38 0.02 285);
94 --input: oklch(0.30 0.015 285);
95 --ring: oklch(0.70 0.10 295);
96
97 /* Warm destructive color */
98 --destructive: oklch(0.60 0.22 27);
99 --destructive-foreground: oklch(0.98 0.01 85);
100
101 /* Chart colors using the accent palette */
102 --chart-1: oklch(0.85 0.08 5);
103 --chart-2: oklch(0.82 0.05 200);
104 --chart-3: oklch(0.70 0.10 295);
105 --chart-4: oklch(0.75 0.08 340);
106 --chart-5: oklch(0.65 0.08 180);
107
108 /* Sidebar slate */
109 --sidebar: oklch(0.20 0.015 285);
110 --sidebar-foreground: oklch(0.90 0.005 285);
111 --sidebar-primary: oklch(0.70 0.10 295);
112 --sidebar-primary-foreground: oklch(0.20 0.015 285);
113 --sidebar-accent: oklch(0.28 0.015 285);
114 --sidebar-accent-foreground: oklch(0.90 0.005 285);
115 --sidebar-border: oklch(0.32 0.02 285);
116 --sidebar-ring: oklch(0.70 0.10 295);
117}
118
119@theme inline {
120 /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */
121 --color-background: var(--background);
122 --color-foreground: var(--foreground);
123 --color-card: var(--card);
124 --color-card-foreground: var(--card-foreground);
125 --color-popover: var(--popover);
126 --color-popover-foreground: var(--popover-foreground);
127 --color-primary: var(--primary);
128 --color-primary-foreground: var(--primary-foreground);
129 --color-secondary: var(--secondary);
130 --color-secondary-foreground: var(--secondary-foreground);
131 --color-muted: var(--muted);
132 --color-muted-foreground: var(--muted-foreground);
133 --color-accent: var(--accent);
134 --color-accent-foreground: var(--accent-foreground);
135 --color-destructive: var(--destructive);
136 --color-destructive-foreground: var(--destructive-foreground);
137 --color-border: var(--border);
138 --color-input: var(--input);
139 --color-ring: var(--ring);
140 --color-chart-1: var(--chart-1);
141 --color-chart-2: var(--chart-2);
142 --color-chart-3: var(--chart-3);
143 --color-chart-4: var(--chart-4);
144 --color-chart-5: var(--chart-5);
145 --radius-sm: calc(var(--radius) - 4px);
146 --radius-md: calc(var(--radius) - 2px);
147 --radius-lg: var(--radius);
148 --radius-xl: calc(var(--radius) + 4px);
149 --color-sidebar: var(--sidebar);
150 --color-sidebar-foreground: var(--sidebar-foreground);
151 --color-sidebar-primary: var(--sidebar-primary);
152 --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
153 --color-sidebar-accent: var(--sidebar-accent);
154 --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
155 --color-sidebar-border: var(--sidebar-border);
156 --color-sidebar-ring: var(--sidebar-ring);
157}
158
159@layer base {
160 * {
161 @apply border-border outline-ring/50;
162 }
163 body {
164 @apply bg-background text-foreground;
165 }
166}
167
168@keyframes arrow-bounce {
169 0%, 100% {
170 transform: translateX(0);
171 }
172 50% {
173 transform: translateX(4px);
174 }
175}
176
177.arrow-animate {
178 animation: arrow-bounce 1.5s ease-in-out infinite;
179}
180
181@keyframes shimmer {
182 100% {
183 transform: translateX(100%);
184 }
185}
186
187/* Shiki syntax highlighting styles */
188.shiki-wrapper {
189 border-radius: 0.5rem;
190 padding: 1rem;
191 overflow-x: auto;
192 border: 1px solid hsl(var(--border));
193}
194
195.shiki-wrapper pre {
196 margin: 0 !important;
197 padding: 0 !important;
198}