| @import "tailwindcss"; |
|
|
| @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap'); |
|
|
| :root { |
| |
| --color-primary: #4F46E5; |
| --color-on-primary: #FFFFFF; |
| --color-secondary: #818CF8; |
| --color-accent: #EA580C; |
| --color-background: #EEF2FF; |
| --color-foreground: #1E1B4B; |
| --color-muted: #EBEEF8; |
| --color-border: #C7D2FE; |
| --color-destructive: #DC2626; |
| --color-ring: #4F46E5; |
|
|
| |
| --color-success: #16A34A; |
| --color-warning: #F59E0B; |
| --color-info: #3B82F6; |
|
|
| |
| --shadow-clay-sm: 2px 2px 4px #C7D2FE, -2px -2px 4px #FFFFFF; |
| --shadow-clay-md: 4px 4px 8px #C7D2FE, -4px -4px 8px #FFFFFF; |
| --shadow-clay-lg: 8px 8px 16px #C7D2FE, -8px -8px 16px #FFFFFF; |
| --shadow-clay-inset: inset 2px 2px 4px #C7D2FE, inset -2px -2px 4px #FFFFFF; |
| --shadow-clay-press: inset 4px 4px 8px #C7D2FE, inset -4px -4px 8px #FFFFFF; |
|
|
| |
| --shadow-clay-dark-sm: 2px 2px 4px #1E1B4B, -2px -2px 4px #3730A3; |
| --shadow-clay-dark-md: 4px 4px 8px #1E1B4B, -4px -4px 8px #3730A3; |
| --shadow-clay-dark-lg: 8px 8px 16px #1E1B4B, -8px -8px 16px #3730A3; |
| --shadow-clay-dark-inset: inset 2px 2px 4px #1E1B4B, inset -2px -2px 4px #3730A3; |
| --shadow-clay-dark-press: inset 4px 4px 8px #1E1B4B, inset -4px -4px 8px #3730A3; |
|
|
| |
| --font-sans: 'Fira Sans', system-ui, sans-serif; |
| --font-mono: 'Fira Code', monospace; |
| --font-base: 1rem; |
| --leading-normal: 1.5; |
|
|
| |
| --space-1: 0.25rem; |
| --space-2: 0.5rem; |
| --space-3: 0.75rem; |
| --space-4: 1rem; |
| --space-5: 1.25rem; |
| --space-6: 1.5rem; |
| --space-8: 2rem; |
| --space-10: 2.5rem; |
| --space-12: 3rem; |
| --space-16: 4rem; |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| :root { |
| |
| --color-primary: #818CF8; |
| --color-on-primary: #1E1B4B; |
| --color-secondary: #A5B4FC; |
| --color-accent: #FB923C; |
| --color-background: #1E1B4B; |
| --color-foreground: #EEF2FF; |
| --color-muted: #312E81; |
| --color-border: #3730A3; |
| --color-destructive: #EF4444; |
| --color-ring: #818CF8; |
|
|
| --color-success: #22C55E; |
| --color-warning: #FBBF24; |
| --color-info: #60A5FA; |
| } |
| } |
|
|
| @theme inline { |
| --color-background: var(--color-background); |
| --color-foreground: var(--color-foreground); |
| --color-primary: var(--color-primary); |
| --color-on-primary: var(--color-on-primary); |
| --color-secondary: var(--color-secondary); |
| --color-accent: var(--color-accent); |
| --color-muted: var(--color-muted); |
| --color-border: var(--color-border); |
| --color-destructive: var(--color-destructive); |
| --color-ring: var(--color-ring); |
| --font-sans: var(--font-sans); |
| --font-mono: var(--font-mono); |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html { |
| font-family: var(--font-sans); |
| font-size: var(--font-base); |
| line-height: var(--leading-normal); |
| } |
|
|
| body { |
| background: var(--color-background); |
| color: var(--color-foreground); |
| font-family: var(--font-sans); |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
|
|
| |
| .clay-card { |
| background: var(--color-background); |
| border: 2px solid var(--color-border); |
| border-radius: 16px; |
| box-shadow: var(--shadow-clay-md); |
| transition: box-shadow 200ms ease-out, transform 150ms ease-out; |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .clay-card { |
| box-shadow: var(--shadow-clay-dark-md); |
| } |
| } |
|
|
| .clay-card:hover { |
| box-shadow: var(--shadow-clay-lg); |
| transform: translateY(-2px); |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .clay-card:hover { |
| box-shadow: var(--shadow-clay-dark-lg); |
| } |
| } |
|
|
| .clay-card:active { |
| box-shadow: var(--shadow-clay-press); |
| transform: translateY(0); |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .clay-card:active { |
| box-shadow: var(--shadow-clay-dark-press); |
| } |
| } |
|
|
| .clay-button { |
| background: var(--color-background); |
| border: 2px solid var(--color-border); |
| border-radius: 12px; |
| box-shadow: var(--shadow-clay-sm); |
| color: var(--color-foreground); |
| font-family: var(--font-sans); |
| font-weight: 500; |
| transition: all 150ms ease-out; |
| cursor: pointer; |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .clay-button { |
| box-shadow: var(--shadow-clay-dark-sm); |
| } |
| } |
|
|
| .clay-button:hover { |
| box-shadow: var(--shadow-clay-md); |
| transform: translateY(-1px); |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .clay-button:hover { |
| box-shadow: var(--shadow-clay-dark-md); |
| } |
| } |
|
|
| .clay-button:active { |
| box-shadow: var(--shadow-clay-press); |
| transform: translateY(0); |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .clay-button:active { |
| box-shadow: var(--shadow-clay-dark-press); |
| } |
| } |
|
|
| .clay-button-primary { |
| background: var(--color-primary); |
| border: 2px solid var(--color-primary); |
| color: var(--color-on-primary); |
| box-shadow: var(--shadow-clay-sm); |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .clay-button-primary { |
| box-shadow: var(--shadow-clay-dark-sm); |
| } |
| } |
|
|
| .clay-button-primary:hover { |
| box-shadow: var(--shadow-clay-md); |
| filter: brightness(1.1); |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .clay-button-primary:hover { |
| box-shadow: var(--shadow-clay-dark-md); |
| } |
| } |
|
|
| .clay-button-primary:active { |
| box-shadow: var(--shadow-clay-press); |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .clay-button-primary:active { |
| box-shadow: var(--shadow-clay-dark-press); |
| } |
| } |
|
|
| .clay-button-accent { |
| background: var(--color-accent); |
| border: 2px solid var(--color-accent); |
| color: #FFFFFF; |
| box-shadow: var(--shadow-clay-sm); |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .clay-button-accent { |
| box-shadow: var(--shadow-clay-dark-sm); |
| } |
| } |
|
|
| .clay-button-accent:hover { |
| box-shadow: var(--shadow-clay-md); |
| filter: brightness(1.1); |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .clay-button-accent:hover { |
| box-shadow: var(--shadow-clay-dark-md); |
| } |
| } |
|
|
| .clay-button-accent:active { |
| box-shadow: var(--shadow-clay-press); |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .clay-button-accent:active { |
| box-shadow: var(--shadow-clay-dark-press); |
| } |
| } |
|
|
| .clay-input { |
| background: var(--color-muted); |
| border: 2px solid var(--color-border); |
| border-radius: 10px; |
| color: var(--color-foreground); |
| font-family: var(--font-mono); |
| padding: 0.5rem 0.75rem; |
| box-shadow: var(--shadow-clay-inset); |
| transition: all 150ms ease-out; |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .clay-input { |
| box-shadow: var(--shadow-clay-dark-inset); |
| } |
| } |
|
|
| .clay-input:focus { |
| outline: none; |
| border-color: var(--color-primary); |
| box-shadow: var(--shadow-clay-inset), 0 0 0 3px var(--color-ring); |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .clay-input:focus { |
| box-shadow: var(--shadow-clay-dark-inset), 0 0 0 3px var(--color-ring); |
| } |
| } |
|
|
| .clay-slider { |
| -webkit-appearance: none; |
| appearance: none; |
| background: var(--color-muted); |
| border-radius: 9999px; |
| height: 8px; |
| outline: none; |
| } |
|
|
| .clay-slider::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| appearance: none; |
| width: 20px; |
| height: 20px; |
| border-radius: 50%; |
| background: var(--color-primary); |
| cursor: pointer; |
| border: 3px solid var(--color-background); |
| box-shadow: var(--shadow-clay-sm); |
| transition: all 150ms ease-out; |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .clay-slider::-webkit-slider-thumb { |
| box-shadow: var(--shadow-clay-dark-sm); |
| } |
| } |
|
|
| .clay-slider::-webkit-slider-thumb:hover { |
| transform: scale(1.15); |
| box-shadow: var(--shadow-clay-md); |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .clay-slider::-webkit-slider-thumb:hover { |
| box-shadow: var(--shadow-clay-dark-md); |
| } |
| } |
|
|
| .clay-slider::-moz-range-thumb { |
| width: 20px; |
| height: 20px; |
| border-radius: 50%; |
| background: var(--color-primary); |
| cursor: pointer; |
| border: 3px solid var(--color-background); |
| box-shadow: var(--shadow-clay-sm); |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .clay-slider::-moz-range-thumb { |
| box-shadow: var(--shadow-clay-dark-sm); |
| } |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: var(--color-border); |
| border-radius: 4px; |
| border: 2px solid var(--color-background); |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| ::-webkit-scrollbar-thumb { |
| border: 2px solid var(--color-background); |
| } |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--color-primary); |
| } |
|
|
| |
| :focus-visible { |
| outline: 2px solid var(--color-ring); |
| outline-offset: 2px; |
| } |
|
|
| |
| @keyframes slide-in { |
| from { |
| opacity: 0; |
| transform: translateY(10px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| @keyframes fade-in { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
|
|
| @keyframes scale-in { |
| from { opacity: 0; transform: scale(0.95); } |
| to { opacity: 1; transform: scale(1); } |
| } |
|
|
| @keyframes pulse-soft { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.7; } |
| } |
|
|
| .animate-slide-in { |
| animation: slide-in 0.3s ease-out; |
| } |
|
|
| .animate-fade-in { |
| animation: fade-in 0.2s ease-out; |
| } |
|
|
| .animate-scale-in { |
| animation: scale-in 0.2s ease-out; |
| } |
|
|
| .animate-pulse-soft { |
| animation: pulse-soft 2s ease-in-out infinite; |
| } |
|
|
| |
| canvas { |
| display: block; |
| } |
|
|
| |
| ::selection { |
| background: var(--color-primary); |
| color: var(--color-on-primary); |
| } |
|
|
| |
| @media (prefers-reduced-motion: reduce) { |
| *, |
| *::before, |
| *::after { |
| animation-duration: 0.01ms !important; |
| animation-iteration-count: 1 !important; |
| transition-duration: 0.01ms !important; |
| scroll-behavior: auto !important; |
| } |
| } |
|
|
| |
| input[type="number"].clay-number { |
| -webkit-appearance: none; |
| appearance: none; |
| } |
|
|
| input[type="number"].clay-number::-webkit-inner-spin-button, |
| input[type="number"].clay-number::-webkit-outer-spin-button { |
| -webkit-appearance: none; |
| appearance: none; |
| margin: 0; |
| width: 20px; |
| height: 20px; |
| background: var(--color-muted); |
| border: 2px solid var(--color-border); |
| border-radius: 8px; |
| color: var(--color-primary); |
| font-family: var(--font-mono); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| input[type="number"].clay-number::-webkit-inner-spin-button, |
| input[type="number"].clay-number::-webkit-outer-spin-button { |
| background: var(--color-muted); |
| border-color: var(--color-border); |
| } |
| } |
|
|
| |
| .tooltip { |
| position: relative; |
| } |
|
|
| .tooltip::before { |
| content: attr(data-tooltip); |
| position: absolute; |
| bottom: 100%; |
| left: 50%; |
| transform: translateX(-50%); |
| padding: 0.5rem 0.75rem; |
| background: var(--color-foreground); |
| color: var(--color-background); |
| font-size: 0.75rem; |
| font-family: var(--font-sans); |
| border-radius: 8px; |
| white-space: nowrap; |
| opacity: 0; |
| visibility: hidden; |
| transition: all 200ms ease-out; |
| pointer-events: none; |
| z-index: 50; |
| margin-bottom: 0.5rem; |
| box-shadow: var(--shadow-clay-lg); |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .tooltip::before { |
| box-shadow: var(--shadow-clay-dark-lg); |
| } |
| } |
|
|
| .tooltip:hover::before, |
| .tooltip:focus-within::before { |
| opacity: 1; |
| visibility: visible; |
| } |
|
|
| |
| .badge { |
| display: inline-flex; |
| align-items: center; |
| padding: 0.25rem 0.5rem; |
| font-size: 0.7rem; |
| font-weight: 600; |
| border-radius: 9999px; |
| font-family: var(--font-sans); |
| } |
|
|
| .badge-primary { |
| background: var(--color-primary); |
| color: var(--color-on-primary); |
| } |
|
|
| .badge-secondary { |
| background: var(--color-secondary); |
| color: var(--color-on-primary); |
| } |
|
|
| .badge-accent { |
| background: var(--color-accent); |
| color: white; |
| } |
|
|
| .badge-muted { |
| background: var(--color-muted); |
| color: var(--color-foreground); |
| border: 1px solid var(--color-border); |
| } |
|
|
| .badge-outline { |
| background: transparent; |
| color: var(--color-foreground); |
| border: 1px solid var(--color-border); |
| } |
|
|
| |
| .card-header { |
| padding: var(--space-4) var(--space-4) var(--space-2); |
| border-bottom: 1px solid var(--color-border); |
| } |
|
|
| |
| .divider { |
| height: 1px; |
| background: var(--color-border); |
| border: none; |
| } |
|
|
| |
| .code-block { |
| background: var(--color-muted); |
| border: 1px solid var(--color-border); |
| border-radius: 10px; |
| padding: var(--space-4); |
| font-family: var(--font-mono); |
| font-size: 0.875rem; |
| overflow-x: auto; |
| box-shadow: var(--shadow-clay-inset); |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| .code-block { |
| box-shadow: var(--shadow-clay-dark-inset); |
| } |
| } |
|
|
| |
| .spinner { |
| width: 32px; |
| height: 32px; |
| border: 3px solid var(--color-border); |
| border-top-color: var(--color-primary); |
| border-radius: 50%; |
| animation: spin 0.8s linear infinite; |
| } |
|
|
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
