60 lines
1.0 KiB
CSS
60 lines
1.0 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html {
|
|
scroll-behavior: smooth;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
@apply font-body text-ink bg-surface;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
@apply font-heading;
|
|
}
|
|
|
|
::selection {
|
|
@apply bg-eu-blue/15 text-eu-blue-dark;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.section-container {
|
|
@apply max-w-6xl mx-auto px-5 sm:px-8;
|
|
}
|
|
|
|
.section-padding {
|
|
@apply py-20 md:py-28;
|
|
}
|
|
|
|
.code-block {
|
|
@apply bg-[#0d1117] text-[#e6edf3] rounded-xl font-mono text-sm leading-relaxed overflow-x-auto;
|
|
}
|
|
|
|
.dot-grid {
|
|
background-image: radial-gradient(circle, #003399 0.6px, transparent 0.6px);
|
|
background-size: 24px 24px;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.animate-on-scroll {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
transition: opacity 0.65s ease-out, transform 0.65s ease-out;
|
|
}
|
|
|
|
.animate-on-scroll.is-visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|