feat: revamp global styles and component designs with enhanced gradients, shadows, and responsive layouts for a modern fintech aesthetic
This commit is contained in:
Julien Froidefond
548
app/globals.css
548
app/globals.css
@@ -4,117 +4,135 @@
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
/* Background moderne avec légère teinte */
|
||||
--background: oklch(0.99 0.002 270);
|
||||
--foreground: oklch(0.15 0.01 270);
|
||||
/* Background fintech ultra-moderne avec dégradé vibrant */
|
||||
--background: oklch(0.98 0.008 280);
|
||||
--foreground: oklch(0.1 0.015 280);
|
||||
|
||||
/* Cards avec glassmorphism subtil */
|
||||
--card: oklch(1 0 0 / 0.8);
|
||||
--card-foreground: oklch(0.15 0.01 270);
|
||||
/* Cards avec glassmorphism très prononcé */
|
||||
--card: oklch(1 0 0 / 0.6);
|
||||
--card-foreground: oklch(0.1 0.015 280);
|
||||
--card-hover: oklch(1 0 0 / 0.75);
|
||||
|
||||
/* Popover avec backdrop blur */
|
||||
/* Popover avec backdrop blur très fort */
|
||||
--popover: oklch(1 0 0 / 0.95);
|
||||
--popover-foreground: oklch(0.15 0.01 270);
|
||||
--popover-foreground: oklch(0.1 0.015 280);
|
||||
|
||||
/* Primary: Bleu/violet fintech moderne */
|
||||
--primary: oklch(0.55 0.18 260);
|
||||
/* Primary: Bleu/violet fintech très vibrant avec gradient */
|
||||
--primary: oklch(0.6 0.25 270);
|
||||
--primary-foreground: oklch(0.99 0 0);
|
||||
--primary-gradient: linear-gradient(135deg, oklch(0.6 0.25 270) 0%, oklch(0.65 0.22 300) 50%, oklch(0.62 0.24 250) 100%);
|
||||
--primary-light: oklch(0.7 0.2 270);
|
||||
|
||||
/* Secondary avec teinte subtile */
|
||||
--secondary: oklch(0.97 0.005 270);
|
||||
--secondary-foreground: oklch(0.25 0.01 270);
|
||||
--secondary: oklch(0.97 0.008 280);
|
||||
--secondary-foreground: oklch(0.25 0.015 280);
|
||||
|
||||
/* Muted plus doux */
|
||||
--muted: oklch(0.96 0.003 270);
|
||||
--muted-foreground: oklch(0.5 0.008 270);
|
||||
--muted: oklch(0.96 0.006 280);
|
||||
--muted-foreground: oklch(0.5 0.012 280);
|
||||
|
||||
/* Accent avec couleur vibrante */
|
||||
--accent: oklch(0.95 0.01 260);
|
||||
--accent-foreground: oklch(0.55 0.18 260);
|
||||
/* Accent avec couleur très vibrante */
|
||||
--accent: oklch(0.95 0.015 260);
|
||||
--accent-foreground: oklch(0.6 0.25 270);
|
||||
|
||||
/* Destructive moderne */
|
||||
--destructive: oklch(0.55 0.22 25);
|
||||
--destructive: oklch(0.6 0.26 25);
|
||||
--destructive-foreground: oklch(0.99 0 0);
|
||||
|
||||
/* Bordures fines et subtiles */
|
||||
--border: oklch(0.92 0.005 270 / 0.6);
|
||||
--input: oklch(0.96 0.003 270);
|
||||
--ring: oklch(0.55 0.18 260 / 0.3);
|
||||
--border: oklch(0.9 0.008 280 / 0.4);
|
||||
--input: oklch(0.97 0.006 280);
|
||||
--ring: oklch(0.6 0.25 270 / 0.5);
|
||||
|
||||
/* Chart colors modernes et vibrantes */
|
||||
--chart-1: oklch(0.6 0.2 260);
|
||||
--chart-2: oklch(0.65 0.18 180);
|
||||
--chart-3: oklch(0.7 0.15 120);
|
||||
--chart-4: oklch(0.65 0.2 320);
|
||||
--chart-5: oklch(0.6 0.18 40);
|
||||
/* Chart colors très vibrantes */
|
||||
--chart-1: oklch(0.65 0.25 270);
|
||||
--chart-2: oklch(0.7 0.22 180);
|
||||
--chart-3: oklch(0.75 0.2 120);
|
||||
--chart-4: oklch(0.7 0.25 320);
|
||||
--chart-5: oklch(0.65 0.22 40);
|
||||
|
||||
--radius: 0.75rem;
|
||||
/* Success et Warning pour fintech */
|
||||
--success: oklch(0.68 0.2 150);
|
||||
--success-foreground: oklch(0.99 0 0);
|
||||
--warning: oklch(0.78 0.2 80);
|
||||
--warning-foreground: oklch(0.1 0.015 280);
|
||||
|
||||
/* Sidebar moderne */
|
||||
--sidebar: oklch(0.98 0.003 270);
|
||||
--sidebar-foreground: oklch(0.2 0.01 270);
|
||||
--sidebar-primary: oklch(0.55 0.18 260);
|
||||
--radius: 1.25rem;
|
||||
|
||||
/* Sidebar moderne avec glassmorphism très prononcé */
|
||||
--sidebar: oklch(1 0 0 / 0.5);
|
||||
--sidebar-foreground: oklch(0.2 0.015 280);
|
||||
--sidebar-primary: oklch(0.6 0.25 270);
|
||||
--sidebar-primary-foreground: oklch(0.99 0 0);
|
||||
--sidebar-accent: oklch(0.95 0.01 260);
|
||||
--sidebar-accent-foreground: oklch(0.25 0.01 270);
|
||||
--sidebar-border: oklch(0.92 0.005 270 / 0.5);
|
||||
--sidebar-ring: oklch(0.55 0.18 260 / 0.2);
|
||||
--sidebar-accent: oklch(0.96 0.015 260);
|
||||
--sidebar-accent-foreground: oklch(0.25 0.015 280);
|
||||
--sidebar-border: oklch(0.9 0.008 280 / 0.3);
|
||||
--sidebar-ring: oklch(0.6 0.25 270 / 0.4);
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Background sombre avec teinte subtile */
|
||||
--background: oklch(0.12 0.01 270);
|
||||
--foreground: oklch(0.98 0.002 270);
|
||||
/* Background sombre fintech avec dégradé vibrant */
|
||||
--background: oklch(0.1 0.015 280);
|
||||
--foreground: oklch(0.97 0.005 280);
|
||||
|
||||
/* Cards avec effet glassmorphism sombre */
|
||||
--card: oklch(0.15 0.01 270 / 0.7);
|
||||
--card-foreground: oklch(0.98 0.002 270);
|
||||
/* Cards avec effet glassmorphism sombre très prononcé */
|
||||
--card: oklch(0.15 0.015 280 / 0.6);
|
||||
--card-foreground: oklch(0.97 0.005 280);
|
||||
--card-hover: oklch(0.18 0.015 280 / 0.75);
|
||||
|
||||
/* Popover avec backdrop blur */
|
||||
--popover: oklch(0.15 0.01 270 / 0.95);
|
||||
--popover-foreground: oklch(0.98 0.002 270);
|
||||
/* Popover avec backdrop blur très fort */
|
||||
--popover: oklch(0.15 0.015 280 / 0.95);
|
||||
--popover-foreground: oklch(0.97 0.005 280);
|
||||
|
||||
/* Primary: Bleu/violet brillant pour dark mode */
|
||||
--primary: oklch(0.65 0.2 260);
|
||||
--primary-foreground: oklch(0.12 0.01 270);
|
||||
/* Primary: Bleu/violet très brillant pour dark mode */
|
||||
--primary: oklch(0.72 0.28 270);
|
||||
--primary-foreground: oklch(0.1 0.015 280);
|
||||
--primary-gradient: linear-gradient(135deg, oklch(0.72 0.28 270) 0%, oklch(0.75 0.25 300) 50%, oklch(0.73 0.27 250) 100%);
|
||||
--primary-light: oklch(0.78 0.23 270);
|
||||
|
||||
/* Secondary avec plus de contraste */
|
||||
--secondary: oklch(0.22 0.01 270);
|
||||
--secondary-foreground: oklch(0.95 0.002 270);
|
||||
--secondary: oklch(0.22 0.015 280);
|
||||
--secondary-foreground: oklch(0.95 0.005 280);
|
||||
|
||||
/* Muted plus visible */
|
||||
--muted: oklch(0.22 0.01 270);
|
||||
--muted-foreground: oklch(0.65 0.008 270);
|
||||
--muted: oklch(0.22 0.015 280);
|
||||
--muted-foreground: oklch(0.7 0.012 280);
|
||||
|
||||
/* Accent vibrant */
|
||||
--accent: oklch(0.25 0.015 260);
|
||||
--accent-foreground: oklch(0.65 0.2 260);
|
||||
/* Accent très vibrant */
|
||||
--accent: oklch(0.26 0.02 260);
|
||||
--accent-foreground: oklch(0.72 0.28 270);
|
||||
|
||||
/* Destructive moderne */
|
||||
--destructive: oklch(0.6 0.22 25);
|
||||
--destructive-foreground: oklch(0.98 0 0);
|
||||
--destructive: oklch(0.68 0.27 25);
|
||||
--destructive-foreground: oklch(0.97 0 0);
|
||||
|
||||
/* Bordures subtiles */
|
||||
--border: oklch(0.25 0.01 270 / 0.5);
|
||||
--input: oklch(0.22 0.01 270);
|
||||
--ring: oklch(0.65 0.2 260 / 0.4);
|
||||
--border: oklch(0.25 0.015 280 / 0.4);
|
||||
--input: oklch(0.22 0.015 280);
|
||||
--ring: oklch(0.72 0.28 270 / 0.6);
|
||||
|
||||
/* Chart colors vibrantes pour dark */
|
||||
--chart-1: oklch(0.7 0.22 260);
|
||||
--chart-2: oklch(0.75 0.2 180);
|
||||
--chart-3: oklch(0.8 0.18 120);
|
||||
--chart-4: oklch(0.75 0.22 320);
|
||||
--chart-5: oklch(0.7 0.2 40);
|
||||
/* Chart colors très vibrantes pour dark */
|
||||
--chart-1: oklch(0.75 0.27 270);
|
||||
--chart-2: oklch(0.8 0.25 180);
|
||||
--chart-3: oklch(0.85 0.23 120);
|
||||
--chart-4: oklch(0.8 0.27 320);
|
||||
--chart-5: oklch(0.75 0.25 40);
|
||||
|
||||
/* Sidebar dark moderne */
|
||||
--sidebar: oklch(0.14 0.01 270);
|
||||
--sidebar-foreground: oklch(0.95 0.002 270);
|
||||
--sidebar-primary: oklch(0.65 0.2 260);
|
||||
--sidebar-primary-foreground: oklch(0.12 0.01 270);
|
||||
--sidebar-accent: oklch(0.25 0.015 260);
|
||||
--sidebar-accent-foreground: oklch(0.95 0.002 270);
|
||||
--sidebar-border: oklch(0.25 0.01 270 / 0.4);
|
||||
--sidebar-ring: oklch(0.65 0.2 260 / 0.3);
|
||||
/* Success et Warning pour fintech dark */
|
||||
--success: oklch(0.73 0.22 150);
|
||||
--success-foreground: oklch(0.1 0.015 280);
|
||||
--warning: oklch(0.8 0.22 80);
|
||||
--warning-foreground: oklch(0.1 0.015 280);
|
||||
|
||||
/* Sidebar dark moderne avec glassmorphism très prononcé */
|
||||
--sidebar: oklch(0.12 0.015 280 / 0.5);
|
||||
--sidebar-foreground: oklch(0.95 0.005 280);
|
||||
--sidebar-primary: oklch(0.72 0.28 270);
|
||||
--sidebar-primary-foreground: oklch(0.1 0.015 280);
|
||||
--sidebar-accent: oklch(0.26 0.02 260);
|
||||
--sidebar-accent-foreground: oklch(0.95 0.005 280);
|
||||
--sidebar-border: oklch(0.25 0.015 280 / 0.3);
|
||||
--sidebar-ring: oklch(0.72 0.28 270 / 0.5);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
@@ -165,13 +183,25 @@
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
letter-spacing: -0.01em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Animations fintech modernes */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
letter-spacing: -0.02em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
p {
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
|
||||
/* Animations fintech modernes et fluides */
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
@@ -182,7 +212,7 @@
|
||||
@keyframes slide-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-8px);
|
||||
transform: translateX(-12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
@@ -190,63 +220,234 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.96);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient-shift {
|
||||
0%, 100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Smooth scrolling */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Amélioration des transitions globales */
|
||||
/* Amélioration des transitions globales avec easing fintech */
|
||||
* {
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
|
||||
/* Background fintech moderne avec dégradés subtils */
|
||||
/* Désactiver COMPLÈTEMENT toutes les animations pour les popovers et selects - APPROCHE AGRESSIVE */
|
||||
[data-slot="popover-content"],
|
||||
[data-slot="select-content"],
|
||||
[data-slot="dropdown-menu-content"],
|
||||
[data-slot="popover-content"] *,
|
||||
[data-slot="select-content"] *,
|
||||
[data-slot="dropdown-menu-content"] *,
|
||||
[data-radix-popper-content-wrapper],
|
||||
[data-radix-select-content],
|
||||
[data-radix-dropdown-menu-content] {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
/* Ne pas toucher au transform car il est utilisé pour le positionnement */
|
||||
opacity: 1 !important;
|
||||
will-change: auto !important;
|
||||
}
|
||||
|
||||
/* Désactiver TOUTES les classes Tailwind d'animation - sélecteurs ultra-spécifiques */
|
||||
[data-slot="popover-content"].animate-in,
|
||||
[data-slot="select-content"].animate-in,
|
||||
[data-slot="dropdown-menu-content"].animate-in,
|
||||
[data-slot="popover-content"].animate-out,
|
||||
[data-slot="select-content"].animate-out,
|
||||
[data-slot="dropdown-menu-content"].animate-out,
|
||||
[data-slot="popover-content"][class*="fade"],
|
||||
[data-slot="select-content"][class*="fade"],
|
||||
[data-slot="dropdown-menu-content"][class*="fade"],
|
||||
[data-slot="popover-content"][class*="zoom"],
|
||||
[data-slot="select-content"][class*="zoom"],
|
||||
[data-slot="dropdown-menu-content"][class*="zoom"],
|
||||
[data-slot="popover-content"][class*="slide"],
|
||||
[data-slot="select-content"][class*="slide"],
|
||||
[data-slot="dropdown-menu-content"][class*="slide"],
|
||||
[data-slot="popover-content"][class*="animate"],
|
||||
[data-slot="select-content"][class*="animate"],
|
||||
[data-slot="dropdown-menu-content"][class*="animate"] {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
/* Ne pas toucher au transform car il est utilisé pour le positionnement */
|
||||
opacity: 1 !important;
|
||||
will-change: auto !important;
|
||||
}
|
||||
|
||||
/* Override pour tous les états data-state */
|
||||
[data-slot="popover-content"][data-state="open"],
|
||||
[data-slot="popover-content"][data-state="closed"],
|
||||
[data-slot="select-content"][data-state="open"],
|
||||
[data-slot="select-content"][data-state="closed"],
|
||||
[data-slot="dropdown-menu-content"][data-state="open"],
|
||||
[data-slot="dropdown-menu-content"][data-state="closed"] {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
/* Ne pas toucher au transform car il est utilisé pour le positionnement */
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Glassmorphism effect très prononcé */
|
||||
.glass {
|
||||
background: var(--card);
|
||||
backdrop-filter: blur(40px) saturate(200%);
|
||||
-webkit-backdrop-filter: blur(40px) saturate(200%);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow:
|
||||
0 8px 32px -8px color-mix(in srgb, var(--primary) 10%, transparent),
|
||||
inset 0 1px 0 0 color-mix(in srgb, white 20%, transparent);
|
||||
}
|
||||
|
||||
/* Gradient text effect */
|
||||
.gradient-text {
|
||||
background: var(--primary-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Card hover effect avec élévation */
|
||||
.card-hover {
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-hover::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
padding: 1px;
|
||||
background: linear-gradient(135deg,
|
||||
color-mix(in srgb, var(--primary) 30%, transparent) 0%,
|
||||
color-mix(in srgb, var(--chart-2) 20%, transparent) 100%
|
||||
);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-4px) scale(1.01);
|
||||
box-shadow:
|
||||
0 20px 40px -12px color-mix(in srgb, var(--primary) 20%, transparent),
|
||||
0 8px 16px -8px color-mix(in srgb, var(--foreground) 10%, transparent),
|
||||
inset 0 1px 0 0 color-mix(in srgb, white 30%, transparent);
|
||||
}
|
||||
|
||||
.card-hover:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Background fintech moderne avec dégradés animés et formes abstraites */
|
||||
.page-background {
|
||||
position: relative;
|
||||
background: var(--background);
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.98 0.01 280) 0%,
|
||||
oklch(0.97 0.012 270) 50%,
|
||||
oklch(0.98 0.01 290) 100%
|
||||
);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-background::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
right: -50%;
|
||||
bottom: -50%;
|
||||
z-index: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 100% 60% at 0% 0%,
|
||||
color-mix(in srgb, var(--primary) 8%, transparent) 0%,
|
||||
/* Formes abstraites circulaires */
|
||||
radial-gradient(circle 800px at 10% 20%,
|
||||
color-mix(in srgb, var(--primary) 15%, transparent) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(circle 600px at 90% 80%,
|
||||
color-mix(in srgb, var(--chart-2) 12%, transparent) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(circle 500px at 50% 50%,
|
||||
color-mix(in srgb, var(--chart-3) 10%, transparent) 0%,
|
||||
transparent 60%
|
||||
),
|
||||
radial-gradient(ellipse 80% 50% at 100% 100%,
|
||||
color-mix(in srgb, var(--chart-2) 6%, transparent) 0%,
|
||||
transparent 60%
|
||||
radial-gradient(circle 400px at 20% 70%,
|
||||
color-mix(in srgb, var(--chart-4) 8%, transparent) 0%,
|
||||
transparent 65%
|
||||
),
|
||||
radial-gradient(ellipse 60% 40% at 50% 50%,
|
||||
color-mix(in srgb, var(--chart-3) 4%, transparent) 0%,
|
||||
radial-gradient(circle 300px at 80% 30%,
|
||||
color-mix(in srgb, var(--primary-light) 6%, transparent) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
background-size: 100% 100%;
|
||||
background-size: 200% 200%;
|
||||
pointer-events: none;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease;
|
||||
transition: opacity 0.5s ease;
|
||||
animation: gradient-shift 25s ease infinite;
|
||||
}
|
||||
|
||||
.dark .page-background {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.1 0.015 280) 0%,
|
||||
oklch(0.11 0.018 270) 50%,
|
||||
oklch(0.1 0.015 290) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.dark .page-background::before {
|
||||
background:
|
||||
radial-gradient(ellipse 100% 60% at 0% 0%,
|
||||
color-mix(in srgb, var(--primary) 12%, transparent) 0%,
|
||||
radial-gradient(circle 800px at 10% 20%,
|
||||
color-mix(in srgb, var(--primary) 22%, transparent) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(circle 600px at 90% 80%,
|
||||
color-mix(in srgb, var(--chart-2) 18%, transparent) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(circle 500px at 50% 50%,
|
||||
color-mix(in srgb, var(--chart-3) 15%, transparent) 0%,
|
||||
transparent 60%
|
||||
),
|
||||
radial-gradient(ellipse 80% 50% at 100% 100%,
|
||||
color-mix(in srgb, var(--chart-2) 10%, transparent) 0%,
|
||||
transparent 60%
|
||||
radial-gradient(circle 400px at 20% 70%,
|
||||
color-mix(in srgb, var(--chart-4) 12%, transparent) 0%,
|
||||
transparent 65%
|
||||
),
|
||||
radial-gradient(ellipse 60% 40% at 50% 50%,
|
||||
color-mix(in srgb, var(--chart-3) 8%, transparent) 0%,
|
||||
radial-gradient(circle 300px at 80% 30%,
|
||||
color-mix(in srgb, var(--primary-light) 10%, transparent) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
opacity: 1;
|
||||
@@ -256,4 +457,145 @@
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Fintech card styles avec glassmorphism très prononcé */
|
||||
.fintech-card {
|
||||
background: var(--card);
|
||||
backdrop-filter: blur(50px) saturate(200%);
|
||||
-webkit-backdrop-filter: blur(50px) saturate(200%);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow:
|
||||
0 8px 32px -8px color-mix(in srgb, var(--primary) 8%, transparent),
|
||||
0 2px 8px -2px color-mix(in srgb, var(--foreground) 3%, transparent),
|
||||
inset 0 1px 0 0 color-mix(in srgb, white 25%, transparent);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fintech-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
color-mix(in srgb, white 40%, transparent) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.fintech-card:hover {
|
||||
transform: translateY(-6px) scale(1.01);
|
||||
box-shadow:
|
||||
0 24px 48px -12px color-mix(in srgb, var(--primary) 25%, transparent),
|
||||
0 8px 24px -8px color-mix(in srgb, var(--foreground) 8%, transparent),
|
||||
inset 0 1px 0 0 color-mix(in srgb, white 40%, transparent);
|
||||
border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
|
||||
}
|
||||
|
||||
/* Gradient backgrounds for stat cards très vibrants */
|
||||
.stat-card-gradient-1 {
|
||||
background: linear-gradient(135deg,
|
||||
color-mix(in srgb, var(--primary) 12%, var(--card)) 0%,
|
||||
color-mix(in srgb, var(--primary-light) 8%, var(--card)) 50%,
|
||||
color-mix(in srgb, var(--primary) 6%, var(--card)) 100%
|
||||
);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-card-gradient-1::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle,
|
||||
color-mix(in srgb, var(--primary) 20%, transparent) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
opacity: 0.3;
|
||||
animation: gradient-shift 8s ease infinite;
|
||||
}
|
||||
|
||||
.stat-card-gradient-2 {
|
||||
background: linear-gradient(135deg,
|
||||
color-mix(in srgb, var(--success) 12%, var(--card)) 0%,
|
||||
color-mix(in srgb, var(--success) 8%, var(--card)) 50%,
|
||||
color-mix(in srgb, var(--success) 6%, var(--card)) 100%
|
||||
);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-card-gradient-2::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle,
|
||||
color-mix(in srgb, var(--success) 20%, transparent) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
opacity: 0.3;
|
||||
animation: gradient-shift 8s ease infinite;
|
||||
}
|
||||
|
||||
.stat-card-gradient-3 {
|
||||
background: linear-gradient(135deg,
|
||||
color-mix(in srgb, var(--destructive) 12%, var(--card)) 0%,
|
||||
color-mix(in srgb, var(--destructive) 8%, var(--card)) 50%,
|
||||
color-mix(in srgb, var(--destructive) 6%, var(--card)) 100%
|
||||
);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-card-gradient-3::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle,
|
||||
color-mix(in srgb, var(--destructive) 20%, transparent) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
opacity: 0.3;
|
||||
animation: gradient-shift 8s ease infinite;
|
||||
}
|
||||
|
||||
.stat-card-gradient-4 {
|
||||
background: linear-gradient(135deg,
|
||||
color-mix(in srgb, var(--chart-4) 12%, var(--card)) 0%,
|
||||
color-mix(in srgb, var(--chart-4) 8%, var(--card)) 50%,
|
||||
color-mix(in srgb, var(--chart-4) 6%, var(--card)) 100%
|
||||
);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-card-gradient-4::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle,
|
||||
color-mix(in srgb, var(--chart-4) 20%, transparent) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
opacity: 0.3;
|
||||
animation: gradient-shift 8s ease infinite;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user