@import "tailwindcss"; @source "../**/*.astro"; @theme { --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif; --font-display: 'Instrument Serif', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --color-surface: #0c0f0e; --color-surface-raised: #141917; --color-surface-overlay: #1a1f1d; --color-ink: #e4e8e6; --color-ink-muted: #8a9490; --color-ink-faint: #4a5552; --color-teal: #3dd8b5; --color-teal-dim: #2aaa8e; --color-teal-faint: rgba(61, 216, 181, 0.08); --color-teal-glow: rgba(61, 216, 181, 0.15); --color-rule: rgba(255, 255, 255, 0.06);} html { scroll-behavior: smooth;} body { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px;} /* Staggered fade-in for page load */@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); }} .rise { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }.rise-d1 { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both; }.rise-d2 { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both; }.rise-d3 { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both; }.rise-d4 { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both; } /* Typing cursor blink for code block */@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; }} .cursor-blink { animation: blink 1s step-end infinite;} /* Smooth scroll-triggered reveals via IntersectionObserver */.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);}.reveal.visible { opacity: 1; transform: translateY(0);} /* Thin scrollbar for catalog */.scrollbar-thin { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;}.scrollbar-thin::-webkit-scrollbar { width: 4px;}.scrollbar-thin::-webkit-scrollbar-track { background: transparent;}.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px;}
@import "tailwindcss";
@source "../**/*.astro";
@theme {
--font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
--font-display: 'Instrument Serif', Georgia, serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--color-surface: #0c0f0e;
--color-surface-raised: #141917;
--color-surface-overlay: #1a1f1d;
--color-ink: #e4e8e6;
--color-ink-muted: #8a9490;
--color-ink-faint: #4a5552;
--color-teal: #3dd8b5;
--color-teal-dim: #2aaa8e;
--color-teal-faint: rgba(61, 216, 181, 0.08);
--color-teal-glow: rgba(61, 216, 181, 0.15);
--color-rule: rgba(255, 255, 255, 0.06);
}
html {
scroll-behavior: smooth;
}
body {
background-image:
url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 256px 256px;
}
/* Staggered fade-in for page load */
@keyframes rise {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.rise-d1 { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both; }
.rise-d2 { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both; }
.rise-d3 { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both; }
.rise-d4 { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both; }
/* Typing cursor blink for code block */
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.cursor-blink {
animation: blink 1s step-end infinite;
}
/* Smooth scroll-triggered reveals via IntersectionObserver */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* Thin scrollbar for catalog */
.scrollbar-thin {
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.scrollbar-thin::-webkit-scrollbar {
width: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1);
border-radius: 2px;
}