74 lines
1.5 KiB
CSS
74 lines
1.5 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@theme inline {
|
|
--font-display:
|
|
var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;
|
|
--font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono:
|
|
var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, monospace;
|
|
}
|
|
|
|
@theme {
|
|
--color-obsidian: #040807;
|
|
--color-aurora: #34d399;
|
|
--color-crest: #d1fae5;
|
|
--color-ink: #f2faf6;
|
|
}
|
|
|
|
@utility container-page {
|
|
@apply mx-auto max-w-5xl px-6;
|
|
}
|
|
|
|
@utility panel {
|
|
@apply border border-white/12 bg-obsidian/55 backdrop-blur-md;
|
|
}
|
|
|
|
@utility btn-primary {
|
|
@apply border border-aurora bg-aurora px-5 py-2.5 text-obsidian transition-colors hover:border-crest hover:bg-crest;
|
|
}
|
|
|
|
@utility btn-ghost {
|
|
@apply border border-white/20 bg-obsidian/45 px-5 py-2.5 text-ink backdrop-blur-md transition-colors hover:border-aurora hover:text-aurora;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
scroll-padding-top: 4rem;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--color-aurora);
|
|
color: var(--color-obsidian);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 1px solid var(--color-aurora);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
@media (scripting: enabled) {
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
transition:
|
|
opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
|
|
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
|
transition-delay: var(--reveal-delay, 0ms);
|
|
}
|
|
|
|
.reveal[data-visible='true'] {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
.reveal {
|
|
opacity: 1;
|
|
transform: none;
|
|
transition: none;
|
|
}
|
|
}
|