70 lines
1.7 KiB
CSS
70 lines
1.7 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--background: #fafaf9;
|
|
--foreground: #1c1917;
|
|
--accent: #4f7942;
|
|
--accent-light: #6b9f5b;
|
|
--muted: #78716c;
|
|
--border: #e7e5e4;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-light: var(--accent-light);
|
|
--color-muted: var(--muted);
|
|
--color-border: var(--border);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: #0c0a09;
|
|
--foreground: #e7e5e4;
|
|
--accent: #6b9f5b;
|
|
--accent-light: #4f7942;
|
|
--muted: #a8a29e;
|
|
--border: #292524;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
/* Hero section */
|
|
.hero-section {
|
|
background: linear-gradient(
|
|
145deg,
|
|
#1a2e1a 0%,
|
|
#2d4a2d 25%,
|
|
#1c3a2a 50%,
|
|
#1a2835 75%,
|
|
#0f1f2e 100%
|
|
);
|
|
}
|
|
|
|
.hero-glow {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(107, 159, 91, 0.2) 0%, transparent 70%),
|
|
radial-gradient(ellipse 40% 40% at 20% 80%, rgba(79, 121, 66, 0.12) 0%, transparent 60%),
|
|
radial-gradient(ellipse 40% 40% at 80% 60%, rgba(30, 80, 100, 0.1) 0%, transparent 60%);
|
|
}
|
|
|
|
.hero-grid {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
|
background-size: 64px 64px;
|
|
mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%);
|
|
-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%);
|
|
}
|