161 lines
5.4 KiB
CSS
161 lines
5.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
html, body {
|
|
background: #0A0A0F;
|
|
color: #FFFFFF;
|
|
font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "PingFang SC", "Noto Sans SC", "Helvetica Neue", sans-serif;
|
|
background-color: #0A0A0F;
|
|
background-image:
|
|
radial-gradient(circle at 18% -10%, rgba(139, 92, 246, 0.22), transparent 55%),
|
|
radial-gradient(circle at 88% 8%, rgba(59, 130, 246, 0.18), transparent 50%),
|
|
radial-gradient(circle at 50% 110%, rgba(217, 70, 239, 0.12), transparent 60%);
|
|
background-attachment: fixed;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
::selection { background: rgba(139, 92, 246, 0.35); color: #fff; }
|
|
|
|
/* ===== Buttons ===== */
|
|
.btn {
|
|
@apply inline-flex items-center justify-center gap-1.5 px-4 py-2 rounded-xl text-sm font-medium transition-all;
|
|
}
|
|
.btn-primary {
|
|
@apply text-white bg-gradient-to-r from-violet-500 via-indigo-500 to-blue-500 hover:brightness-110 active:scale-[0.98];
|
|
box-shadow: 0 6px 24px -8px rgba(99, 102, 241, 0.6), inset 0 1px 0 rgba(255,255,255,0.18);
|
|
}
|
|
.btn-ghost {
|
|
@apply text-white/80 bg-white/[0.05] hover:bg-white/[0.09] border border-white/[0.08] active:scale-[0.98];
|
|
}
|
|
.btn-outline {
|
|
@apply text-white/80 bg-white/[0.03] hover:bg-white/[0.07] border border-white/[0.1] hover:border-white/[0.18] active:scale-[0.98];
|
|
}
|
|
.btn-glass {
|
|
@apply text-white bg-white/[0.06] hover:bg-white/[0.10] border border-white/[0.12] backdrop-blur-xl active:scale-[0.98];
|
|
}
|
|
|
|
/* ===== Cards (glass) ===== */
|
|
.card {
|
|
@apply relative rounded-3xl bg-white/[0.035] border border-white/[0.08] backdrop-blur-xl;
|
|
box-shadow:
|
|
0 1px 0 0 rgba(255,255,255,0.06) inset,
|
|
0 18px 60px -24px rgba(0,0,0,0.6);
|
|
}
|
|
.card-2 {
|
|
@apply rounded-2xl bg-white/[0.03] border border-white/[0.07] backdrop-blur-xl;
|
|
}
|
|
.card-hover {
|
|
@apply transition-all hover:border-white/[0.14];
|
|
}
|
|
|
|
/* ===== Chips ===== */
|
|
.chip {
|
|
@apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium border;
|
|
}
|
|
.chip-mock {
|
|
@apply bg-amber-500/10 text-amber-300 border-amber-400/30;
|
|
}
|
|
.chip-live {
|
|
@apply bg-emerald-500/10 text-emerald-300 border-emerald-400/30;
|
|
}
|
|
.chip-neutral {
|
|
@apply bg-white/[0.05] text-white/70 border-white/[0.12];
|
|
}
|
|
.chip-violet {
|
|
@apply bg-violet-500/15 text-violet-200 border-violet-400/30;
|
|
}
|
|
|
|
/* ===== Segmented ===== */
|
|
.seg {
|
|
@apply inline-flex p-1 bg-white/[0.04] border border-white/[0.07] rounded-xl gap-1;
|
|
}
|
|
.seg-item {
|
|
@apply px-3 py-1.5 rounded-lg text-xs font-medium text-white/55 transition-all cursor-pointer;
|
|
}
|
|
.seg-item-active {
|
|
@apply text-white;
|
|
background: linear-gradient(135deg, rgba(139,92,246,0.35), rgba(59,130,246,0.25));
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 16px -8px rgba(99,102,241,0.6);
|
|
}
|
|
|
|
/* ===== Tiles ===== */
|
|
.tile {
|
|
@apply relative aspect-square overflow-hidden rounded-2xl bg-white/[0.04] ring-1 ring-white/[0.08] transition-all cursor-pointer;
|
|
}
|
|
.tile-selected {
|
|
position: relative;
|
|
background: linear-gradient(#0A0A0F, #0A0A0F) padding-box, linear-gradient(135deg, #8B5CF6, #3B82F6) border-box;
|
|
border: 2px solid transparent;
|
|
box-shadow: 0 0 0 1px rgba(139,92,246,0.25), 0 8px 32px -8px rgba(139,92,246,0.55);
|
|
}
|
|
.tile-rejected {
|
|
@apply opacity-30 grayscale;
|
|
}
|
|
.tile-keynum {
|
|
@apply absolute top-2 left-2 w-7 h-7 rounded-lg bg-black/60 backdrop-blur text-[11px] font-semibold text-white/85 flex items-center justify-center ring-1 ring-white/10;
|
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
|
|
}
|
|
.tile-badge {
|
|
@apply absolute top-2 right-2 w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold;
|
|
box-shadow: 0 6px 18px -4px rgba(0,0,0,0.6);
|
|
}
|
|
.tile-badge-selected {
|
|
background: linear-gradient(135deg, #8B5CF6, #3B82F6);
|
|
color: #fff;
|
|
}
|
|
.tile-badge-rejected {
|
|
@apply bg-rose-500 text-white;
|
|
}
|
|
|
|
/* ===== Fields ===== */
|
|
input, textarea {
|
|
font-family: inherit;
|
|
}
|
|
.field {
|
|
@apply w-full rounded-xl px-3.5 py-3 text-sm text-white placeholder:text-white/30 outline-none resize-none transition-colors;
|
|
background: rgba(255,255,255,0.04);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
.field:focus {
|
|
border-color: rgba(139, 92, 246, 0.55);
|
|
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12);
|
|
}
|
|
|
|
/* ===== KBD ===== */
|
|
.kbd {
|
|
@apply inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded text-[10px] font-medium text-white/70 ring-1 ring-white/10 bg-white/[0.06];
|
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
|
|
}
|
|
|
|
/* ===== Section header ===== */
|
|
.section-eyebrow {
|
|
@apply inline-block text-[10px] font-semibold uppercase tracking-[0.18em] text-violet-300/80;
|
|
}
|
|
|
|
/* ===== Divider ===== */
|
|
.divider-line {
|
|
@apply h-px w-full;
|
|
background: linear-gradient(to right, transparent, rgba(255,255,255,0.10), transparent);
|
|
}
|
|
|
|
/* ===== Glow shadows ===== */
|
|
.shadow-glow-violet {
|
|
box-shadow: 0 0 0 1px rgba(139,92,246,0.2), 0 8px 32px -8px rgba(139,92,246,0.5);
|
|
}
|
|
.shadow-glow-blue {
|
|
box-shadow: 0 0 0 1px rgba(59,130,246,0.2), 0 8px 32px -8px rgba(59,130,246,0.45);
|
|
}
|
|
|
|
/* ===== Scrollbar (subtle) ===== */
|
|
::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 8px; }
|
|
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }
|