personal website
nekomimi.pet
1@import "tailwindcss";
2@import "tw-animate-css";
3
4@custom-variant dark (&:is(.dark *));
5
6@theme inline {
7 --color-background: var(--background);
8 --color-foreground: var(--foreground);
9 --color-sidebar-ring: var(--sidebar-ring);
10 --color-sidebar-border: var(--sidebar-border);
11 --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
12 --color-sidebar-accent: var(--sidebar-accent);
13 --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
14 --color-sidebar-primary: var(--sidebar-primary);
15 --color-sidebar-foreground: var(--sidebar-foreground);
16 --color-sidebar: var(--sidebar);
17 --color-chart-5: var(--chart-5);
18 --color-chart-4: var(--chart-4);
19 --color-chart-3: var(--chart-3);
20 --color-chart-2: var(--chart-2);
21 --color-chart-1: var(--chart-1);
22 --color-ring: var(--ring);
23 --color-input: var(--input);
24 --color-border: var(--border);
25 --color-destructive: var(--destructive);
26 --color-accent-foreground: var(--accent-foreground);
27 --color-accent: var(--accent);
28 --color-muted-foreground: var(--muted-foreground);
29 --color-muted: var(--muted);
30 --color-secondary-foreground: var(--secondary-foreground);
31 --color-secondary: var(--secondary);
32 --color-primary-foreground: var(--primary-foreground);
33 --color-primary: var(--primary);
34 --color-popover-foreground: var(--popover-foreground);
35 --color-popover: var(--popover);
36 --color-card-foreground: var(--card-foreground);
37 --color-card: var(--card);
38 --radius-sm: calc(var(--radius) - 4px);
39 --radius-md: calc(var(--radius) - 2px);
40 --radius-lg: var(--radius);
41 --radius-xl: calc(var(--radius) + 4px);
42 --font-sans: "Fira Code", monospace;
43}
44
45:root {
46 --radius: 0.625rem;
47 /* Dark mode - #1a1a1a primary, #2a2a2a secondary */
48 --background: #1a1a1a;
49 --foreground: oklch(0.92 0.005 255);
50 --card: #2a2a2a;
51 --card-foreground: oklch(0.92 0.005 255);
52 --popover: #2a2a2a;
53 --popover-foreground: oklch(0.92 0.005 255);
54 --primary: oklch(0.88 0.008 255);
55 --primary-foreground: #1a1a1a;
56 --secondary: #2a2a2a;
57 --secondary-foreground: oklch(0.92 0.005 255);
58 --muted: #2a2a2a;
59 --muted-foreground: oklch(0.65 0.012 255);
60 --accent: #2a2a2a;
61 --accent-foreground: oklch(0.92 0.005 255);
62 --destructive: oklch(0.704 0.191 22.216);
63 --border: #333333;
64 --input: #333333;
65 --ring: oklch(0.5 0.015 255);
66 --chart-1: oklch(0.488 0.243 264.376);
67 --chart-2: oklch(0.696 0.17 162.48);
68 --chart-3: oklch(0.769 0.188 70.08);
69 --chart-4: oklch(0.627 0.265 303.9);
70 --chart-5: oklch(0.645 0.246 16.439);
71 --sidebar: #2a2a2a;
72 --sidebar-foreground: oklch(0.92 0.005 255);
73 --sidebar-primary: oklch(0.488 0.243 264.376);
74 --sidebar-primary-foreground: oklch(0.95 0.005 255);
75 --sidebar-accent: #2a2a2a;
76 --sidebar-accent-foreground: oklch(0.92 0.005 255);
77 --sidebar-border: #333333;
78 --sidebar-ring: oklch(0.5 0.015 255);
79
80 /* Glassmorphism variables - Dark mode */
81 --glass-bg: rgba(255, 255, 255, 0.05);
82 --glass-border: rgba(255, 255, 255, 0.1);
83 --glass-shadow: rgba(0, 0, 0, 0.3);
84}
85
86@layer base {
87 * {
88 @apply border-border outline-ring/50;
89 }
90 body {
91 @apply bg-background text-foreground;
92 }
93}
94
95@keyframes fade-in-up {
96 from {
97 opacity: 0;
98 transform: translateY(20px);
99 }
100 to {
101 opacity: 1;
102 transform: translateY(0);
103 }
104}
105
106.animate-fade-in-up {
107 animation: fade-in-up 0.8s ease-out forwards;
108}
109
110@keyframes bounce-slow {
111 0%,
112 100% {
113 transform: translateY(0);
114 }
115 50% {
116 transform: translateY(10px);
117 }
118}
119
120.animate-bounce-slow {
121 animation: bounce-slow 1s ease-in-out infinite;
122}
123
124/* Glassmorphism utilities */
125@layer utilities {
126 .glass {
127 --shadow-offset: 0;
128 --shadow-blur: 20px;
129 --shadow-spread: -5px;
130 --shadow-color: rgba(255, 255, 255, 0.7);
131
132 /* Painted glass */
133 --tint-color: rgba(255, 255, 255, 0.28);
134 --tint-opacity: 1;
135
136 /* Background frost */
137 --frost-blur: 2px;
138
139 /* SVG noise/distortion */
140 --noise-frequency: 0.008;
141 --distortion-strength: 77;
142
143 /* Outer shadow blur */
144 --outer-shadow-blur: 24px;
145
146 /*background: rgba(255, 255, 255, 0.08);*/
147 box-shadow: inset var(--shadow-offset) var(--shadow-offset)
148 var(--shadow-blur) var(--shadow-spread) var(--shadow-color);
149 background-color: rgba(var(--tint-color), var(--tint-opacity));
150 backdrop-filter: url(#frosted);
151 -webkit-backdrop-filter: url(#frosted);
152 -webkit-backdrop-filter: blur(var(--frost-blur));
153 /*border: 2px solid transparent;*/
154 }
155
156 .glass-hover {
157 transition: all 0.3s ease;
158 }
159
160 .glass-hover:hover {
161 background: rgba(255, 255, 255, 0.12);
162 box-shadow:
163 /*0 0 0 2px rgba(255, 255, 255, 0.7),*/
164 0 20px 40px rgba(0, 0, 0, 0.16);
165 transform: scale(1.05); /* Scales to 105% of original size */
166 }
167}