twotalesanimation
88 lines
2.2 KiB
CSS
88 lines
2.2 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--ink: #0a0a0b;
|
|
--ink-2: #111113;
|
|
--line: rgb(255 255 255 / 0.1);
|
|
--fg: #ecebe8;
|
|
--muted: #8d8c88;
|
|
--accent: #e8572a;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-ink: var(--ink);
|
|
--color-ink-2: var(--ink-2);
|
|
--color-line: var(--line);
|
|
--color-fg: var(--fg);
|
|
--color-muted: var(--muted);
|
|
--color-accent: var(--accent);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
--font-display: var(--font-josefin);
|
|
}
|
|
|
|
html {
|
|
color-scheme: dark;
|
|
scroll-behavior: smooth;
|
|
scroll-padding-top: 5rem;
|
|
}
|
|
|
|
body {
|
|
background: var(--ink);
|
|
color: var(--fg);
|
|
}
|
|
|
|
::selection {
|
|
background: var(--accent);
|
|
color: var(--ink);
|
|
}
|
|
|
|
/* Film grain overlay */
|
|
.grain::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: -50%;
|
|
pointer-events: none;
|
|
z-index: 60;
|
|
opacity: 0.07;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
animation: grain 0.8s steps(4) infinite;
|
|
}
|
|
|
|
@keyframes grain {
|
|
0% { transform: translate(0, 0); }
|
|
25% { transform: translate(-3%, 2%); }
|
|
50% { transform: translate(2%, -3%); }
|
|
75% { transform: translate(-2%, -1%); }
|
|
100% { transform: translate(1%, 3%); }
|
|
}
|
|
|
|
/* Scroll reveal (toggled by <Reveal>) */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
|
|
}
|
|
.reveal.is-visible {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
|
|
@keyframes drift {
|
|
0%, 100% { transform: translate3d(-6%, -4%, 0) scale(1); }
|
|
50% { transform: translate3d(6%, 4%, 0) scale(1.15); }
|
|
}
|
|
.animate-drift { animation: drift 18s ease-in-out infinite; }
|
|
|
|
@keyframes scan {
|
|
from { transform: translateY(-10vh); }
|
|
to { transform: translateY(110vh); }
|
|
}
|
|
.animate-scan { animation: scan 7s linear infinite; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
.grain::after, .animate-drift, .animate-scan { animation: none; }
|
|
.reveal { opacity: 1; transform: none; transition: none; }
|
|
}
|