Spaces:

userIdc2024
/

ProductShowcaseStudio

Sleeping

ProductShowcaseStudio / frontend /src /index.css

change the

c4f9173 6 months ago

9.76 kB

@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);
  }

  /* Theme compatibility for existing utility classes inside the flow component. */
  .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;
  }
}

	@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);
	}

	/* Theme compatibility for existing utility classes inside the flow component. */
	.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;
	}
	}