| /* |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, |
| * software distributed under the License is distributed on an |
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| * KIND, either express or implied. See the License for the |
| * specific language governing permissions and limitations |
| * under the License. |
| */ |
| |
| @import "tailwindcss"; |
| @import "tw-animate-css"; |
| @import "shadcn/tailwind.css"; |
| |
| @custom-variant dark (&:is(.dark *)); |
| |
| @theme { |
| --color-primary: #7B2FBE; |
| --color-primary-light: #9B5FDE; |
| --color-secondary: #F5A623; |
| --color-accent: #E8446D; |
| --color-bg-light: #FAFAFA; |
| --color-bg-dark: #0A0A0A; |
| --color-text-light: #1A1A1A; |
| --color-text-dark: #EDEDED; |
| --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; |
| --font-mono: "JetBrains Mono", ui-monospace, monospace; |
| } |
| |
| html { |
| scroll-behavior: smooth; |
| } |
| |
| body { |
| font-family: var(--font-sans); |
| } |
| |
| :root { |
| --bg: var(--color-bg-light); |
| --text: var(--color-text-light); |
| --card-bg: #ffffff; |
| --card-border: #e5e7eb; |
| --muted: #6b7280; |
| --code-bg: #1e1e2e; |
| --background: oklch(1 0 0); |
| --foreground: oklch(0.145 0 0); |
| --card: oklch(1 0 0); |
| --card-foreground: oklch(0.145 0 0); |
| --popover: oklch(1 0 0); |
| --popover-foreground: oklch(0.145 0 0); |
| --primary: oklch(0.205 0 0); |
| --primary-foreground: oklch(0.985 0 0); |
| --secondary: oklch(0.97 0 0); |
| --secondary-foreground: oklch(0.205 0 0); |
| --muted-foreground: oklch(0.556 0 0); |
| --accent: oklch(0.97 0 0); |
| --accent-foreground: oklch(0.205 0 0); |
| --destructive: oklch(0.577 0.245 27.325); |
| --border: oklch(0.922 0 0); |
| --input: oklch(0.922 0 0); |
| --ring: oklch(0.708 0 0); |
| --chart-1: oklch(0.809 0.105 251.813); |
| --chart-2: oklch(0.623 0.214 259.815); |
| --chart-3: oklch(0.546 0.245 262.881); |
| --chart-4: oklch(0.488 0.243 264.376); |
| --chart-5: oklch(0.424 0.199 265.638); |
| --radius: 0.625rem; |
| --sidebar: oklch(0.985 0 0); |
| --sidebar-foreground: oklch(0.145 0 0); |
| --sidebar-primary: oklch(0.205 0 0); |
| --sidebar-primary-foreground: oklch(0.985 0 0); |
| --sidebar-accent: oklch(0.97 0 0); |
| --sidebar-accent-foreground: oklch(0.205 0 0); |
| --sidebar-border: oklch(0.922 0 0); |
| --sidebar-ring: oklch(0.708 0 0); |
| } |
| |
| .dark { |
| --bg: var(--color-bg-dark); |
| --text: var(--color-text-dark); |
| --card-bg: #141414; |
| --card-border: #2a2a2a; |
| --muted: #9ca3af; |
| --code-bg: #0d0d1a; |
| --background: oklch(0.145 0 0); |
| --foreground: oklch(0.985 0 0); |
| --card: oklch(0.205 0 0); |
| --card-foreground: oklch(0.985 0 0); |
| --popover: oklch(0.205 0 0); |
| --popover-foreground: oklch(0.985 0 0); |
| --primary: oklch(0.922 0 0); |
| --primary-foreground: oklch(0.205 0 0); |
| --secondary: oklch(0.269 0 0); |
| --secondary-foreground: oklch(0.985 0 0); |
| --muted-foreground: oklch(0.708 0 0); |
| --accent: oklch(0.269 0 0); |
| --accent-foreground: oklch(0.985 0 0); |
| --destructive: oklch(0.704 0.191 22.216); |
| --border: oklch(1 0 0 / 10%); |
| --input: oklch(1 0 0 / 15%); |
| --ring: oklch(0.556 0 0); |
| --chart-1: oklch(0.809 0.105 251.813); |
| --chart-2: oklch(0.623 0.214 259.815); |
| --chart-3: oklch(0.546 0.245 262.881); |
| --chart-4: oklch(0.488 0.243 264.376); |
| --chart-5: oklch(0.424 0.199 265.638); |
| --sidebar: oklch(0.205 0 0); |
| --sidebar-foreground: oklch(0.985 0 0); |
| --sidebar-primary: oklch(0.488 0.243 264.376); |
| --sidebar-primary-foreground: oklch(0.985 0 0); |
| --sidebar-accent: oklch(0.269 0 0); |
| --sidebar-accent-foreground: oklch(0.985 0 0); |
| --sidebar-border: oklch(1 0 0 / 10%); |
| --sidebar-ring: oklch(0.556 0 0); |
| } |
| |
| body { |
| background-color: var(--bg); |
| color: var(--text); |
| } |
| |
| /* Testimonial carousel */ |
| @keyframes scroll { |
| 0% { |
| transform: translateX(0); |
| } |
| 100% { |
| transform: translateX(-50%); |
| } |
| } |
| |
| .testimonial-track { |
| animation: scroll 40s linear infinite; |
| } |
| |
| .testimonial-track:hover { |
| animation-play-state: paused; |
| } |
| |
| /* Code tabs */ |
| .code-block pre { |
| margin: 0; |
| padding: 1.25rem; |
| overflow-x: auto; |
| font-size: 0.875rem; |
| line-height: 1.7; |
| } |
| |
| .code-block code { |
| font-family: var(--font-mono); |
| } |
| |
| @theme inline { |
| --font-sans: var(--font-sans); |
| --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); |
| --animate-marquee: marquee var(--duration) infinite linear; |
| --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite; |
| @keyframes marquee { |
| from { |
| transform: translateX(0); |
| } |
| to { |
| transform: translateX(calc(-100% - var(--gap))); |
| } |
| } |
| @keyframes marquee-vertical { |
| from { |
| transform: translateY(0); |
| } |
| to { |
| transform: translateY(calc(-100% - var(--gap))); |
| } |
| } |
| --animate-shimmer-slide: shimmer-slide var(--speed) ease-in-out infinite alternate; |
| --animate-spin-around: spin-around calc(var(--speed) * 2) infinite linear |
| ; |
| @keyframes shimmer-slide { |
| to { |
| transform: translate(calc(100cqw - 100%), 0); |
| } |
| } |
| @keyframes spin-around { |
| 0% { |
| transform: translateZ(0) rotate(0); |
| } |
| 15%, 35% { |
| transform: translateZ(0) rotate(90deg); |
| } |
| 65%, 85% { |
| transform: translateZ(0) rotate(270deg); |
| } |
| 100% { |
| transform: translateZ(0) rotate(360deg); |
| } |
| } |
| --animate-shiny-text: shiny-text 8s infinite; |
| @keyframes shiny-text { |
| 0%, 90%, 100% { |
| background-position: calc(-100% - var(--shiny-width)) 0; |
| } |
| 30%, 60% { |
| background-position: calc(100% + var(--shiny-width)) 0; |
| } |
| }} |
| |
| @layer base { |
| * { |
| @apply border-border outline-ring/50; |
| } |
| body { |
| @apply bg-background text-foreground; |
| } |
| html { |
| @apply font-sans; |
| } |
| } |
