127 lines
3.1 KiB
CSS
127 lines
3.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 overflow-x-hidden;
|
|
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
|
}
|
|
|
|
.motion-fix {
|
|
backface-visibility: hidden;
|
|
transform-style: preserve-3d;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.grid-pattern {
|
|
background-image: radial-gradient(circle, var(--color-border) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
}
|
|
|
|
.tech-line {
|
|
@apply absolute h-px bg-accent/20;
|
|
}
|
|
|
|
.tech-dot {
|
|
@apply absolute w-1 h-1 bg-accent/30 rounded-full;
|
|
}
|
|
|
|
.tech-corner {
|
|
@apply absolute w-4 h-4 border-accent/30;
|
|
}
|
|
|
|
.section-number {
|
|
@apply absolute -left-12 top-0 text-6xl font-black text-slate-100 select-none pointer-events-none hidden lg:block;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.tech-card-border {
|
|
@apply relative;
|
|
}
|
|
|
|
.tech-card-border::before {
|
|
content: '';
|
|
@apply absolute -inset-px bg-gradient-to-br from-accent/20 via-transparent to-accent/20 rounded-[inherit] opacity-0 transition-opacity duration-500;
|
|
}
|
|
|
|
.tech-card-border:hover::before {
|
|
@apply opacity-100;
|
|
}
|
|
|
|
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;
|
|
}
|