72 lines
1.2 KiB
CSS
72 lines
1.2 KiB
CSS
|
@tailwind base;
|
||
|
|
@tailwind components;
|
||
|
|
@tailwind utilities;
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--background: #ffffff;
|
||
|
|
--foreground: #111827;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
:root {
|
||
|
|
--background: #0a0a0a;
|
||
|
|
--foreground: #ededed;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
color: var(--foreground);
|
||
|
|
background: var(--background);
|
||
|
|
font-family: var(--font-inter), Arial, Helvetica, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
@layer utilities {
|
||
|
|
.text-balance {
|
||
|
|
text-wrap: balance;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Calculator card wiggle animation */
|
||
|
|
@keyframes wiggle {
|
||
|
|
0% { transform: rotate(0deg); }
|
||
|
|
15% { transform: rotate(-5deg); }
|
||
|
|
35% { transform: rotate(4.5deg); }
|
||
|
|
55% { transform: rotate(-2.5deg); }
|
||
|
|
75% { transform: rotate(2deg); }
|
||
|
|
90% { transform: rotate(-0.5deg); }
|
||
|
|
100% { transform: rotate(0deg); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.calculator-card-container:hover {
|
||
|
|
animation: wiggle 2.5s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Menu animations */
|
||
|
|
@keyframes fadeIn {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes slideDown {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateX(-50%) translateY(-10px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateX(-50%) translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.animate-fade-in {
|
||
|
|
animation: fadeIn 0.2s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.animate-slide-down {
|
||
|
|
animation: slideDown 0.3s ease-out;
|
||
|
|
}
|