1360 lines
39 KiB
CSS
1360 lines
39 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "react-day-picker/style.css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
:root {
|
|
/* 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 très prononcé */
|
|
--card: oklch(1 0 0 / 0.5);
|
|
--card-foreground: oklch(0.1 0.015 280);
|
|
--card-hover: oklch(1 0 0 / 0.65);
|
|
|
|
/* Popover avec backdrop blur très fort */
|
|
--popover: oklch(1 0 0 / 0.95);
|
|
--popover-foreground: oklch(0.1 0.015 280);
|
|
|
|
/* 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.008 280);
|
|
--secondary-foreground: oklch(0.25 0.015 280);
|
|
|
|
/* Muted plus doux */
|
|
--muted: oklch(0.96 0.006 280);
|
|
--muted-foreground: oklch(0.5 0.012 280);
|
|
|
|
/* 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.6 0.26 25);
|
|
--destructive-foreground: oklch(0.99 0 0);
|
|
|
|
/* Bordures fines et subtiles */
|
|
--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 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);
|
|
|
|
/* 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);
|
|
|
|
/* Additional semantic colors */
|
|
--green: oklch(0.68 0.2 150);
|
|
--blue: oklch(0.6 0.2 250);
|
|
--gray: oklch(0.55 0.01 280);
|
|
--gray-light: oklch(0.92 0.005 280);
|
|
--card-column: oklch(0.96 0.006 280);
|
|
|
|
--radius: 1.25rem;
|
|
|
|
/* Sidebar moderne avec glassmorphism très prononcé */
|
|
--sidebar: oklch(1 0 0 / 0.5);
|
|
--sidebar-opaque: oklch(1 0 0);
|
|
--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.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 {
|
|
/* ═══════════════════════════════════════════════════════════════════
|
|
THÈME SOMBRE FINTECH - Design moderne avec profondeur et vibrance
|
|
═══════════════════════════════════════════════════════════════════ */
|
|
|
|
/* Background avec légère teinte bleutée pour profondeur */
|
|
--background: oklch(0.12 0.008 260);
|
|
--foreground: oklch(0.95 0.005 260);
|
|
|
|
/* Cards avec subtile élévation - légèrement plus claires que le fond */
|
|
--card: oklch(0.15 0.01 260);
|
|
--card-foreground: oklch(0.95 0.005 260);
|
|
--card-hover: oklch(0.18 0.012 260);
|
|
|
|
/* Popover avec fond plus dense pour contraste */
|
|
--popover: oklch(0.13 0.01 260);
|
|
--popover-foreground: oklch(0.95 0.005 260);
|
|
|
|
/* Primary: Cyan/Bleu électrique très vibrant */
|
|
--primary: oklch(0.72 0.19 220);
|
|
--primary-foreground: oklch(0.12 0.008 260);
|
|
--primary-gradient: linear-gradient(
|
|
135deg,
|
|
oklch(0.72 0.19 220) 0%,
|
|
oklch(0.65 0.22 240) 50%,
|
|
oklch(0.58 0.24 260) 100%
|
|
);
|
|
--primary-light: oklch(0.78 0.16 220);
|
|
|
|
/* Secondary avec teinte subtile */
|
|
--secondary: oklch(0.2 0.012 260);
|
|
--secondary-foreground: oklch(0.9 0.005 260);
|
|
|
|
/* Muted pour éléments désactivés/secondaires */
|
|
--muted: oklch(0.18 0.01 260);
|
|
--muted-foreground: oklch(0.6 0.015 260);
|
|
|
|
/* Accent pour hover et sélections */
|
|
--accent: oklch(0.22 0.015 260);
|
|
--accent-foreground: oklch(0.72 0.19 220);
|
|
|
|
/* Destructive: Rouge vif mais accessible */
|
|
--destructive: oklch(0.65 0.22 25);
|
|
--destructive-foreground: oklch(0.98 0 0);
|
|
|
|
/* Bordures avec subtile teinte pour cohérence */
|
|
--border: oklch(0.25 0.01 260);
|
|
--input: oklch(0.16 0.01 260);
|
|
--ring: oklch(0.72 0.19 220 / 0.6);
|
|
|
|
/* Palette de graphiques vibrante et harmonieuse */
|
|
--chart-1: oklch(0.72 0.19 220); /* Cyan primaire */
|
|
--chart-2: oklch(0.72 0.2 165); /* Vert émeraude */
|
|
--chart-3: oklch(0.8 0.18 85); /* Ambre doré */
|
|
--chart-4: oklch(0.7 0.22 300); /* Violet */
|
|
--chart-5: oklch(0.68 0.2 350); /* Rose */
|
|
|
|
/* Success: Vert émeraude vibrant */
|
|
--success: oklch(0.72 0.2 165);
|
|
--success-foreground: oklch(0.12 0.008 260);
|
|
|
|
/* Warning: Ambre chaleureux */
|
|
--warning: oklch(0.8 0.18 85);
|
|
--warning-foreground: oklch(0.15 0.01 85);
|
|
|
|
/* Couleurs sémantiques additionnelles */
|
|
--green: oklch(0.72 0.2 165);
|
|
--blue: oklch(0.72 0.19 220);
|
|
--gray: oklch(0.55 0.01 260);
|
|
--gray-light: oklch(0.3 0.008 260);
|
|
--card-column: oklch(0.14 0.008 260);
|
|
|
|
/* Sidebar avec profondeur distincte */
|
|
--sidebar: oklch(0.1 0.01 260);
|
|
--sidebar-opaque: oklch(0.1 0.01 260);
|
|
--sidebar-foreground: oklch(0.9 0.005 260);
|
|
--sidebar-primary: oklch(0.72 0.19 220);
|
|
--sidebar-primary-foreground: oklch(0.12 0.008 260);
|
|
--sidebar-accent: oklch(0.18 0.012 260);
|
|
--sidebar-accent-foreground: oklch(0.9 0.005 260);
|
|
--sidebar-border: oklch(0.2 0.01 260);
|
|
--sidebar-ring: oklch(0.72 0.19 220 / 0.5);
|
|
}
|
|
|
|
@theme inline {
|
|
--font-sans: "Geist", "Geist Fallback";
|
|
--font-mono: "Geist Mono", "Geist Mono Fallback";
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-card-column: var(--card-column);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-success: var(--success);
|
|
--color-success-foreground: var(--success-foreground);
|
|
--color-warning: var(--warning);
|
|
--color-warning-foreground: var(--warning-foreground);
|
|
--color-green: var(--green);
|
|
--color-blue: var(--blue);
|
|
--color-gray: var(--gray);
|
|
--color-gray-light: var(--gray-light);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-5: var(--chart-5);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-opaque: var(--sidebar-opaque);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background;
|
|
color: var(--foreground);
|
|
font-feature-settings:
|
|
"rlig" 1,
|
|
"calt" 1;
|
|
letter-spacing: -0.01em;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.dark body {
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
letter-spacing: -0.02em;
|
|
font-weight: 700;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.dark h1,
|
|
.dark h2,
|
|
.dark h3,
|
|
.dark h4,
|
|
.dark h5,
|
|
.dark h6 {
|
|
color: var(--foreground);
|
|
}
|
|
|
|
p {
|
|
letter-spacing: -0.005em;
|
|
}
|
|
|
|
/* Animations fintech modernes et fluides */
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-12px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
/* Transitions globales désactivées */
|
|
* {
|
|
transition: none !important;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Forcer l'opacité sur les wrappers Radix Portal */
|
|
[data-radix-portal],
|
|
[data-radix-portal] > *,
|
|
[data-radix-popper-content-wrapper],
|
|
[data-radix-popper-content-wrapper] > * {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Forcer l'opacité sur les tooltips Recharts */
|
|
.recharts-tooltip-wrapper,
|
|
.recharts-tooltip-wrapper > *,
|
|
.recharts-tooltip-wrapper > div,
|
|
.recharts-tooltip-wrapper > div > *,
|
|
.recharts-tooltip-cursor {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Forcer l'opacité et le background opaque sur le contenu du tooltip */
|
|
.recharts-tooltip-wrapper > div {
|
|
background-color: var(--background) !important;
|
|
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);
|
|
}
|
|
|
|
.dark .glass {
|
|
background: oklch(0.12 0.01 260 / 0.9);
|
|
backdrop-filter: blur(24px) saturate(140%);
|
|
-webkit-backdrop-filter: blur(24px) saturate(140%);
|
|
border-color: oklch(1 0 0 / 0.08);
|
|
box-shadow:
|
|
0 8px 32px -8px oklch(0 0 0 / 0.5),
|
|
inset 0 1px 0 0 oklch(1 0 0 / 0.05);
|
|
}
|
|
|
|
/* 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 désactivé */
|
|
.card-hover {
|
|
position: relative;
|
|
}
|
|
|
|
.card-hover::before {
|
|
display: none;
|
|
}
|
|
|
|
/* Background fintech moderne avec dégradés animés et formes abstraites */
|
|
.page-background {
|
|
position: relative;
|
|
background: linear-gradient(
|
|
135deg,
|
|
oklch(0.99 0 0) 0%,
|
|
oklch(0.985 0 0) 50%,
|
|
oklch(0.99 0 0) 100%
|
|
);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════
|
|
THÈMES DE FOND - Mode Clair
|
|
═══════════════════════════════════════════════════════════════════ */
|
|
|
|
/* Neutre - Fond élégant et discret */
|
|
.page-background.bg-default {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 100% 60% at 50% 0%,
|
|
oklch(0.97 0.01 260 / 0.5) 0%,
|
|
transparent 50%
|
|
),
|
|
linear-gradient(
|
|
135deg,
|
|
oklch(0.985 0 0) 0%,
|
|
oklch(0.97 0.005 260) 50%,
|
|
oklch(0.985 0 0) 100%
|
|
);
|
|
}
|
|
|
|
/* Océan - Bleu apaisant */
|
|
.page-background.bg-gradient-blue {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 50% at 20% 20%,
|
|
oklch(0.85 0.1 220 / 0.4) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
ellipse 60% 40% at 80% 70%,
|
|
oklch(0.75 0.12 225 / 0.3) 0%,
|
|
transparent 50%
|
|
),
|
|
linear-gradient(
|
|
135deg,
|
|
oklch(0.95 0.03 230) 0%,
|
|
oklch(0.88 0.08 225) 50%,
|
|
oklch(0.78 0.12 220) 100%
|
|
);
|
|
}
|
|
|
|
/* Améthyste - Violet sophistiqué */
|
|
.page-background.bg-gradient-purple {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 50% at 30% 20%,
|
|
oklch(0.82 0.12 300 / 0.4) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
ellipse 60% 40% at 75% 65%,
|
|
oklch(0.72 0.15 290 / 0.3) 0%,
|
|
transparent 50%
|
|
),
|
|
linear-gradient(
|
|
135deg,
|
|
oklch(0.95 0.04 300) 0%,
|
|
oklch(0.88 0.1 295) 50%,
|
|
oklch(0.78 0.15 290) 100%
|
|
);
|
|
}
|
|
|
|
/* Forêt - Vert naturel */
|
|
.page-background.bg-gradient-green {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 50% at 25% 25%,
|
|
oklch(0.82 0.12 160 / 0.4) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
ellipse 60% 40% at 70% 70%,
|
|
oklch(0.72 0.14 150 / 0.3) 0%,
|
|
transparent 50%
|
|
),
|
|
linear-gradient(
|
|
135deg,
|
|
oklch(0.95 0.04 160) 0%,
|
|
oklch(0.88 0.1 155) 50%,
|
|
oklch(0.78 0.14 150) 100%
|
|
);
|
|
}
|
|
|
|
/* Aurore - Orange chaleureux */
|
|
.page-background.bg-gradient-orange {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 50% at 20% 30%,
|
|
oklch(0.88 0.1 60 / 0.4) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
ellipse 60% 40% at 80% 60%,
|
|
oklch(0.8 0.14 45 / 0.3) 0%,
|
|
transparent 50%
|
|
),
|
|
linear-gradient(
|
|
135deg,
|
|
oklch(0.97 0.03 80) 0%,
|
|
oklch(0.92 0.08 60) 50%,
|
|
oklch(0.85 0.14 45) 100%
|
|
);
|
|
}
|
|
|
|
/* Lumineux - Blanc épuré avec subtile profondeur */
|
|
.page-background.bg-solid-light {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 100% 60% at 50% 0%,
|
|
oklch(0.98 0.008 260 / 0.6) 0%,
|
|
transparent 50%
|
|
),
|
|
linear-gradient(135deg, oklch(1 0 0) 0%, oklch(0.98 0.005 260) 100%);
|
|
}
|
|
|
|
.page-background.bg-solid-dark {
|
|
/* Fond noir profond avec subtile teinte bleutée */
|
|
background:
|
|
radial-gradient(
|
|
ellipse 120% 80% at 50% 0%,
|
|
oklch(0.16 0.02 260) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
ellipse 100% 60% at 100% 100%,
|
|
oklch(0.13 0.015 220) 0%,
|
|
transparent 40%
|
|
),
|
|
oklch(0.08 0.012 260) !important;
|
|
}
|
|
|
|
.page-background.bg-custom-image {
|
|
background-image: var(--custom-background-image);
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.page-background.bg-custom-image::before,
|
|
.page-background.bg-solid-light::before {
|
|
display: none;
|
|
}
|
|
|
|
.page-background.bg-solid-dark::before {
|
|
/* Effet de lumière subtil pour profondeur */
|
|
content: "";
|
|
position: fixed;
|
|
top: -50%;
|
|
left: -50%;
|
|
right: -50%;
|
|
bottom: -50%;
|
|
z-index: 0;
|
|
background:
|
|
radial-gradient(
|
|
ellipse 60% 40% at 30% 20%,
|
|
oklch(0.72 0.19 220 / 0.04) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
ellipse 50% 35% at 70% 70%,
|
|
oklch(0.72 0.2 165 / 0.03) 0%,
|
|
transparent 50%
|
|
);
|
|
pointer-events: none;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.page-background::before {
|
|
content: "";
|
|
position: fixed;
|
|
top: -50%;
|
|
left: -50%;
|
|
right: -50%;
|
|
bottom: -50%;
|
|
z-index: 0;
|
|
background:
|
|
/* 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(
|
|
circle 400px at 20% 70%,
|
|
color-mix(in srgb, var(--chart-4) 8%, transparent) 0%,
|
|
transparent 65%
|
|
),
|
|
radial-gradient(
|
|
circle 300px at 80% 30%,
|
|
color-mix(in srgb, var(--primary-light) 6%, transparent) 0%,
|
|
transparent 70%
|
|
);
|
|
background-size: 200% 200%;
|
|
pointer-events: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════
|
|
THÈMES DE FOND - Mode Sombre (système)
|
|
═══════════════════════════════════════════════════════════════════ */
|
|
|
|
/* Neutre sombre - Profondeur élégante */
|
|
.dark .page-background.bg-default {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 120% 80% at 50% 0%,
|
|
oklch(0.2 0.025 260) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
ellipse 100% 60% at 100% 100%,
|
|
oklch(0.16 0.02 220) 0%,
|
|
transparent 40%
|
|
),
|
|
oklch(0.1 0.012 260);
|
|
}
|
|
|
|
/* Océan sombre - Profondeurs marines */
|
|
.dark .page-background.bg-gradient-blue {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 50% at 20% 20%,
|
|
oklch(0.35 0.14 225) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
ellipse 60% 40% at 80% 70%,
|
|
oklch(0.28 0.12 220) 0%,
|
|
transparent 50%
|
|
),
|
|
linear-gradient(
|
|
135deg,
|
|
oklch(0.15 0.05 230) 0%,
|
|
oklch(0.12 0.04 225) 50%,
|
|
oklch(0.08 0.03 220) 100%
|
|
);
|
|
}
|
|
|
|
/* Améthyste sombre - Nuit mystique */
|
|
.dark .page-background.bg-gradient-purple {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 50% at 30% 20%,
|
|
oklch(0.38 0.16 300) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
ellipse 60% 40% at 75% 65%,
|
|
oklch(0.3 0.14 290) 0%,
|
|
transparent 50%
|
|
),
|
|
linear-gradient(
|
|
135deg,
|
|
oklch(0.16 0.07 300) 0%,
|
|
oklch(0.12 0.06 295) 50%,
|
|
oklch(0.08 0.04 290) 100%
|
|
);
|
|
}
|
|
|
|
/* Forêt sombre - Canopée nocturne */
|
|
.dark .page-background.bg-gradient-green {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 50% at 25% 25%,
|
|
oklch(0.38 0.14 160) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
ellipse 60% 40% at 70% 70%,
|
|
oklch(0.3 0.12 150) 0%,
|
|
transparent 50%
|
|
),
|
|
linear-gradient(
|
|
135deg,
|
|
oklch(0.15 0.05 160) 0%,
|
|
oklch(0.12 0.04 155) 50%,
|
|
oklch(0.08 0.03 150) 100%
|
|
);
|
|
}
|
|
|
|
/* Aurore sombre - Braises crépusculaires */
|
|
.dark .page-background.bg-gradient-orange {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 50% at 20% 30%,
|
|
oklch(0.42 0.16 50) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
ellipse 60% 40% at 80% 70%,
|
|
oklch(0.34 0.14 40) 0%,
|
|
transparent 50%
|
|
),
|
|
linear-gradient(
|
|
135deg,
|
|
oklch(0.18 0.07 60) 0%,
|
|
oklch(0.14 0.05 50) 50%,
|
|
oklch(0.08 0.03 45) 100%
|
|
);
|
|
}
|
|
|
|
/* Lumineux en mode sombre - Soft glow */
|
|
.dark .page-background.bg-solid-light {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 100% 60% at 50% 0%,
|
|
oklch(1 0 0 / 0.03) 0%,
|
|
transparent 50%
|
|
),
|
|
linear-gradient(
|
|
135deg,
|
|
oklch(0.98 0.005 260) 0%,
|
|
oklch(0.96 0.008 260) 100%
|
|
);
|
|
}
|
|
|
|
/* Minuit en mode sombre - Identique (déjà sombre) */
|
|
.dark .page-background.bg-solid-dark {
|
|
background: oklch(0.08 0.015 260) !important;
|
|
}
|
|
|
|
.dark .page-background::before {
|
|
/* Effet de lumière subtil en mode sombre */
|
|
content: "";
|
|
position: fixed;
|
|
top: -50%;
|
|
left: -50%;
|
|
right: -50%;
|
|
bottom: -50%;
|
|
z-index: 0;
|
|
background:
|
|
radial-gradient(
|
|
ellipse 60% 40% at 30% 20%,
|
|
color-mix(in srgb, var(--primary) 4%, transparent) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
ellipse 50% 35% at 70% 70%,
|
|
color-mix(in srgb, var(--chart-2) 3%, transparent) 0%,
|
|
transparent 50%
|
|
);
|
|
pointer-events: none;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.page-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Fintech card styles avec effet glassmorphism prononcé */
|
|
.fintech-card {
|
|
background: color-mix(in srgb, var(--card) 70%, transparent);
|
|
backdrop-filter: blur(60px) saturate(200%) brightness(1.05);
|
|
-webkit-backdrop-filter: blur(60px) saturate(200%) brightness(1.05);
|
|
border: none;
|
|
border-radius: calc(var(--radius) + 0.25rem);
|
|
box-shadow:
|
|
0 2px 8px 0 color-mix(in srgb, var(--foreground) 6%, transparent),
|
|
0 8px 24px -4px color-mix(in srgb, var(--primary) 8%, transparent),
|
|
0 16px 48px -8px color-mix(in srgb, var(--foreground) 3%, transparent),
|
|
inset 0 1px 0 0 color-mix(in srgb, white 40%, transparent),
|
|
inset 0 -1px 0 0 color-mix(in srgb, var(--foreground) 2%, transparent);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Texture subtile avec grain/noise */
|
|
.fintech-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: radial-gradient(
|
|
circle at 1px 1px,
|
|
color-mix(in srgb, var(--foreground) 2%, transparent) 1px,
|
|
transparent 0
|
|
);
|
|
background-size: 20px 20px;
|
|
opacity: 0.15;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.dark .fintech-card::before {
|
|
/* Subtile texture grain en mode sombre */
|
|
background-image: radial-gradient(
|
|
circle at 1px 1px,
|
|
oklch(1 0 0 / 0.015) 1px,
|
|
transparent 0
|
|
);
|
|
background-size: 24px 24px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Texture plus prononcée pour les cards de statistiques */
|
|
.stat-card-textured::before {
|
|
background-image:
|
|
radial-gradient(
|
|
circle at 1px 1px,
|
|
color-mix(in srgb, var(--foreground) 3%, transparent) 1px,
|
|
transparent 0
|
|
),
|
|
radial-gradient(
|
|
circle at 11px 11px,
|
|
color-mix(in srgb, var(--foreground) 1.5%, transparent) 1px,
|
|
transparent 0
|
|
);
|
|
background-size:
|
|
16px 16px,
|
|
24px 24px;
|
|
opacity: 0.2;
|
|
z-index: 1;
|
|
}
|
|
|
|
.dark .stat-card-textured::before {
|
|
/* Texture grain subtile en mode sombre */
|
|
background-image: radial-gradient(
|
|
circle at 1px 1px,
|
|
oklch(1 0 0 / 0.02) 1px,
|
|
transparent 0
|
|
);
|
|
background-size: 20px 20px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Effet glass renforcé pour les cards de contenu */
|
|
.fintech-card.card-hover {
|
|
background: color-mix(in srgb, var(--card) 60%, transparent);
|
|
backdrop-filter: blur(80px) saturate(220%) brightness(1.08);
|
|
-webkit-backdrop-filter: blur(80px) saturate(220%) brightness(1.08);
|
|
}
|
|
|
|
.dark .fintech-card.card-hover {
|
|
background: var(--card-hover);
|
|
backdrop-filter: blur(20px) saturate(120%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(120%);
|
|
border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
|
|
}
|
|
|
|
.dark .fintech-card {
|
|
background: var(--card) !important;
|
|
backdrop-filter: blur(16px) saturate(110%) !important;
|
|
-webkit-backdrop-filter: blur(16px) saturate(110%) !important;
|
|
border: 1px solid var(--border) !important;
|
|
box-shadow:
|
|
0 4px 16px -2px oklch(0 0 0 / 0.4),
|
|
0 12px 40px -8px oklch(0 0 0 / 0.3),
|
|
inset 0 1px 0 0 oklch(1 0 0 / 0.03),
|
|
inset 0 0 0 1px oklch(1 0 0 / 0.02) !important;
|
|
}
|
|
|
|
.fintech-card::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
color-mix(in srgb, white 60%, transparent) 20%,
|
|
color-mix(in srgb, white 80%, transparent) 50%,
|
|
color-mix(in srgb, white 60%, transparent) 80%,
|
|
transparent 100%
|
|
);
|
|
opacity: 0.7;
|
|
z-index: 2;
|
|
}
|
|
|
|
.dark .fintech-card::after {
|
|
/* Subtile ligne de lumière sur le bord supérieur */
|
|
height: 1px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
oklch(1 0 0 / 0.06) 20%,
|
|
oklch(1 0 0 / 0.1) 50%,
|
|
oklch(1 0 0 / 0.06) 80%,
|
|
transparent 100%
|
|
);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Gradient backgrounds for stat cards - design moderne et subtil */
|
|
.stat-card-gradient-1 {
|
|
background: linear-gradient(
|
|
135deg,
|
|
color-mix(in srgb, var(--primary) 8%, var(--card)) 0%,
|
|
color-mix(in srgb, var(--primary-light) 5%, var(--card)) 50%,
|
|
color-mix(in srgb, var(--primary) 4%, var(--card)) 100%
|
|
);
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
|
|
}
|
|
|
|
.stat-card-gradient-1::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -30%;
|
|
right: -20%;
|
|
width: 150%;
|
|
height: 150%;
|
|
background: radial-gradient(
|
|
circle,
|
|
color-mix(in srgb, var(--primary) 15%, transparent) 0%,
|
|
transparent 60%
|
|
);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.dark .stat-card-gradient-1 {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 60% at 85% 20%,
|
|
color-mix(in srgb, var(--primary) 8%, transparent) 0%,
|
|
transparent 50%
|
|
),
|
|
var(--card) !important;
|
|
border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--border)) !important;
|
|
}
|
|
|
|
.dark .stat-card-gradient-1::before {
|
|
background: radial-gradient(
|
|
ellipse 100% 80% at 100% 0%,
|
|
color-mix(in srgb, var(--primary) 6%, transparent) 0%,
|
|
transparent 60%
|
|
);
|
|
opacity: 1;
|
|
}
|
|
|
|
.stat-card-gradient-2 {
|
|
background: linear-gradient(
|
|
135deg,
|
|
color-mix(in srgb, var(--success) 8%, var(--card)) 0%,
|
|
color-mix(in srgb, var(--success) 5%, var(--card)) 50%,
|
|
color-mix(in srgb, var(--success) 4%, var(--card)) 100%
|
|
);
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-color: color-mix(in srgb, var(--success) 20%, var(--border));
|
|
}
|
|
|
|
.stat-card-gradient-2::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -30%;
|
|
right: -20%;
|
|
width: 150%;
|
|
height: 150%;
|
|
background: radial-gradient(
|
|
circle,
|
|
color-mix(in srgb, var(--success) 15%, transparent) 0%,
|
|
transparent 60%
|
|
);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.dark .stat-card-gradient-2 {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 60% at 85% 20%,
|
|
color-mix(in srgb, var(--success) 8%, transparent) 0%,
|
|
transparent 50%
|
|
),
|
|
var(--card) !important;
|
|
border: 1px solid color-mix(in srgb, var(--success) 15%, var(--border)) !important;
|
|
}
|
|
|
|
.dark .stat-card-gradient-2::before {
|
|
background: radial-gradient(
|
|
ellipse 100% 80% at 100% 0%,
|
|
color-mix(in srgb, var(--success) 6%, transparent) 0%,
|
|
transparent 60%
|
|
);
|
|
opacity: 1;
|
|
}
|
|
|
|
.stat-card-gradient-3 {
|
|
background: linear-gradient(
|
|
135deg,
|
|
color-mix(in srgb, var(--destructive) 8%, var(--card)) 0%,
|
|
color-mix(in srgb, var(--destructive) 5%, var(--card)) 50%,
|
|
color-mix(in srgb, var(--destructive) 4%, var(--card)) 100%
|
|
);
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-color: color-mix(in srgb, var(--destructive) 20%, var(--border));
|
|
}
|
|
|
|
.stat-card-gradient-3::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -30%;
|
|
right: -20%;
|
|
width: 150%;
|
|
height: 150%;
|
|
background: radial-gradient(
|
|
circle,
|
|
color-mix(in srgb, var(--destructive) 15%, transparent) 0%,
|
|
transparent 60%
|
|
);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.dark .stat-card-gradient-3 {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 60% at 85% 20%,
|
|
color-mix(in srgb, var(--destructive) 8%, transparent) 0%,
|
|
transparent 50%
|
|
),
|
|
var(--card) !important;
|
|
border: 1px solid color-mix(in srgb, var(--destructive) 15%, var(--border)) !important;
|
|
}
|
|
|
|
.dark .stat-card-gradient-3::before {
|
|
background: radial-gradient(
|
|
ellipse 100% 80% at 100% 0%,
|
|
color-mix(in srgb, var(--destructive) 6%, transparent) 0%,
|
|
transparent 60%
|
|
);
|
|
opacity: 1;
|
|
}
|
|
|
|
.stat-card-gradient-4 {
|
|
background: linear-gradient(
|
|
135deg,
|
|
color-mix(in srgb, var(--chart-4) 8%, var(--card)) 0%,
|
|
color-mix(in srgb, var(--chart-4) 5%, var(--card)) 50%,
|
|
color-mix(in srgb, var(--chart-4) 4%, var(--card)) 100%
|
|
);
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-color: color-mix(in srgb, var(--chart-4) 20%, var(--border));
|
|
}
|
|
|
|
.stat-card-gradient-4::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -30%;
|
|
right: -20%;
|
|
width: 150%;
|
|
height: 150%;
|
|
background: radial-gradient(
|
|
circle,
|
|
color-mix(in srgb, var(--chart-4) 15%, transparent) 0%,
|
|
transparent 60%
|
|
);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.dark .stat-card-gradient-4 {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 60% at 85% 20%,
|
|
color-mix(in srgb, var(--chart-4) 8%, transparent) 0%,
|
|
transparent 50%
|
|
),
|
|
var(--card) !important;
|
|
border: 1px solid color-mix(in srgb, var(--chart-4) 15%, var(--border)) !important;
|
|
}
|
|
|
|
.dark .stat-card-gradient-4::before {
|
|
background: radial-gradient(
|
|
ellipse 100% 80% at 100% 0%,
|
|
color-mix(in srgb, var(--chart-4) 6%, transparent) 0%,
|
|
transparent 60%
|
|
);
|
|
opacity: 1;
|
|
}
|
|
|
|
.stat-card-gradient-5 {
|
|
background: linear-gradient(
|
|
135deg,
|
|
color-mix(in srgb, var(--chart-5) 8%, var(--card)) 0%,
|
|
color-mix(in srgb, var(--chart-5) 5%, var(--card)) 50%,
|
|
color-mix(in srgb, var(--chart-5) 4%, var(--card)) 100%
|
|
);
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-color: color-mix(in srgb, var(--chart-5) 20%, var(--border));
|
|
}
|
|
|
|
.stat-card-gradient-5::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -30%;
|
|
right: -20%;
|
|
width: 150%;
|
|
height: 150%;
|
|
background: radial-gradient(
|
|
circle,
|
|
color-mix(in srgb, var(--chart-5) 15%, transparent) 0%,
|
|
transparent 60%
|
|
);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.dark .stat-card-gradient-5 {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 60% at 85% 20%,
|
|
color-mix(in srgb, var(--chart-5) 8%, transparent) 0%,
|
|
transparent 50%
|
|
),
|
|
var(--card) !important;
|
|
border: 1px solid color-mix(in srgb, var(--chart-5) 15%, var(--border)) !important;
|
|
}
|
|
|
|
.dark .stat-card-gradient-5::before {
|
|
background: radial-gradient(
|
|
ellipse 100% 80% at 100% 0%,
|
|
color-mix(in srgb, var(--chart-5) 6%, transparent) 0%,
|
|
transparent 60%
|
|
);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Force la couleur des titres en mode sombre */
|
|
.dark h1,
|
|
.dark h2,
|
|
.dark h3,
|
|
.dark h4,
|
|
.dark h5,
|
|
.dark h6,
|
|
.dark .text-foreground,
|
|
html.dark h1,
|
|
html.dark h2,
|
|
html.dark h3,
|
|
html.dark h4,
|
|
html.dark h5,
|
|
html.dark h6,
|
|
html.dark .text-foreground {
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════
|
|
FOND SOLIDE SOMBRE - Force le thème sombre complet
|
|
═══════════════════════════════════════════════════════════════════ */
|
|
.page-background.bg-solid-dark {
|
|
/* Forcer toutes les variables du thème sombre */
|
|
--background: oklch(0.12 0.008 260);
|
|
--foreground: oklch(0.95 0.005 260);
|
|
--card: oklch(0.15 0.01 260);
|
|
--card-foreground: oklch(0.95 0.005 260);
|
|
--card-hover: oklch(0.18 0.012 260);
|
|
--popover: oklch(0.13 0.01 260);
|
|
--popover-foreground: oklch(0.95 0.005 260);
|
|
--primary: oklch(0.72 0.19 220);
|
|
--primary-foreground: oklch(0.12 0.008 260);
|
|
--primary-light: oklch(0.78 0.16 220);
|
|
--secondary: oklch(0.2 0.012 260);
|
|
--secondary-foreground: oklch(0.9 0.005 260);
|
|
--muted: oklch(0.18 0.01 260);
|
|
--muted-foreground: oklch(0.6 0.015 260);
|
|
--accent: oklch(0.22 0.015 260);
|
|
--accent-foreground: oklch(0.72 0.19 220);
|
|
--destructive: oklch(0.65 0.22 25);
|
|
--destructive-foreground: oklch(0.98 0 0);
|
|
--border: oklch(0.25 0.01 260);
|
|
--input: oklch(0.16 0.01 260);
|
|
--ring: oklch(0.72 0.19 220 / 0.6);
|
|
--success: oklch(0.72 0.2 165);
|
|
--success-foreground: oklch(0.12 0.008 260);
|
|
--warning: oklch(0.8 0.18 85);
|
|
--warning-foreground: oklch(0.15 0.01 85);
|
|
--chart-1: oklch(0.72 0.19 220);
|
|
--chart-2: oklch(0.72 0.2 165);
|
|
--chart-3: oklch(0.8 0.18 85);
|
|
--chart-4: oklch(0.7 0.22 300);
|
|
--chart-5: oklch(0.68 0.2 350);
|
|
--green: oklch(0.72 0.2 165);
|
|
--blue: oklch(0.72 0.19 220);
|
|
--gray: oklch(0.55 0.01 260);
|
|
--gray-light: oklch(0.3 0.008 260);
|
|
--card-column: oklch(0.14 0.008 260);
|
|
--sidebar: oklch(0.1 0.01 260);
|
|
--sidebar-foreground: oklch(0.9 0.005 260);
|
|
--sidebar-primary: oklch(0.72 0.19 220);
|
|
--sidebar-primary-foreground: oklch(0.12 0.008 260);
|
|
--sidebar-accent: oklch(0.18 0.012 260);
|
|
--sidebar-accent-foreground: oklch(0.9 0.005 260);
|
|
--sidebar-border: oklch(0.2 0.01 260);
|
|
--sidebar-ring: oklch(0.72 0.19 220 / 0.5);
|
|
}
|
|
|
|
/* Cards avec effet glass subtil en mode solid-dark */
|
|
.page-background.bg-solid-dark .fintech-card {
|
|
background: var(--card) !important;
|
|
backdrop-filter: blur(16px) saturate(110%) !important;
|
|
-webkit-backdrop-filter: blur(16px) saturate(110%) !important;
|
|
border: 1px solid var(--border) !important;
|
|
box-shadow:
|
|
0 4px 16px -2px oklch(0 0 0 / 0.4),
|
|
0 12px 40px -8px oklch(0 0 0 / 0.3),
|
|
inset 0 1px 0 0 oklch(1 0 0 / 0.03),
|
|
inset 0 0 0 1px oklch(1 0 0 / 0.02) !important;
|
|
}
|
|
|
|
.page-background.bg-solid-dark .fintech-card::before {
|
|
background-image: radial-gradient(
|
|
circle at 1px 1px,
|
|
oklch(1 0 0 / 0.015) 1px,
|
|
transparent 0
|
|
);
|
|
background-size: 24px 24px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.page-background.bg-solid-dark .fintech-card::after {
|
|
height: 1px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
oklch(1 0 0 / 0.06) 20%,
|
|
oklch(1 0 0 / 0.1) 50%,
|
|
oklch(1 0 0 / 0.06) 80%,
|
|
transparent 100%
|
|
);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Glass effect en mode solid-dark */
|
|
.page-background.bg-solid-dark .glass {
|
|
background: oklch(0.12 0.01 260 / 0.9);
|
|
backdrop-filter: blur(24px) saturate(140%);
|
|
-webkit-backdrop-filter: blur(24px) saturate(140%);
|
|
border-color: oklch(1 0 0 / 0.08);
|
|
box-shadow:
|
|
0 8px 32px -8px oklch(0 0 0 / 0.5),
|
|
inset 0 1px 0 0 oklch(1 0 0 / 0.05);
|
|
}
|
|
|
|
/* Stat cards avec glow subtil en mode solid-dark */
|
|
.page-background.bg-solid-dark .stat-card-gradient-1 {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 60% at 85% 20%,
|
|
color-mix(in srgb, var(--primary) 8%, transparent) 0%,
|
|
transparent 50%
|
|
),
|
|
var(--card) !important;
|
|
border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--border)) !important;
|
|
}
|
|
|
|
.page-background.bg-solid-dark .stat-card-gradient-2 {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 60% at 85% 20%,
|
|
color-mix(in srgb, var(--success) 8%, transparent) 0%,
|
|
transparent 50%
|
|
),
|
|
var(--card) !important;
|
|
border: 1px solid color-mix(in srgb, var(--success) 15%, var(--border)) !important;
|
|
}
|
|
|
|
.page-background.bg-solid-dark .stat-card-gradient-3 {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 60% at 85% 20%,
|
|
color-mix(in srgb, var(--destructive) 8%, transparent) 0%,
|
|
transparent 50%
|
|
),
|
|
var(--card) !important;
|
|
border: 1px solid color-mix(in srgb, var(--destructive) 15%, var(--border)) !important;
|
|
}
|
|
|
|
.page-background.bg-solid-dark .stat-card-gradient-4 {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 60% at 85% 20%,
|
|
color-mix(in srgb, var(--chart-4) 8%, transparent) 0%,
|
|
transparent 50%
|
|
),
|
|
var(--card) !important;
|
|
border: 1px solid color-mix(in srgb, var(--chart-4) 15%, var(--border)) !important;
|
|
}
|
|
|
|
.page-background.bg-solid-dark .stat-card-gradient-5 {
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 60% at 85% 20%,
|
|
color-mix(in srgb, var(--chart-5) 8%, transparent) 0%,
|
|
transparent 50%
|
|
),
|
|
var(--card) !important;
|
|
border: 1px solid color-mix(in srgb, var(--chart-5) 15%, var(--border)) !important;
|
|
}
|
|
}
|