| @tailwind base; |
| @tailwind components; |
| @tailwind utilities; |
|
|
| @layer base { |
| :root { |
| color-scheme: light; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| } |
|
|
| body { |
| margin: 0; |
| min-height: 100vh; |
| color: #0f172a; |
| background: #f4faff; |
| -webkit-font-smoothing: antialiased; |
| text-rendering: optimizeLegibility; |
| } |
|
|
| ::selection { |
| background-color: rgba(45, 212, 191, 0.32); |
| color: #0f172a; |
| } |
| } |
|
|
| @layer components { |
| .studio-page-bg { |
| @apply min-h-screen antialiased; |
| background-color: #f4faff; |
| background-image: radial-gradient( |
| ellipse 90% 68% at 50% -24%, |
| rgba(45, 212, 191, 0.18), |
| transparent 56% |
| ), |
| radial-gradient(circle at 14% 8%, rgba(56, 189, 248, 0.14), transparent 32%), |
| radial-gradient(circle at 88% 16%, rgba(251, 191, 36, 0.14), transparent 32%), |
| linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(241, 249, 255, 0.94) 44%, rgba(236, 246, 255, 1) 100%), |
| linear-gradient(rgba(148, 163, 184, 0.14) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(148, 163, 184, 0.14) 1px, transparent 1px); |
| background-size: auto, auto, auto, auto, 54px 54px, 54px 54px; |
| background-attachment: scroll; |
| } |
|
|
| .studio-shell { |
| @apply mx-auto w-full max-w-6xl px-4 sm:px-6; |
| } |
|
|
| .studio-header { |
| @apply relative z-20; |
| border-bottom: 1px solid rgba(45, 212, 191, 0.28); |
| background: rgba(248, 253, 255, 0.82); |
| backdrop-filter: blur(18px); |
| box-shadow: 0 18px 38px -30px rgba(15, 23, 42, 0.25); |
| } |
|
|
| .studio-hero-panel { |
| @apply relative flex flex-col gap-4 overflow-hidden rounded-[24px] border p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5; |
| border-color: rgba(45, 212, 191, 0.34); |
| background: linear-gradient(140deg, rgba(238, 252, 255, 0.95) 0%, rgba(229, 247, 255, 0.92) 48%, rgba(243, 251, 255, 0.95) 100%); |
| box-shadow: 0 24px 48px -32px rgba(15, 23, 42, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.85); |
| } |
|
|
| .studio-hero-panel::before { |
| content: ''; |
| @apply pointer-events-none absolute inset-0; |
| background: radial-gradient(circle at 85% 18%, rgba(80, 227, 194, 0.17), transparent 32%), |
| radial-gradient(circle at 16% 78%, rgba(255, 126, 185, 0.15), transparent 34%); |
| } |
|
|
| .studio-kicker { |
| @apply inline-flex w-fit items-center rounded-full border px-3.5 py-1 text-[0.67rem] font-semibold uppercase tracking-[0.2em]; |
| border-color: rgba(45, 212, 191, 0.42); |
| background-color: rgba(45, 212, 191, 0.16); |
| color: #0b766b; |
| } |
|
|
| .studio-health-grid { |
| @apply grid grid-cols-2 gap-2.5 sm:min-w-[260px]; |
| } |
|
|
| .studio-status-chip { |
| @apply inline-flex items-center gap-1.5 rounded-xl border px-3 py-1.5 text-[0.7rem] font-medium; |
| border-color: rgba(56, 189, 248, 0.3); |
| background-color: rgba(255, 255, 255, 0.82); |
| color: #0f172a; |
| } |
|
|
| .studio-status-chip-ok { |
| border-color: rgba(16, 185, 129, 0.45); |
| background-color: rgba(16, 185, 129, 0.14); |
| } |
|
|
| .studio-status-chip-warn { |
| border-color: rgba(245, 158, 11, 0.45); |
| background-color: rgba(245, 158, 11, 0.12); |
| color: #92400e; |
| } |
|
|
| .studio-status-chip-error { |
| border-color: rgba(239, 68, 68, 0.45); |
| background-color: rgba(239, 68, 68, 0.12); |
| color: #b91c1c; |
| } |
|
|
| .studio-status-chip-muted { |
| opacity: 0.78; |
| } |
|
|
| .studio-card { |
| @apply relative overflow-hidden rounded-[28px] border; |
| border-color: rgba(56, 189, 248, 0.24); |
| background: linear-gradient(152deg, rgba(255, 255, 255, 0.97) 0%, rgba(246, 252, 255, 0.97) 56%, rgba(239, 248, 255, 0.97) 100%); |
| box-shadow: 0 26px 42px -34px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(45, 212, 191, 0.1); |
| } |
|
|
| .studio-card > * { |
| @apply relative z-[1]; |
| } |
|
|
| .studio-card::before { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| border-radius: inherit; |
| padding: 1px; |
| background: linear-gradient(135deg, rgba(45, 212, 191, 0.48), rgba(56, 189, 248, 0.22) 42%, rgba(245, 158, 11, 0.2) 72%, transparent 100%); |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); |
| mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); |
| -webkit-mask-composite: xor; |
| mask-composite: exclude; |
| pointer-events: none; |
| } |
|
|
| .studio-card-inner { |
| @apply relative z-[1] p-6 sm:p-8; |
| } |
|
|
| .studio-step-title { |
| @apply flex flex-col gap-1.5 sm:flex-row sm:items-center sm:gap-4; |
| } |
|
|
| .studio-step-badge { |
| @apply flex h-10 w-10 shrink-0 items-center justify-center rounded-xl font-display text-sm font-bold tracking-tight text-white shadow-inner; |
| background: linear-gradient(145deg, rgba(45, 212, 191, 0.45), rgba(56, 189, 248, 0.34)); |
| box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.24), 0 14px 24px -20px rgba(56, 189, 248, 0.9); |
| } |
|
|
| .studio-label { |
| @apply text-[0.65rem] font-semibold uppercase tracking-[0.14em] text-slate-500; |
| } |
|
|
| .studio-input { |
| @apply mt-1.5 w-full rounded-xl border px-4 py-2.5 text-sm text-slate-800 transition; |
| border-color: rgba(56, 189, 248, 0.26); |
| background-color: rgba(255, 255, 255, 0.96); |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); |
| @apply placeholder:text-slate-400; |
| @apply focus:outline-none; |
| } |
|
|
| .studio-input:focus { |
| border-color: rgba(45, 212, 191, 0.64); |
| box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.2); |
| } |
|
|
| .studio-select { |
| @apply studio-input cursor-pointer appearance-none; |
| background-color: rgba(255, 255, 255, 0.98); |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2322d3ee'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); |
| background-repeat: no-repeat; |
| background-position: right 0.75rem center; |
| background-size: 1rem; |
| padding-right: 2.5rem; |
| } |
|
|
| .studio-import-panel { |
| @apply relative mt-6 rounded-2xl border p-5 sm:p-6; |
| border-color: rgba(45, 212, 191, 0.34); |
| background: linear-gradient(to bottom right, rgba(45, 212, 191, 0.11), rgba(255, 255, 255, 0.85) 72%); |
| box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.1), 0 16px 28px -24px rgba(15, 23, 42, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9); |
| } |
|
|
| .studio-btn-primary { |
| @apply inline-flex items-center justify-center rounded-xl px-6 py-3 text-sm font-semibold text-white transition; |
| background-image: linear-gradient(145deg, #14b8a6 0%, #06b6d4 52%, #f59e0b 100%); |
| box-shadow: 0 18px 36px -20px rgba(20, 184, 166, 0.8); |
| @apply hover:brightness-110 active:scale-[0.98] disabled:pointer-events-none disabled:opacity-45; |
| } |
|
|
| .studio-btn-secondary { |
| @apply inline-flex items-center justify-center rounded-xl border px-5 py-2.5 text-sm font-medium text-slate-700 transition; |
| border-color: rgba(56, 189, 248, 0.3); |
| background-color: rgba(255, 255, 255, 0.9); |
| @apply hover:border-cyan-300 hover:bg-cyan-50 active:scale-[0.98] disabled:opacity-45; |
| } |
|
|
| .studio-btn-ghost { |
| @apply text-xs font-medium text-slate-500 underline decoration-slate-400 underline-offset-4 transition hover:text-slate-700; |
| } |
|
|
| .studio-pill { |
| @apply inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-[0.7rem] font-medium tracking-wide shadow-sm; |
| border-color: rgba(56, 189, 248, 0.36); |
| background: rgba(255, 255, 255, 0.86); |
| color: #0f172a; |
| backdrop-filter: blur(5px); |
| } |
|
|
| .studio-progress-track { |
| @apply h-2 overflow-hidden rounded-full shadow-inner; |
| border: 1px solid rgba(56, 189, 248, 0.24); |
| background-color: rgba(207, 250, 254, 0.55); |
| } |
|
|
| .studio-progress-fill { |
| @apply h-full rounded-full shadow-sm; |
| background-image: linear-gradient(90deg, rgba(20, 184, 166, 0.9), rgba(56, 189, 248, 0.9)); |
| } |
|
|
| .studio-shot-card { |
| @apply relative rounded-xl border px-4 py-3.5 transition hover:border-slate-400; |
| border-color: rgba(56, 189, 248, 0.26); |
| background: rgba(255, 255, 255, 0.92); |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95); |
| } |
|
|
| .studio-shot-card::before { |
| content: ''; |
| @apply absolute left-0 top-3 bottom-3 w-0.5 rounded-full; |
| background-color: rgba(56, 189, 248, 0.54); |
| } |
|
|
| |
| .studio-page-bg .text-slate-900 { |
| color: #0f172a !important; |
| } |
|
|
| .studio-page-bg .text-slate-800 { |
| color: #1e293b !important; |
| } |
|
|
| .studio-page-bg .text-slate-700, |
| .studio-page-bg .text-slate-600 { |
| color: #334155 !important; |
| } |
|
|
| .studio-page-bg .text-slate-500 { |
| color: #64748b !important; |
| } |
|
|
| .studio-page-bg .text-accent { |
| color: #0f766e !important; |
| } |
|
|
| .studio-page-bg .text-accent\/80 { |
| color: rgba(15, 118, 110, 0.9) !important; |
| } |
|
|
| .studio-page-bg .text-accent-dim { |
| color: #14b8a6 !important; |
| } |
|
|
| .studio-page-bg .border-slate-200, |
| .studio-page-bg .border-slate-300, |
| .studio-page-bg .border-slate-400\/80 { |
| border-color: rgba(56, 189, 248, 0.3) !important; |
| } |
|
|
| .studio-page-bg .bg-white, |
| .studio-page-bg .bg-slate-50, |
| .studio-page-bg .bg-slate-100, |
| .studio-page-bg .bg-slate-100\/70 { |
| background-color: rgba(255, 255, 255, 0.92) !important; |
| } |
|
|
| .studio-page-bg .bg-accent\/\[0\.08\], |
| .studio-page-bg .bg-accent\/\[0\.1\], |
| .studio-page-bg .bg-accent\/\[0\.12\] { |
| background-color: rgba(20, 184, 166, 0.16) !important; |
| } |
|
|
| .studio-page-bg .bg-red-50 { |
| background-color: rgba(239, 68, 68, 0.14) !important; |
| } |
|
|
| .studio-page-bg .border-red-300 { |
| border-color: rgba(239, 68, 68, 0.36) !important; |
| } |
|
|
| .studio-page-bg .text-red-700 { |
| color: #ffb9b9 !important; |
| } |
|
|
| .studio-page-bg code { |
| background-color: rgba(226, 247, 255, 0.95) !important; |
| color: #0f172a !important; |
| } |
| } |
|
|
