89 lines
1.6 KiB
CSS
89 lines
1.6 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--font-sans: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont,
|
|
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
|
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
|
|
--grad-1: #7dd3fc; /* sky-300 */
|
|
--grad-2: #c4b5fd; /* violet-300 */
|
|
--grad-3: #fda4af; /* rose-300 */
|
|
--grad-4: #86efac; /* green-300 */
|
|
--bg: #ffffff;
|
|
--text: #0a0a0a;
|
|
--card: #ffffff;
|
|
--brandbg: #040c31;
|
|
--border: #e5e7eb;
|
|
--hover: #e5e7eb;
|
|
}
|
|
|
|
html.dark {
|
|
--bg: #0a0a0a;
|
|
--text: #f5f5f5;
|
|
--card: #0f0f10;
|
|
--border: #27272a;
|
|
--hover: #1f1f22;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
background: linear-gradient(
|
|
120deg,
|
|
var(--grad-1),
|
|
var(--grad-2),
|
|
var(--grad-3),
|
|
var(--grad-4)
|
|
);
|
|
background-size: 400% 400%;
|
|
animation: bg-gradient 22s ease infinite;
|
|
/* Optional: keeps bg fixed while content scrolls */
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
/* Respect reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
body {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
@keyframes bg-gradient {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
/* Optional readability veil; tweak or remove */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
backdrop-filter: none;
|
|
background: rgba(255, 255, 255, 0.08); /* subtle wash */
|
|
pointer-events: none;
|
|
}
|
|
|
|
@layer components {
|
|
.wrapper {
|
|
@apply w-full max-w-7xl mx-auto px-4;
|
|
}
|
|
|
|
.section {
|
|
@apply py-16 md:py-24;
|
|
}
|
|
}
|