106 lines
3.2 KiB
CSS
106 lines
3.2 KiB
CSS
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@700,500,400&display=swap');
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
body {
|
|
@apply bg-surface-50 text-gray-900 antialiased;
|
|
@apply dark:bg-gray-950 dark:text-gray-100;
|
|
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.btn {
|
|
@apply inline-flex items-center justify-center px-5 py-3 rounded-2xl font-semibold transition-all duration-300;
|
|
@apply focus:outline-none focus:ring-2 focus:ring-offset-2;
|
|
@apply disabled:opacity-50 disabled:cursor-not-allowed;
|
|
@apply active:scale-95;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply bg-gradient-to-r from-primary-600 to-primary-700 text-white;
|
|
@apply hover:from-primary-700 hover:to-primary-800;
|
|
@apply focus:ring-primary-500;
|
|
@apply shadow-lg shadow-primary-500/25;
|
|
@apply dark:from-primary-500 dark:to-primary-600;
|
|
@apply dark:hover:from-primary-600 dark:hover:to-primary-700;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-white text-gray-700 border border-gray-200;
|
|
@apply hover:bg-gray-50 hover:border-gray-300;
|
|
@apply focus:ring-gray-500;
|
|
@apply dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700;
|
|
@apply dark:hover:bg-gray-700 dark:hover:border-gray-600;
|
|
}
|
|
|
|
.btn-accent {
|
|
@apply bg-gradient-to-r from-accent-400 to-accent-500 text-white;
|
|
@apply hover:from-accent-500 hover:to-accent-600;
|
|
@apply focus:ring-accent-400;
|
|
@apply shadow-lg shadow-accent-400/25;
|
|
}
|
|
|
|
.input {
|
|
@apply w-full px-4 py-3.5 rounded-2xl border border-gray-200 bg-white;
|
|
@apply focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500;
|
|
@apply placeholder:text-gray-400 transition-all duration-200;
|
|
@apply dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100;
|
|
@apply dark:placeholder:text-gray-500 dark:focus:border-primary-400;
|
|
}
|
|
|
|
.card {
|
|
@apply bg-white rounded-3xl shadow-sm border border-gray-100/50;
|
|
@apply hover:shadow-md transition-all duration-300;
|
|
@apply dark:bg-gray-900 dark:border-gray-800 dark:shadow-none;
|
|
@apply dark:hover:bg-gray-800;
|
|
}
|
|
|
|
.card-glass {
|
|
@apply bg-white/70 backdrop-blur-xl rounded-3xl;
|
|
@apply border border-white/20 shadow-lg;
|
|
@apply dark:bg-gray-900/70 dark:border-gray-700/50;
|
|
}
|
|
|
|
.gradient-mesh {
|
|
background:
|
|
radial-gradient(at 40% 20%, rgba(20, 184, 166, 0.1) 0px, transparent 50%),
|
|
radial-gradient(at 80% 0%, rgba(247, 181, 56, 0.08) 0px, transparent 50%),
|
|
radial-gradient(at 0% 50%, rgba(20, 184, 166, 0.05) 0px, transparent 50%);
|
|
}
|
|
|
|
.dark .gradient-mesh {
|
|
background:
|
|
radial-gradient(at 40% 20%, rgba(20, 184, 166, 0.15) 0px, transparent 50%),
|
|
radial-gradient(at 80% 0%, rgba(247, 181, 56, 0.1) 0px, transparent 50%),
|
|
radial-gradient(at 0% 50%, rgba(20, 184, 166, 0.08) 0px, transparent 50%);
|
|
}
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-gray-300 rounded-full;
|
|
@apply dark:bg-gray-700;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-gray-400;
|
|
@apply dark:bg-gray-600;
|
|
}
|