315 lines
8.8 KiB
CSS
315 lines
8.8 KiB
CSS
@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.jpeg");
|
|
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;
|
|
}
|
|
}
|