86 lines
2.1 KiB
CSS
86 lines
2.1 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-primary: #0f172a;
|
|
--color-primary-light: #1e293b;
|
|
--color-accent: #10b981;
|
|
--color-accent-hover: #059669;
|
|
--color-surface: #ffffff;
|
|
--color-surface-muted: #f8fafc;
|
|
--color-text-main: #0f172a;
|
|
--color-text-muted: #64748b;
|
|
--color-border: #e2e8f0;
|
|
|
|
--font-sans: var(--font-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
|
|
--radius-xl: 1rem;
|
|
--radius-2xl: 1.5rem;
|
|
|
|
--shadow-soft: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
|
|
--shadow-card: 0 10px 15px -3px rgb(0 0 0 / 0.03), 0 4px 6px -4px rgb(0 0 0 / 0.03);
|
|
}
|
|
|
|
:root {
|
|
--header-height: 80px;
|
|
--transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
scroll-behavior: smooth;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
@apply bg-surface text-text-main antialiased selection:bg-accent/20 selection:text-accent;
|
|
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
@apply font-bold tracking-tight text-primary;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
section {
|
|
@apply py-20 md:py-32;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.container-custom {
|
|
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply inline-flex items-center justify-center px-6 py-3 rounded-lg bg-primary text-white font-semibold transition-all hover:bg-primary-light hover:shadow-lg active:scale-[0.98] disabled:opacity-50;
|
|
}
|
|
|
|
.btn-accent {
|
|
@apply inline-flex items-center justify-center px-6 py-3 rounded-lg bg-accent text-white font-semibold transition-all hover:bg-accent-hover hover:shadow-lg active:scale-[0.98] disabled:opacity-50;
|
|
}
|
|
|
|
.glass-panel {
|
|
@apply bg-white/80 backdrop-blur-md border border-white/20 shadow-soft;
|
|
}
|
|
|
|
.card-modern {
|
|
@apply bg-white p-8 rounded-2xl border border-border shadow-card transition-all hover:shadow-xl hover:-translate-y-1;
|
|
}
|
|
}
|
|
|
|
/* Custom animations */
|
|
@keyframes fade-in-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-fade-in-up {
|
|
animation: fade-in-up 0.6s ease-out forwards;
|
|
}
|