114 lines
3.2 KiB
CSS
114 lines
3.2 KiB
CSS
@import 'tailwindcss';
|
|
@plugin '@tailwindcss/forms';
|
|
@plugin '@tailwindcss/typography';
|
|
|
|
@theme {
|
|
--font-display: "Orbitron", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
|
|
--font-sans: "Rajdhani", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
|
|
--font-mono: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
|
|
--color-bg: #0b0f17;
|
|
--color-surface: #0f172a; /* slate-900 */
|
|
--color-muted: #94a3b8; /* slate-400 */
|
|
--color-neon: #22d3ee; /* cyan-400 */
|
|
--color-neon-fuchsia: #ff00e5;
|
|
--color-acid: #a3ff12;
|
|
--color-accent: #00ffd1;
|
|
--color-danger: #ff3b81;
|
|
}
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
@apply bg-bg text-white/90 antialiased;
|
|
}
|
|
|
|
p a {
|
|
color: var(--color-neon);
|
|
text-decoration: underline;
|
|
text-decoration-color: rgba(34, 211, 238, 0.4);
|
|
transition: color 0.2s ease, text-decoration-color 0.2s ease;
|
|
}
|
|
|
|
p a:hover {
|
|
color: color-mix(in srgb, var(--color-neon) 80%, white 20%);
|
|
text-decoration-color: rgba(34, 211, 238, 0.85);
|
|
}
|
|
|
|
/* Utilities */
|
|
@utility btn-neon {
|
|
@apply inline-flex items-center gap-2 rounded-md border border-neon/60 px-4 py-2 text-neon transition hover:border-neon hover:text-white focus:outline-none focus:ring-2 focus:ring-neon/50;
|
|
box-shadow: 0 0 12px rgba(34, 211, 238, 0.30);
|
|
}
|
|
|
|
.btn-neon:hover {
|
|
box-shadow: 0 0 24px rgba(34, 211, 238, 0.60);
|
|
}
|
|
|
|
@utility card-surface {
|
|
@apply rounded-xl bg-surface/60 ring-1 ring-white/10 backdrop-blur-md shadow-[0_0_30px_rgba(34,211,238,0.06)] hover:shadow-[0_0_45px_rgba(255,0,229,0.10)] transition;
|
|
}
|
|
|
|
@utility neon-text {
|
|
@apply text-transparent bg-clip-text bg-gradient-to-r from-neon via-accent to-neon-fuchsia;
|
|
}
|
|
|
|
input[type='checkbox'] {
|
|
appearance: none;
|
|
width: 1.05rem;
|
|
height: 1.05rem;
|
|
border-radius: 0.35rem;
|
|
border: 1px solid rgba(148, 163, 184, 0.35);
|
|
background-color: rgba(15, 23, 42, 0.85);
|
|
display: grid;
|
|
place-content: center;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type='checkbox']::after {
|
|
content: '';
|
|
width: 0.55rem;
|
|
height: 0.55rem;
|
|
clip-path: polygon(14% 44%, 0 60%, 43% 100%, 100% 16%, 86% 0, 40% 64%);
|
|
background-color: transparent;
|
|
transform: scale(0.4) rotate(6deg);
|
|
opacity: 0;
|
|
transition: opacity 0.12s ease, transform 0.12s ease, background-color 0.12s ease;
|
|
}
|
|
|
|
input[type='checkbox']:hover {
|
|
border-color: rgba(94, 234, 212, 0.4);
|
|
}
|
|
|
|
input[type='checkbox']:focus-visible {
|
|
outline: none;
|
|
border-color: rgba(94, 234, 212, 0.6);
|
|
box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.25);
|
|
}
|
|
|
|
input[type='checkbox']:checked {
|
|
border-color: rgba(34, 211, 238, 0.8);
|
|
background-color: rgba(34, 211, 238, 0.18);
|
|
box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.2);
|
|
}
|
|
|
|
input[type='checkbox']:checked::after {
|
|
background-color: var(--color-neon);
|
|
opacity: 1;
|
|
transform: scale(1) rotate(0deg);
|
|
}
|
|
|
|
input[type='checkbox']:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.55;
|
|
box-shadow: none;
|
|
border-color: rgba(148, 163, 184, 0.2);
|
|
}
|