| @import "tailwindcss"; |
|
|
| :root { |
| --background: #f7f7f8; |
| --foreground: #111111; |
| --muted: #5b5b5b; |
| --subtle: #8a8a8a; |
| --border: rgba(17, 17, 17, 0.14); |
| --card: #ffffff; |
| --swiss-red: #d62839; |
| --swiss-red-deep: #a81f2d; |
| --swiss-red-soft: #fdeaea; |
| --green: #1a7a4a; |
| --green-soft: #d6efe4; |
| --yellow: #9a6400; |
| --yellow-soft: #fef3c7; |
|
|
| --radius: 8px; |
|
|
| --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.04), 0 10px 28px -18px rgba(17, 17, 17, 0.22); |
| --shadow-float: 0 2px 6px rgba(17, 17, 17, 0.05), 0 18px 42px -22px rgba(17, 17, 17, 0.28); |
| --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.7); |
| } |
|
|
| @theme inline { |
| --color-background: var(--background); |
| --color-foreground: var(--foreground); |
| --font-sans: var(--font-inter); |
| --font-mono: "SFMono-Regular", Consolas, monospace; |
| --radius-swiss: var(--radius); |
| --shadow-card: var(--shadow-card); |
| --shadow-float: var(--shadow-float); |
| --animate-fade-up: fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; |
| --animate-fade-in: fade-in 0.35s ease-out both; |
| --animate-shimmer: shimmer 1.6s ease-in-out infinite; |
|
|
| @keyframes fade-up { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: none; } |
| } |
| @keyframes fade-in { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| @keyframes shimmer { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.45; } |
| } |
| } |
|
|
| * { box-sizing: border-box; } |
|
|
| html { |
| scroll-behavior: smooth; |
| } |
|
|
| body { |
| background: |
| radial-gradient(1100px 520px at 88% -12%, rgba(214, 40, 57, 0.07), transparent 60%), |
| radial-gradient(900px 460px at 6% 4%, rgba(17, 17, 17, 0.035), transparent 55%), |
| var(--background); |
| background-attachment: fixed; |
| color: var(--foreground); |
| font-family: var(--font-inter), Arial, Helvetica, sans-serif; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| text-rendering: optimizeLegibility; |
| } |
|
|
| button, textarea, input { |
| font: inherit; |
| } |
|
|
| |
| :focus-visible { |
| outline: 2px solid var(--swiss-red); |
| outline-offset: 2px; |
| border-radius: 3px; |
| } |
|
|
| ::selection { |
| background: rgba(214, 40, 57, 0.18); |
| } |
|
|
| |
| * { |
| scrollbar-width: thin; |
| scrollbar-color: rgba(17, 17, 17, 0.22) transparent; |
| } |
| *::-webkit-scrollbar { |
| width: 10px; |
| height: 10px; |
| } |
| *::-webkit-scrollbar-thumb { |
| background: rgba(17, 17, 17, 0.18); |
| border: 3px solid transparent; |
| background-clip: content-box; |
| border-radius: 999px; |
| } |
| *::-webkit-scrollbar-thumb:hover { |
| background: rgba(17, 17, 17, 0.32); |
| background-clip: content-box; |
| } |
|
|
| |
| .micro-label { |
| font-size: 10px; |
| font-weight: 700; |
| letter-spacing: 0.2em; |
| text-transform: uppercase; |
| color: var(--subtle); |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| html { scroll-behavior: auto; } |
| *, *::before, *::after { |
| animation-duration: 0.001ms !important; |
| animation-iteration-count: 1 !important; |
| transition-duration: 0.001ms !important; |
| } |
| } |
|
|
