| @import "tailwindcss"; |
| @import "tw-animate-css"; |
| @import "shadcn/tailwind.css"; |
| @import "@fontsource-variable/geist"; |
|
|
| @custom-variant dark (&:is(.dark *)); |
|
|
| @theme inline { |
| --font-heading: var(--font-sans); |
| --font-sans: 'Geist Variable', sans-serif; |
| --color-sidebar-ring: var(--sidebar-ring); |
| --color-sidebar-border: var(--sidebar-border); |
| --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); |
| --color-sidebar-accent: var(--sidebar-accent); |
| --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); |
| --color-sidebar-primary: var(--sidebar-primary); |
| --color-sidebar-foreground: var(--sidebar-foreground); |
| --color-sidebar: var(--sidebar); |
| --color-chart-5: var(--chart-5); |
| --color-chart-4: var(--chart-4); |
| --color-chart-3: var(--chart-3); |
| --color-chart-2: var(--chart-2); |
| --color-chart-1: var(--chart-1); |
| --color-ring: var(--ring); |
| --color-input: var(--input); |
| --color-border: var(--border); |
| --color-destructive: var(--destructive); |
| --color-accent-foreground: var(--accent-foreground); |
| --color-accent: var(--accent); |
| --color-muted-foreground: var(--muted-foreground); |
| --color-muted: var(--muted); |
| --color-secondary-foreground: var(--secondary-foreground); |
| --color-secondary: var(--secondary); |
| --color-primary-foreground: var(--primary-foreground); |
| --color-primary: var(--primary); |
| --color-popover-foreground: var(--popover-foreground); |
| --color-popover: var(--popover); |
| --color-card-foreground: var(--card-foreground); |
| --color-card: var(--card); |
| --color-foreground: var(--foreground); |
| --color-background: var(--background); |
| --radius-sm: calc(var(--radius) * 0.6); |
| --radius-md: calc(var(--radius) * 0.8); |
| --radius-lg: var(--radius); |
| --radius-xl: calc(var(--radius) * 1.4); |
| --radius-2xl: calc(var(--radius) * 1.8); |
| --radius-3xl: calc(var(--radius) * 2.2); |
| --radius-4xl: calc(var(--radius) * 2.6); |
| --color-brand: var(--brand); |
| --color-brand-foreground: var(--brand-foreground); |
| --color-destructive-foreground: var(--destructive-foreground); |
| --color-success: var(--success); |
| --color-success-foreground: var(--success-foreground); |
| --color-success-muted: var(--success-muted); |
| --color-warning: var(--warning); |
| --color-warning-foreground: var(--warning-foreground); |
| --color-warning-muted: var(--warning-muted); |
| --color-info: var(--info); |
| --color-info-foreground: var(--info-foreground); |
| --color-info-muted: var(--info-muted); |
| --color-json-key: var(--json-key); |
| --color-json-string: var(--json-string); |
| --color-json-number: var(--json-number); |
| --color-json-boolean: var(--json-boolean); |
| --color-logo-background: var(--logo-background); |
| } |
|
|
| :root, |
| html[data-theme="porcelain-moss"] { |
| --background: oklch(0.966 0.007 155); |
| --foreground: oklch(0.245 0.018 155); |
| --card: oklch(0.992 0.004 155); |
| --card-foreground: oklch(0.245 0.018 155); |
| --popover: oklch(0.992 0.004 155); |
| --popover-foreground: oklch(0.245 0.018 155); |
| --primary: oklch(0.55 0.12 148); |
| --primary-foreground: oklch(0.982 0.006 155); |
| --secondary: oklch(0.925 0.011 155); |
| --secondary-foreground: oklch(0.31 0.02 155); |
| --muted: oklch(0.918 0.011 155); |
| --muted-foreground: oklch(0.49 0.018 155); |
| --accent: oklch(0.888 0.027 142); |
| --accent-foreground: oklch(0.265 0.024 155); |
| --destructive: oklch(0.58 0.17 26); |
| --destructive-foreground: oklch(0.982 0.006 155); |
| --border: oklch(0.835 0.012 155); |
| --input: oklch(0.895 0.012 155); |
| --ring: oklch(0.6 0.12 148); |
| --chart-1: oklch(0.58 0.12 148); |
| --chart-2: oklch(0.58 0.095 205); |
| --chart-3: oklch(0.66 0.12 78); |
| --chart-4: oklch(0.59 0.15 26); |
| --chart-5: oklch(0.54 0.09 285); |
| --radius: 0.5rem; |
| --sidebar: oklch(0.92 0.015 155); |
| --sidebar-foreground: oklch(0.34 0.02 155); |
| --sidebar-primary: oklch(0.55 0.12 148); |
| --sidebar-primary-foreground: oklch(0.982 0.006 155); |
| --sidebar-accent: oklch(0.855 0.03 142); |
| --sidebar-accent-foreground: oklch(0.25 0.024 155); |
| --sidebar-border: oklch(0.82 0.012 155); |
| --sidebar-ring: oklch(0.6 0.12 148); |
| --brand: oklch(0.55 0.12 148); |
| --brand-foreground: oklch(0.982 0.006 155); |
| --success: oklch(0.52 0.115 152); |
| --success-foreground: oklch(0.982 0.006 155); |
| --success-muted: oklch(0.902 0.04 152); |
| --warning: oklch(0.64 0.13 76); |
| --warning-foreground: oklch(0.255 0.02 155); |
| --warning-muted: oklch(0.914 0.04 76); |
| --info: oklch(0.54 0.095 205); |
| --info-foreground: oklch(0.982 0.006 155); |
| --info-muted: oklch(0.9 0.03 205); |
| --json-key: oklch(0.42 0.095 205); |
| --json-string: oklch(0.42 0.105 152); |
| --json-number: oklch(0.48 0.105 76); |
| --json-boolean: oklch(0.45 0.1 285); |
| --logo-background: oklch(0.22 0.025 160); |
| --logo-start: oklch(0.68 0.125 152); |
| --logo-end: oklch(0.62 0.105 205); |
| --logo-highlight: oklch(0.72 0.13 126); |
| } |
|
|
| html[data-theme="tungsten-dark"], |
| .dark { |
| --background: oklch(0.145 0.011 165); |
| --foreground: oklch(0.91 0.014 145); |
| --card: oklch(0.19 0.011 165); |
| --card-foreground: oklch(0.91 0.014 145); |
| --popover: oklch(0.18 0.012 165); |
| --popover-foreground: oklch(0.91 0.014 145); |
| --primary: oklch(0.79 0.145 127); |
| --primary-foreground: oklch(0.17 0.035 150); |
| --secondary: oklch(0.245 0.013 165); |
| --secondary-foreground: oklch(0.9 0.012 145); |
| --muted: oklch(0.235 0.012 165); |
| --muted-foreground: oklch(0.67 0.018 155); |
| --accent: oklch(0.275 0.03 145); |
| --accent-foreground: oklch(0.92 0.014 135); |
| --destructive: oklch(0.68 0.16 24); |
| --destructive-foreground: oklch(0.94 0.018 35); |
| --border: oklch(0.315 0.014 165 / 70%); |
| --input: oklch(0.29 0.014 165); |
| --ring: oklch(0.79 0.145 127); |
| --chart-1: oklch(0.79 0.145 127); |
| --chart-2: oklch(0.72 0.105 200); |
| --chart-3: oklch(0.76 0.12 78); |
| --chart-4: oklch(0.68 0.16 24); |
| --chart-5: oklch(0.69 0.105 292); |
| --radius: 0.5rem; |
| --sidebar: oklch(0.115 0.012 165); |
| --sidebar-foreground: oklch(0.79 0.016 150); |
| --sidebar-primary: oklch(0.79 0.145 127); |
| --sidebar-primary-foreground: oklch(0.17 0.035 150); |
| --sidebar-accent: oklch(0.255 0.033 145); |
| --sidebar-accent-foreground: oklch(0.93 0.015 135); |
| --sidebar-border: oklch(0.255 0.014 165); |
| --sidebar-ring: oklch(0.79 0.145 127); |
| --brand: oklch(0.79 0.145 127); |
| --brand-foreground: oklch(0.17 0.035 150); |
| --success: oklch(0.74 0.13 155); |
| --success-foreground: oklch(0.16 0.03 150); |
| --success-muted: oklch(0.25 0.045 155); |
| --warning: oklch(0.77 0.125 78); |
| --warning-foreground: oklch(0.18 0.03 80); |
| --warning-muted: oklch(0.255 0.04 80); |
| --info: oklch(0.73 0.105 205); |
| --info-foreground: oklch(0.15 0.025 205); |
| --info-muted: oklch(0.245 0.038 205); |
| --json-key: oklch(0.76 0.1 205); |
| --json-string: oklch(0.77 0.12 150); |
| --json-number: oklch(0.78 0.12 78); |
| --json-boolean: oklch(0.75 0.105 292); |
| --logo-background: oklch(0.15 0.02 165); |
| --logo-start: oklch(0.84 0.12 150); |
| --logo-end: oklch(0.72 0.11 205); |
| --logo-highlight: oklch(0.86 0.145 127); |
| } |
|
|
| @layer base { |
| * { |
| @apply border-border outline-ring/50; |
| } |
| body { |
| @apply bg-background text-foreground antialiased; |
| } |
| html { |
| @apply font-sans; |
| } |
| } |
|
|
| @keyframes admin-route-enter { |
| from { |
| opacity: 0.35; |
| transform: translateY(6px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| @keyframes login-page-enter { |
| from { |
| opacity: 0; |
| } |
| to { |
| opacity: 1; |
| } |
| } |
|
|
| @keyframes login-brand-enter { |
| from { |
| opacity: 0; |
| transform: translateY(18px) scale(0.94); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0) scale(1); |
| } |
| } |
|
|
| @keyframes login-card-enter { |
| from { |
| opacity: 0; |
| transform: translateY(24px) scale(0.96); |
| filter: blur(5px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| filter: blur(0); |
| } |
| } |
|
|
| @keyframes login-panel-exit { |
| from { |
| opacity: 1; |
| transform: translateY(0) scale(1); |
| filter: blur(0); |
| } |
| to { |
| opacity: 0; |
| transform: translateY(-18px) scale(0.975); |
| filter: blur(6px); |
| } |
| } |
|
|
| @keyframes login-bridge-enter { |
| from { |
| opacity: 0; |
| transform: scale(0.98); |
| } |
| to { |
| opacity: 1; |
| transform: scale(1); |
| } |
| } |
|
|
| @keyframes login-bridge-mark-enter { |
| from { |
| opacity: 0; |
| transform: translateY(16px) scale(0.86); |
| filter: blur(6px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0) scale(1); |
| filter: blur(0); |
| } |
| } |
|
|
| @keyframes login-bridge-copy-enter { |
| from { |
| opacity: 0; |
| transform: translateY(10px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| @keyframes login-bridge-progress { |
| from { |
| transform: translateX(-105%); |
| } |
| to { |
| transform: translateX(125%); |
| } |
| } |
|
|
| @keyframes login-error-enter { |
| from { |
| opacity: 0; |
| transform: translateY(-4px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| @keyframes admin-shell-enter { |
| from { |
| opacity: 0.65; |
| } |
| to { |
| opacity: 1; |
| } |
| } |
|
|
| .login-page-shell { |
| animation: login-page-enter 280ms cubic-bezier(0.16, 1, 0.3, 1); |
| } |
|
|
| .login-brand { |
| animation: login-brand-enter 520ms cubic-bezier(0.16, 1, 0.3, 1); |
| } |
|
|
| .login-panel-layer { |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .login-card { |
| animation: login-card-enter 560ms cubic-bezier(0.16, 1, 0.3, 1); |
| transition: |
| border-color 220ms cubic-bezier(0.16, 1, 0.3, 1), |
| box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1), |
| transform 220ms cubic-bezier(0.16, 1, 0.3, 1); |
| will-change: transform, opacity; |
| } |
|
|
| .login-card:focus-within { |
| border-color: color-mix(in oklch, var(--primary) 34%, var(--border)); |
| box-shadow: 0 18px 45px color-mix(in oklch, var(--foreground) 8%, transparent); |
| transform: translateY(-1px); |
| } |
|
|
| .login-card-bridge { |
| border-color: color-mix(in oklch, var(--success) 42%, var(--border)); |
| } |
|
|
| .login-panel-exit { |
| animation: login-panel-exit 320ms cubic-bezier(0.16, 1, 0.3, 1) forwards; |
| } |
|
|
| .login-error { |
| animation: login-error-enter 180ms cubic-bezier(0.22, 1, 0.36, 1); |
| } |
|
|
| .login-bridge-page { |
| position: absolute; |
| inset: 0; |
| z-index: 2; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| overflow: hidden; |
| padding: 2rem; |
| background: |
| radial-gradient(circle at 50% 42%, color-mix(in oklch, var(--primary) 18%, transparent), transparent 32%), |
| var(--background); |
| animation: login-bridge-enter 420ms cubic-bezier(0.16, 1, 0.3, 1); |
| } |
|
|
| .login-bridge-mark { |
| animation: login-bridge-mark-enter 520ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both; |
| border-radius: var(--radius-xl); |
| box-shadow: 0 24px 70px color-mix(in oklch, var(--primary) 20%, transparent); |
| } |
|
|
| .login-bridge-copy { |
| margin-top: 1rem; |
| text-align: center; |
| animation: login-bridge-copy-enter 420ms cubic-bezier(0.16, 1, 0.3, 1) 160ms both; |
| } |
|
|
| .login-bridge-progress { |
| position: relative; |
| width: min(12rem, 58vw); |
| height: 0.375rem; |
| margin-top: 1.5rem; |
| overflow: hidden; |
| border-radius: 999px; |
| background: color-mix(in oklch, var(--primary) 14%, var(--muted)); |
| } |
|
|
| .login-bridge-progress span { |
| display: block; |
| width: 46%; |
| height: 100%; |
| border-radius: inherit; |
| background: var(--primary); |
| animation: login-bridge-progress 760ms cubic-bezier(0.22, 1, 0.36, 1) both; |
| } |
|
|
| .admin-route-content { |
| animation: admin-route-enter 180ms cubic-bezier(0.22, 1, 0.36, 1); |
| } |
|
|
| .admin-shell-enter { |
| animation: admin-shell-enter 220ms cubic-bezier(0.22, 1, 0.36, 1); |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| .login-page-shell, |
| .login-brand, |
| .login-panel-exit, |
| .login-card, |
| .login-card-bridge, |
| .login-bridge-page, |
| .login-bridge-mark, |
| .login-bridge-copy, |
| .login-bridge-progress span, |
| .login-error, |
| .admin-shell-enter, |
| .admin-route-content { |
| animation: none; |
| transition-duration: 0.01ms; |
| } |
| } |
|
|
