2026-09-30 18:42:28 +03:30
|
|
|
@import "tailwindcss";
|
|
|
|
|
|
|
|
|
|
@theme {
|
|
|
|
|
--color-ink: #0a0a0b;
|
|
|
|
|
--color-coal: #121215;
|
|
|
|
|
--color-smoke: #1b1b1f;
|
|
|
|
|
--color-bone: #f2f2ee;
|
|
|
|
|
--color-ash: #8b8b93;
|
|
|
|
|
--color-volt: #c8ff2e;
|
|
|
|
|
|
2026-09-30 20:33:37 +03:30
|
|
|
--font-display: "Vazirmatn", "Syne", ui-sans-serif, system-ui, sans-serif;
|
|
|
|
|
--font-body: "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
|
|
|
|
|
--font-serif: "Vazirmatn", "Instrument Serif", ui-serif, Georgia, serif;
|
|
|
|
|
--font-mono: "Vazirmatn", ui-monospace, monospace;
|
2026-09-30 18:42:28 +03:30
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html { background: var(--color-ink); }
|
|
|
|
|
body {
|
|
|
|
|
@apply bg-ink text-bone font-body antialiased;
|
|
|
|
|
overflow-x: clip;
|
|
|
|
|
}
|
|
|
|
|
::selection {
|
|
|
|
|
background: var(--color-volt);
|
|
|
|
|
color: var(--color-ink);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html.lenis, html.lenis body { height: auto; }
|
|
|
|
|
.lenis.lenis-smooth { scroll-behavior: auto !important; }
|
|
|
|
|
|
|
|
|
|
.noise {
|
|
|
|
|
position: fixed;
|
|
|
|
|
inset: -50%;
|
|
|
|
|
width: 200%;
|
|
|
|
|
height: 200%;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
opacity: 0.032;
|
|
|
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
|
|
|
animation: grain 8s steps(10) infinite;
|
|
|
|
|
}
|
|
|
|
|
@keyframes grain {
|
|
|
|
|
0%, 100% { transform: translate(0, 0); }
|
|
|
|
|
10% { transform: translate(-5%, -8%); }
|
|
|
|
|
20% { transform: translate(-12%, 4%); }
|
|
|
|
|
30% { transform: translate(6%, -14%); }
|
|
|
|
|
40% { transform: translate(-4%, 12%); }
|
|
|
|
|
50% { transform: translate(-12%, 7%); }
|
|
|
|
|
60% { transform: translate(11%, 0%); }
|
|
|
|
|
70% { transform: translate(0%, 10%); }
|
|
|
|
|
80% { transform: translate(3%, 13%); }
|
|
|
|
|
90% { transform: translate(-8%, 8%); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes marquee {
|
|
|
|
|
to { transform: translateX(-50%); }
|
|
|
|
|
}
|
|
|
|
|
.animate-marquee {
|
|
|
|
|
animation: marquee var(--marquee-duration, 24s) linear infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes blink {
|
|
|
|
|
0%, 100% { opacity: 1; }
|
|
|
|
|
50% { opacity: 0.15; }
|
|
|
|
|
}
|
|
|
|
|
.animate-blink { animation: blink 1.4s ease-in-out infinite; }
|
|
|
|
|
|
|
|
|
|
@keyframes spin-slow {
|
|
|
|
|
to { transform: rotate(360deg); }
|
|
|
|
|
}
|
|
|
|
|
.animate-spin-slow { animation: spin-slow 18s linear infinite; }
|
|
|
|
|
|
|
|
|
|
@keyframes fade-up {
|
|
|
|
|
from { opacity: 0; transform: translateY(24px); }
|
|
|
|
|
to { opacity: 1; transform: translateY(0); }
|
|
|
|
|
}
|
|
|
|
|
.animate-fade-up {
|
|
|
|
|
animation: fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text-outline {
|
|
|
|
|
-webkit-text-stroke: 1.5px rgba(242, 242, 238, 0.22);
|
|
|
|
|
color: transparent;
|
|
|
|
|
}
|
