| @import "tailwindcss"; |
| @import "tw-animate-css"; |
| @import "shadcn/tailwind.css"; |
|
|
| @custom-variant dark (&:is(.dark *)); |
|
|
| @theme { |
| --color-primary: #DEDBC8; |
| --color-primary-shadow: #0B7C7B; |
| --color-secondary: #3B82F6; |
| --color-secondary-shadow: #1D4ED8; |
| --color-warning: #F59E0B; |
| --color-danger: #F43F5E; |
| --color-danger-shadow: #BE123C; |
| --color-background: #F8FBFF; |
| --color-card: #ffffff; |
| --color-card-feature: #f7f7f7; |
| --color-border: #e5e5e5; |
| --color-ink: #4b4b4b; |
| --color-muted: #777777; |
| } |
|
|
| @theme inline { |
| --font-sans: var(--font-sans); |
| --font-serif: var(--font-instrument-serif), "Instrument Serif", serif; |
| --font-heading: 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); |
| } |
|
|
| :root { |
| --muted: oklch(0.97 0 0); |
| --accent: oklch(0.97 0 0); |
| --accent-foreground: oklch(0.205 0 0); |
| --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); |
| --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.87 0 0); |
| --chart-2: oklch(0.556 0 0); |
| --chart-3: oklch(0.439 0 0); |
| --chart-4: oklch(0.371 0 0); |
| --chart-5: oklch(0.269 0 0); |
| --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); |
| } |
|
|
| * { |
| box-sizing: border-box; |
| font-family: var(--font-almarai), "Almarai", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif; |
| } |
|
|
| html { |
| min-width: 320px; |
| } |
|
|
| body { |
| background: #000000; |
| color: #E1E0CC; |
| font-family: var(--font-almarai), "Almarai", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif; |
| min-width: 320px; |
| } |
|
|
| button, |
| input, |
| select, |
| textarea { |
| font: inherit; |
| } |
|
|
| .btn-duo { |
| @apply relative inline-flex items-center justify-center rounded-2xl font-extrabold uppercase transition-all select-none; |
| letter-spacing: 0; |
| min-height: 48px; |
| padding: 12px 22px; |
| } |
|
|
| .btn-duo-primary { |
| @apply bg-[#0EA5A4] text-white; |
| box-shadow: 0 4px 0 #0B7C7B; |
| } |
|
|
| .btn-duo-secondary { |
| @apply bg-[#3B82F6] text-white; |
| box-shadow: 0 4px 0 #1D4ED8; |
| } |
|
|
| .btn-duo-white { |
| @apply border-2 border-[#E5E5E5] bg-white text-[#3B82F6]; |
| box-shadow: 0 4px 0 #e5e5e5; |
| } |
|
|
| .btn-duo-danger { |
| @apply bg-[#F43F5E] text-white; |
| box-shadow: 0 4px 0 #BE123C; |
| } |
|
|
| .btn-duo:active:not(:disabled) { |
| transform: translateY(4px); |
| box-shadow: 0 0 0 transparent; |
| } |
|
|
| .btn-duo:disabled { |
| @apply cursor-not-allowed bg-[#E5E5E5] text-[#AFAFAF]; |
| box-shadow: 0 4px 0 #d0d0d0; |
| } |
|
|
| .duo-card, |
| .card-duo { |
| @apply rounded-2xl border-2 border-[#E5E5E5] bg-white transition-all; |
| box-shadow: 0 4px 0 #e5e5e5; |
| } |
|
|
| .duo-card-interactive, |
| .card-duo { |
| @apply cursor-pointer; |
| } |
|
|
| .duo-card-interactive:hover, |
| .card-duo:hover { |
| @apply border-[#D7D7D7]; |
| transform: translateY(-1px); |
| box-shadow: 0 5px 0 #d7d7d7; |
| } |
|
|
| .duo-card-interactive:active, |
| .card-duo:active:not(.card-duo-active) { |
| transform: translateY(4px); |
| box-shadow: 0 0 0 #e5e5e5; |
| } |
|
|
| .card-duo-active, |
| .duo-card-active { |
| @apply border-[#3B82F6] bg-[#EFF6FF]; |
| box-shadow: 0 4px 0 #1D4ED8; |
| } |
|
|
| .duo-input { |
| @apply h-12 w-full rounded-2xl border-2 border-[#E5E5E5] bg-white px-4 text-sm font-bold text-[#4B4B4B] outline-none transition-colors placeholder:text-[#AFAFAF]; |
| box-shadow: 0 3px 0 #e5e5e5; |
| } |
|
|
| .duo-input:focus { |
| @apply border-[#3B82F6]; |
| } |
|
|
| .duo-chip { |
| @apply inline-flex items-center gap-2 rounded-full border-2 border-[#E5E5E5] bg-white px-3 py-1.5 text-xs font-extrabold uppercase text-[#777777]; |
| letter-spacing: 0; |
| } |
|
|
| .duo-progress { |
| @apply h-4 overflow-hidden rounded-full bg-[#E5E5E5]; |
| } |
|
|
| .duo-progress > span { |
| @apply block h-full rounded-full bg-[#0EA5A4]; |
| box-shadow: inset 0 -2px 0 rgba(11, 124, 123, 0.35); |
| } |
|
|
| .duo-page-title { |
| @apply text-2xl font-black text-[#3C3C3C]; |
| letter-spacing: 0; |
| } |
|
|
| .duo-eyebrow { |
| @apply text-xs font-black uppercase text-[#777777]; |
| letter-spacing: 0; |
| } |
|
|
| .duo-soft-panel { |
| @apply rounded-2xl border-2 border-[#E5E5E5] bg-[#F7F7F7]; |
| } |
|
|
| |
| |
| ruby.ruby { |
| ruby-position: over; |
| ruby-align: center; |
| } |
| ruby.ruby > rt { |
| font-size: 0.55em; |
| font-weight: 700; |
| color: #6B7280; |
| letter-spacing: 0.02em; |
| line-height: 1; |
| user-select: none; |
| } |
| .has-furi { |
| line-height: 2.1; |
| } |
|
|
| .duo-safe-bottom { |
| padding-bottom: calc(88px + env(safe-area-inset-bottom)); |
| } |
|
|
| .noise-overlay, |
| .bg-noise { |
| background-repeat: repeat; |
| background-size: 160px 160px; |
| } |
|
|
| .noise-overlay { |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.58'/%3E%3C/svg%3E"); |
| } |
|
|
| .bg-noise { |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.42'/%3E%3C/svg%3E"); |
| } |
|
|
| .dark { |
| --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: oklch(0.269 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.87 0 0); |
| --chart-2: oklch(0.556 0 0); |
| --chart-3: oklch(0.439 0 0); |
| --chart-4: oklch(0.371 0 0); |
| --chart-5: oklch(0.269 0 0); |
| --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); |
| } |
|
|
| @layer base { |
| * { |
| @apply border-border outline-ring/50; |
| } |
| body { |
| @apply bg-background text-foreground; |
| } |
| html { |
| @apply font-sans; |
| } |
| } |
