@import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --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); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --background-start: var(--color-sky-blue); --background-end: var(--color-lime-300); /* Frutiger Aero Gradients */ --gradient-fa-blue: 135deg, hsl(217 91% 60%) 0%, hsl(200 90% 70%) 100%; --gradient-fa-green: 135deg, hsl(155 70% 55%) 0%, hsl(170 80% 65%) 100%; --gradient-fa-card: 180deg, hsl(var(--card)) 0%, hsl(var(--card)) 90%, hsl(var(--card)) 100%; --gradient-fa-gloss: 135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%; --shadow-fa-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-fa-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-fa-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); --fa-inner: inset 0 1px 2px rgba(0, 0, 0, 0.1); --text-shadow-default: 0 1px 1px rgba(0, 0, 0, 0.2); --text-shadow-sm: 0 1px 0px rgba(255, 255, 255, 0.4); --text-shadow-md: 0 2px 2px rgba(0, 0, 0, 0.2); --text-shadow-lg: 0 4px 4px rgba(0, 0, 0, 0.2); --font-display: var(--font-frutiger), "Arial", "Helvetica", "sans-serif"; } :root { --destructive: oklch(0.577 0.245 27.325); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --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); --background: hsl(0 0% 98%); /* Light off-white */ --foreground: hsl(222.2 47.4% 11.2%); --muted: hsl(210 20% 96.1%); --muted-foreground: hsl(215.4 16.3% 46.9%); --popover: hsl(0 0% 100%); --popover-foreground: hsl(222.2 47.4% 11.2%); --card: hsl(0 0% 100%); /* Pure white for a crisp look */ --card-foreground: hsl(222.2 47.4% 11.2%); --border: hsl(214.3 31.8% 91.4%); --input: hsl(214.3 31.8% 91.4%); --ring: hsl(222.2 47.4% 11.2%); --primary: hsl(217 91% 60%); /* Vibrant Blue */ --primary-foreground: hsl(210 40% 98%); --secondary: hsl(155 70% 55%); /* Vibrant Green */ --secondary-foreground: hsl(210 40% 98%); --destructive: hsl(0 84.2% 60.2%); --destructive-foreground: hsl(210 40% 98%); --accent: hsl(210 20% 96.1%); --accent-foreground: hsl(222.2 47.4% 11.2%); --radius: 0.75rem; /* Larger border radius */ } .dark { --destructive: oklch(0.704 0.191 22.216); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --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); --background: hsl(222.2 47.4% 11.2%); --foreground: hsl(210 40% 98%); --muted: hsl(217.2 32.4% 14.8%); --muted-foreground: hsl(215 20.2% 65.1%); --popover: hsl(222.2 47.4% 11.2%); --popover-foreground: hsl(210 40% 98%); --card: hsl(217.2 32.4% 14.8%); --card-foreground: hsl(210 40% 98%); --border: hsl(217.2 32.4% 14.8%); --input: hsl(217.2 32.4% 14.8%); --ring: hsl(212.7 26.8% 83.9%); --primary: hsl(217 91% 60%); /* Vibrant Blue (same as light) */ --primary-foreground: hsl(210 40% 98%); --secondary: hsl(155 70% 55%); /* Vibrant Green (same as light) */ --secondary-foreground: hsl(210 40% 98%); --destructive: hsl(0 62.8% 30.6%); --destructive-foreground: hsl(210 40% 98%); --accent: hsl(217.2 32.4% 14.8%); --accent-foreground: hsl(210 40% 98%); /* Frutiger Aero Gradients for dark mode (slightly adjusted) */ --color-fa-gradient-blue: linear-gradient( 135deg, hsl(217 91% 45%) 0%, hsl(200 90% 55%) 100% ); --color-fa-gradient-green: linear-gradient( 135deg, hsl(155 70% 40%) 0%, hsl(170 80% 50%) 100% ); --color-fa-gradient-card: linear-gradient( 180deg, hsl(var(--card)) 0%, hsl(var(--card)) 90%, hsl(var(--card)) 100% ); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; background-image: url("/background.avif"); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; } .glossy-effect::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; border-radius: var(--radius); /* Inherit parent's border radius */ background: linear-gradient( 180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100% ); opacity: 0.8; pointer-events: none; /* Allow clicks to pass through */ z-index: 1; /* Ensure it's above the background but below content */ } .glossy-effect.bottom::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 30%; border-radius: var(--radius); background: linear-gradient( 0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100% ); pointer-events: none; z-index: 1; } .fa-gradient-blue { background: linear-gradient(var(--gradient-fa-blue)); } .fa-gradient-green { background: linear-gradient(var(--gradient-fa-green)); } .fa-gradient-card { background: linear-gradient(var(--gradient-fa-card)); } .fa-gloss { position: relative; } .fa-gloss::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; border-radius: var(--radius); background: linear-gradient(var(--gradient-fa-gloss)); opacity: 0.8; pointer-events: none; z-index: 1; } .fa-gloss.bottom::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 30%; border-radius: var(--radius); background: linear-gradient( 0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100% ); pointer-events: none; z-index: 1; } } @layer components { .shadow-fa-sm { box-shadow: var(--shadow-fa-sm), var(--fa-inner); } .shadow-fa-md { box-shadow: var(--shadow-fa-md), var(--fa-inner); } .shadow-fa-lg { box-shadow: var(--shadow-fa-lg), var(--fa-inner); } .text-shadow-default { text-shadow: var(--text-shadow-default); } .text-shadow-sm { text-shadow: var(--text-shadow-sm); } .text-shadow-md { text-shadow: var(--text-shadow-md); } .text-shadow-lg { text-shadow: var(--text-shadow-lg); } .glass-effect { @apply bg-card/70 backdrop-blur-lg border border-white/20 shadow-fa-lg; } .gloss-highlight::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 60%; border-radius: inherit; /* This is key for matching the parent's border radius */ background: linear-gradient( 180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100% ); pointer-events: none; z-index: 1; } }