@import 'tailwindcss'; @plugin '@tailwindcss/forms'; @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; @source '../../storage/framework/views/*.php'; @source '../**/*.blade.php'; @source '../**/*.js'; /* Dark mode is driven by a class on so the choice can be persisted. */ @custom-variant dark (&:where(.dark, .dark *)); /* | --------------------------------------------------------------------------- | Zama Tools design tokens | --------------------------------------------------------------------------- | The identity is a deep teal-to-violet pairing on a cool slate neutral: close | enough to "trustworthy utility" to read as professional, far enough from the | red/blue of the well known competitors to be our own. */ @theme { --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', monospace; --color-brand-50: oklch(0.976 0.02 195); --color-brand-100: oklch(0.947 0.042 196); --color-brand-200: oklch(0.898 0.076 197); --color-brand-300: oklch(0.832 0.108 199); --color-brand-400: oklch(0.75 0.116 205); --color-brand-500: oklch(0.671 0.11 214); --color-brand-600: oklch(0.578 0.104 223); --color-brand-700: oklch(0.49 0.086 226); --color-brand-800: oklch(0.415 0.07 227); --color-brand-900: oklch(0.36 0.055 228); --color-brand-950: oklch(0.26 0.042 231); --color-accent-50: oklch(0.977 0.014 308); --color-accent-100: oklch(0.946 0.033 307); --color-accent-200: oklch(0.902 0.063 306); --color-accent-300: oklch(0.827 0.107 306); --color-accent-400: oklch(0.714 0.163 305); --color-accent-500: oklch(0.627 0.199 304); --color-accent-600: oklch(0.558 0.216 303); --color-accent-700: oklch(0.491 0.199 304); --color-accent-800: oklch(0.42 0.166 304); --color-accent-900: oklch(0.357 0.135 306); --color-accent-950: oklch(0.245 0.096 308); --color-ink-50: oklch(0.984 0.003 248); --color-ink-100: oklch(0.968 0.005 248); --color-ink-200: oklch(0.928 0.008 250); --color-ink-300: oklch(0.869 0.012 252); --color-ink-400: oklch(0.706 0.017 256); --color-ink-500: oklch(0.556 0.02 257); --color-ink-600: oklch(0.446 0.02 257); --color-ink-700: oklch(0.372 0.021 257); --color-ink-800: oklch(0.279 0.021 256); --color-ink-900: oklch(0.21 0.021 256); --color-ink-950: oklch(0.154 0.019 257); --shadow-card: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 8px 24px -12px rgb(15 23 42 / 0.12); --shadow-card-hover: 0 2px 4px 0 rgb(15 23 42 / 0.05), 0 18px 40px -16px rgb(15 23 42 / 0.22); --shadow-pop: 0 24px 60px -24px rgb(15 23 42 / 0.35); --radius-card: 1.125rem; --animate-fade-up: fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; --animate-fade-in: fade-in 0.25s ease-out both; --animate-pulse-soft: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --animate-shimmer: shimmer 1.4s linear 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 pulse-soft { 50% { opacity: 0.55; } } @keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } @layer base { html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } body { @apply bg-ink-50 font-sans text-ink-700 antialiased dark:bg-ink-950 dark:text-ink-300; } h1, h2, h3, h4 { @apply font-semibold tracking-tight text-ink-900 dark:text-white; text-wrap: balance; } /* Only show focus rings for keyboard users. */ :focus-visible { @apply outline-brand-500 outline-2 outline-offset-2; } ::selection { @apply bg-brand-200 text-brand-950; } [x-cloak] { display: none !important; } } /* | --------------------------------------------------------------------------- | Component classes | --------------------------------------------------------------------------- | Declared with @utility so they can be composed with `@apply` and stay in the | right cascade layer. Variants are additive: `class="btn btn-primary"`. */ /* --------------------------------------------------------------------- layout */ @utility container-page { @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8; } @utility container-prose { @apply mx-auto w-full max-w-3xl px-4 sm:px-6; } @utility section { @apply py-14 sm:py-20; } @utility eyebrow { @apply text-brand-700 dark:text-brand-300 text-xs font-semibold tracking-[0.18em] uppercase; } /* ---------------------------------------------------------------------- cards */ @utility card { @apply border-ink-200/80 dark:border-ink-800 dark:bg-ink-900 rounded-card border bg-white; } @utility card-hover { @apply hover:border-brand-300 dark:hover:border-brand-700/70 shadow-card hover:shadow-card-hover transition-all duration-200 hover:-translate-y-0.5; } @utility panel { @apply border-ink-200/80 dark:border-ink-800 dark:bg-ink-900 shadow-card rounded-card border bg-white p-5 sm:p-7; } /* -------------------------------------------------------------------- buttons */ @utility btn { @apply inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition-all duration-150 select-none disabled:pointer-events-none disabled:opacity-55; } @utility btn-primary { @apply from-brand-600 to-accent-600 hover:shadow-brand-600/25 bg-gradient-to-r text-white shadow-lg shadow-transparent hover:brightness-110 active:scale-[0.985]; } @utility btn-secondary { @apply border-ink-200 text-ink-800 hover:border-brand-300 hover:text-brand-800 dark:border-ink-700 dark:bg-ink-900 dark:text-ink-200 dark:hover:border-brand-600 dark:hover:text-white border bg-white; } @utility btn-ghost { @apply text-ink-600 hover:bg-ink-100 hover:text-ink-900 dark:text-ink-400 dark:hover:bg-ink-800 dark:hover:text-white; } @utility btn-danger { @apply border border-red-200 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-950/70; } @utility btn-lg { @apply gap-2.5 rounded-2xl px-6 py-3.5 text-base; } @utility btn-sm { @apply rounded-lg px-3 py-1.5 text-xs; } /* --------------------------------------------------------------------- inputs */ @utility field { @apply border-ink-200 text-ink-900 placeholder:text-ink-400 focus:border-brand-500 focus:ring-brand-500/25 dark:border-ink-700 dark:bg-ink-900 dark:text-white dark:placeholder:text-ink-500 w-full rounded-xl border bg-white px-3.5 py-2.5 text-sm shadow-sm transition focus:ring-4; } @utility field-label { @apply text-ink-800 dark:text-ink-200 mb-1.5 block text-sm font-medium; } @utility field-hint { @apply text-ink-500 mt-1.5 text-xs; } @utility field-error { @apply mt-1.5 text-xs font-medium text-red-600 dark:text-red-400; } /* --------------------------------------------------------------------- badges */ @utility badge { @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[0.7rem] font-semibold tracking-wide; } @utility badge-brand { @apply bg-brand-100 text-brand-800 dark:bg-brand-950/70 dark:text-brand-300; } @utility badge-accent { @apply bg-accent-100 text-accent-800 dark:bg-accent-950/70 dark:text-accent-300; } @utility badge-muted { @apply bg-ink-100 text-ink-600 dark:bg-ink-800 dark:text-ink-400; } @utility badge-success { @apply bg-emerald-100 text-emerald-800 dark:bg-emerald-950/60 dark:text-emerald-300; } @utility badge-warning { @apply bg-amber-100 text-amber-800 dark:bg-amber-950/60 dark:text-amber-300; } @utility badge-danger { @apply bg-red-100 text-red-800 dark:bg-red-950/60 dark:text-red-300; } @utility badge-info { @apply bg-sky-100 text-sky-800 dark:bg-sky-950/60 dark:text-sky-300; } /* ----------------------------------------------------------------------- misc */ @utility divider { @apply border-ink-200/80 dark:border-ink-800 border-t; } @utility link { @apply text-brand-700 hover:text-brand-900 dark:text-brand-400 dark:hover:text-brand-200 font-medium underline-offset-4 hover:underline; } @utility skeleton { @apply bg-ink-200/70 dark:bg-ink-800 rounded-lg; background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.35), transparent); background-size: 200% 100%; animation: var(--animate-shimmer); } /* Long-form SEO copy on tool and category pages. */ @layer components { .prose-zama { @apply text-ink-600 dark:text-ink-400 leading-relaxed; } .prose-zama h2 { @apply mt-10 mb-3 text-xl sm:text-2xl; } .prose-zama h3 { @apply mt-8 mb-2 text-lg; } .prose-zama p { @apply mb-4; } .prose-zama ul { @apply mb-4 list-disc space-y-1.5 pl-5; } .prose-zama ol { @apply mb-4 list-decimal space-y-1.5 pl-5; } .prose-zama a { @apply text-brand-700 dark:text-brand-400 font-medium underline underline-offset-4; } .prose-zama strong { @apply text-ink-900 font-semibold dark:text-white; } } @layer utilities { .text-gradient { @apply from-brand-700 via-brand-600 to-accent-600 dark:from-brand-300 dark:via-brand-200 dark:to-accent-300 bg-gradient-to-r bg-clip-text text-transparent; } /* Soft radial glow behind the hero and CTA blocks. */ .hero-glow { background-image: radial-gradient(60% 60% at 20% 0%, color-mix(in oklab, var(--color-brand-300) 45%, transparent) 0%, transparent 60%), radial-gradient(50% 50% at 85% 10%, color-mix(in oklab, var(--color-accent-300) 40%, transparent) 0%, transparent 60%); } .dark .hero-glow { background-image: radial-gradient(60% 60% at 20% 0%, color-mix(in oklab, var(--color-brand-800) 55%, transparent) 0%, transparent 60%), radial-gradient(50% 50% at 85% 10%, color-mix(in oklab, var(--color-accent-900) 60%, transparent) 0%, transparent 60%); } .grid-pattern { background-image: linear-gradient(to right, color-mix(in oklab, var(--color-ink-300) 45%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--color-ink-300) 45%, transparent) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(70% 60% at 50% 0%, black, transparent); } .dark .grid-pattern { background-image: linear-gradient(to right, color-mix(in oklab, var(--color-ink-800) 90%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--color-ink-800) 90%, transparent) 1px, transparent 1px); } .scrollbar-slim { scrollbar-width: thin; scrollbar-color: var(--color-ink-300) transparent; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } } @media print { header, footer, .no-print { display: none !important; } }