71 lines
1.6 KiB
CSS
71 lines
1.6 KiB
CSS
|
@tailwind base;
|
||
|
|
@tailwind components;
|
||
|
|
@tailwind utilities;
|
||
|
|
|
||
|
|
:root {
|
||
|
|
color-scheme: light;
|
||
|
|
--font-heading: 'Space Grotesk', 'Manrope', system-ui, -apple-system, sans-serif;
|
||
|
|
--font-body: 'Manrope', system-ui, -apple-system, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
@apply bg-slate-50 text-slate-900 font-body antialiased;
|
||
|
|
}
|
||
|
|
|
||
|
|
@layer base {
|
||
|
|
.font-heading {
|
||
|
|
font-family: var(--font-heading);
|
||
|
|
}
|
||
|
|
.font-body {
|
||
|
|
font-family: var(--font-body);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@layer utilities {
|
||
|
|
.shadow-card {
|
||
|
|
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
|
||
|
|
}
|
||
|
|
.shadow-floating {
|
||
|
|
box-shadow: 0 14px 42px rgba(59, 130, 246, 0.18);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.gradient-ring {
|
||
|
|
background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.12), transparent 35%),
|
||
|
|
radial-gradient(circle at 80% 10%, rgba(14, 165, 233, 0.12), transparent 32%),
|
||
|
|
radial-gradient(circle at 50% 80%, rgba(99, 102, 241, 0.1), transparent 30%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-shell {
|
||
|
|
@apply relative overflow-hidden rounded-3xl border border-slate-200 bg-white/95 backdrop-blur shadow-card;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-surface {
|
||
|
|
@apply rounded-2xl border border-slate-200 bg-white p-6 shadow-card transition duration-300;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-surface:hover {
|
||
|
|
transform: translateY(-0.25rem);
|
||
|
|
box-shadow: 0 12px 34px rgba(59, 130, 246, 0.16);
|
||
|
|
}
|
||
|
|
|
||
|
|
.badge {
|
||
|
|
@apply inline-flex items-center gap-2 rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-blue-700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fade-up {
|
||
|
|
opacity: 0;
|
||
|
|
animation: fade-up 0.9s ease forwards;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fade-up {
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(20px);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
}
|