44 lines
1.3 KiB
CSS
44 lines
1.3 KiB
CSS
@source "../components";
|
|
|
|
@layer components {
|
|
/**
|
|
* Convención: .brand-[surface/text]-[escala]-[dirección]
|
|
* Requiere dark mode activo en Tailwind (class o media).
|
|
*/
|
|
|
|
/* Fondo suave diagonal */
|
|
.brand-surface-50-br {
|
|
@apply bg-gradient-to-br from-blue-50 via-violet-50 to-purple-50
|
|
dark:from-blue-950 dark:via-violet-950 dark:to-purple-950;
|
|
}
|
|
|
|
.brand-surface-100-br {
|
|
@apply bg-gradient-to-br from-blue-100 via-violet-100 to-purple-100
|
|
dark:from-blue-900 dark:via-violet-900 dark:to-purple-900;
|
|
}
|
|
|
|
/* Fondo suave horizontal */
|
|
.brand-surface-50-x {
|
|
@apply bg-gradient-to-r from-blue-50 to-violet-50
|
|
hover:from-blue-50 hover:to-violet-50
|
|
dark:from-blue-900 dark:to-violet-900;
|
|
}
|
|
|
|
.brand-surface-100-x {
|
|
@apply bg-gradient-to-r from-blue-100 to-violet-100
|
|
hover:from-blue-100 hover:to-violet-100
|
|
dark:from-blue-900 dark:to-violet-900;
|
|
}
|
|
|
|
.brand-surface-200-x {
|
|
@apply bg-gradient-to-r from-blue-200 to-violet-200
|
|
dark:from-blue-800 dark:to-violet-800;
|
|
}
|
|
|
|
/* Gradiente para texto (intenso) */
|
|
.brand-text-strong-x {
|
|
@apply bg-gradient-to-r from-blue-600 to-violet-600 bg-clip-text text-transparent antialiased
|
|
dark:from-blue-400 dark:to-violet-400;
|
|
}
|
|
}
|