@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap");
<!-- 404 -->
@theme {
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
--font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}
body {
@apply bg-slate-50 text-slate-900 font-sans antialiased selection:bg-cyan-200 selection:text-cyan-900;
}
.glass-panel {
@apply bg-white/70 backdrop-blur-md border border-white/40 shadow-[0_8px_32px_rgba(0,0,0,0.04)];
}
.tech-gradient-text {
@apply bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-cyan-500;
}
.tech-grid {
background-size: 40px 40px;
background-image: linear-gradient(to right, rgba(15, 23, 42, 0.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
} .fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-up.visible {
opacity: 1;
transform: translateY(0);
}
.icon-bounce {
opacity: 0;
transform: scale(0.5);
transition: opacity 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.icon-bounce.visible {
opacity: 1;
transform: scale(1);
} .faq-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
opacity: 0;
}
.faq-content.open {
max-height: 500px;
opacity: 1;
}
.faq-icon {
transition: transform 0.3s ease;
}
.faq-icon.open {
transform: rotate(180deg);
color: #3b82f6;
} .post-content table, 
.post-content .wp-block-table table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
text-align: left;
font-size: 1rem;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
border-radius: 0.5rem;
overflow: hidden;
}
.post-content table th {
background-color: #f1f5f9; padding: 1rem;
font-weight: 700;
color: #0f172a; border-bottom: 2px solid #e2e8f0; }
.post-content table td {
padding: 1rem;
border-bottom: 1px solid #e2e8f0; color: #334155; }
.post-content table tbody tr:nth-child(even) {
background-color: #f8fafc; }
.post-content table tbody tr:hover {
background-color: #f1f5f9; } .tech-grid {
background-size: 40px 40px !important;
background-image: 
linear-gradient(to right, rgba(15, 23, 42, 0.1) 1px, transparent 1px),
linear-gradient(to bottom, rgba(15, 23, 42, 0.1) 1px, transparent 1px) !important;
}