@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);} @media (prefers-color-scheme: light) { :root { --color-surface: #fafbfb; --color-surface-raised: #f0f2f1; --color-surface-overlay: #e5e8e7; --color-ink: #1a1f1d; --color-ink-muted: #5a6560; --color-ink-faint: #9ca5a0; --color-teal: #0d9b7a; --color-teal-dim: #0a8068; --color-teal-faint: rgba(13, 155, 122, 0.06); --color-teal-glow: rgba(13, 155, 122, 0.1); --color-rule: rgba(0, 0, 0, 0.08); }} 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; color-scheme: light dark;} @media (prefers-color-scheme: light) { 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.015'/%3E%3C/svg%3E"); }} /* 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;} @media (prefers-color-scheme: light) { .scrollbar-thin { scrollbar-color: rgba(0, 0, 0, 0.1) transparent; } .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); }} .legal-prose { color: color-mix(in srgb, var(--color-ink) 85%, transparent); line-height: 1.75; font-size: 15.5px;} .legal-prose > :first-child { margin-top: 0;} .legal-prose > :first-child::first-letter { font-family: var(--font-display); font-size: 3.4em; float: left; line-height: 0.85; padding: 0.32rem 0.6rem 0 0; color: var(--color-teal);} .legal-prose h2 { position: relative; margin-top: 3rem; margin-bottom: 0.85rem; padding-top: 1.6rem; color: var(--color-ink); font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.005em; border-top: 1px solid var(--color-rule);} .legal-prose > h2:first-of-type { margin-top: 2.4rem;} .legal-prose h3 { margin-top: 1.6rem; margin-bottom: 0.5rem; color: var(--color-ink); font-size: 0.95rem; font-weight: 600;} .legal-prose p,.legal-prose ul { margin: 0.85rem 0;} .legal-prose ul { list-style: none; padding-left: 0;} .legal-prose li { position: relative; margin: 0.5rem 0; padding-left: 1.25rem;} .legal-prose li::before { content: ""; position: absolute; left: 0.15rem; top: 0.72rem; width: 5px; height: 5px; border-radius: 50%; background: var(--color-teal); opacity: 0.7;} .legal-prose a { color: var(--color-teal); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-teal) 35%, transparent); text-underline-offset: 3px; transition: color 0.15s ease, text-decoration-color 0.15s ease;} .legal-prose a:hover { color: var(--color-teal-dim); text-decoration-color: var(--color-teal-dim);} .legal-prose strong { color: var(--color-ink); font-weight: 600;}
@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);
}
@media (prefers-color-scheme: light) {
:root {
--color-surface: #fafbfb;
--color-surface-raised: #f0f2f1;
--color-surface-overlay: #e5e8e7;
--color-ink: #1a1f1d;
--color-ink-muted: #5a6560;
--color-ink-faint: #9ca5a0;
--color-teal: #0d9b7a;
--color-teal-dim: #0a8068;
--color-teal-faint: rgba(13, 155, 122, 0.06);
--color-teal-glow: rgba(13, 155, 122, 0.1);
--color-rule: rgba(0, 0, 0, 0.08);
}
}
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;
color-scheme: light dark;
}
@media (prefers-color-scheme: light) {
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.015'/%3E%3C/svg%3E");
}
}
/* 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;
}
@media (prefers-color-scheme: light) {
.scrollbar-thin {
scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.12);
}
}
.legal-prose {
color: color-mix(in srgb, var(--color-ink) 85%, transparent);
line-height: 1.75;
font-size: 15.5px;
}
.legal-prose > :first-child {
margin-top: 0;
}
.legal-prose > :first-child::first-letter {
font-family: var(--font-display);
font-size: 3.4em;
float: left;
line-height: 0.85;
padding: 0.32rem 0.6rem 0 0;
color: var(--color-teal);
}
.legal-prose h2 {
position: relative;
margin-top: 3rem;
margin-bottom: 0.85rem;
padding-top: 1.6rem;
color: var(--color-ink);
font-family: var(--font-sans);
font-size: 1.05rem;
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.005em;
border-top: 1px solid var(--color-rule);
}
.legal-prose > h2:first-of-type {
margin-top: 2.4rem;
}
.legal-prose h3 {
margin-top: 1.6rem;
margin-bottom: 0.5rem;
color: var(--color-ink);
font-size: 0.95rem;
font-weight: 600;
}
.legal-prose p,
.legal-prose ul {
margin: 0.85rem 0;
}
.legal-prose ul {
list-style: none;
padding-left: 0;
}
.legal-prose li {
position: relative;
margin: 0.5rem 0;
padding-left: 1.25rem;
}
.legal-prose li::before {
content: "";
position: absolute;
left: 0.15rem;
top: 0.72rem;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-teal);
opacity: 0.7;
}
.legal-prose a {
color: var(--color-teal);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--color-teal) 35%, transparent);
text-underline-offset: 3px;
transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.legal-prose a:hover {
color: var(--color-teal-dim);
text-decoration-color: var(--color-teal-dim);
}
.legal-prose strong {
color: var(--color-ink);
font-weight: 600;
}