127 lines
4.5 KiB
CSS
127 lines
4.5 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Configuration Tailwind v4 via CSS custom properties - Variables globales */
|
|
@layer base {
|
|
:root {
|
|
/* Polices */
|
|
--font-heading: 'Dela Gothic One', sans-serif;
|
|
--font-body: 'Roboto', sans-serif;
|
|
|
|
/* Couleurs personnalisées La Banquise */
|
|
--color-banquise-blue: 64, 180, 255;
|
|
--color-banquise-blue-hex: #40B4FF;
|
|
--color-banquise-blue-dark: 31, 93, 137;
|
|
--color-banquise-blue-dark-hex: #1F5D89;
|
|
--color-banquise-blue-light: 105, 183, 226;
|
|
--color-banquise-blue-light-hex: #69B7E2;
|
|
--color-banquise-blue-lightest: 165, 240, 255;
|
|
--color-banquise-blue-lightest-hex: #A5F0FF;
|
|
--color-banquise-gray: #F6F6F6;
|
|
|
|
/* Couleurs Discord officielles */
|
|
--color-discord-blurple: #5865F2;
|
|
--color-discord-dark: #4752C4;
|
|
--color-discord-old-blurple: #7289DA;
|
|
--color-discord-old-dark: #5B6EAE;
|
|
|
|
/* Transitions communes */
|
|
--transition-default: all 0.3s ease-in-out;
|
|
--transition-fast: all 0.2s ease-in-out;
|
|
|
|
/* Spacing commun */
|
|
--spacing-navbar: 4rem;
|
|
}
|
|
}
|
|
|
|
/* Minimal, valid utility helpers avec variables optimisées */
|
|
@layer utilities {
|
|
/* Text colors */
|
|
.text-banquise-blue { color: var(--color-banquise-blue-hex); }
|
|
.text-banquise-blue-dark { color: var(--color-banquise-blue-dark-hex); }
|
|
.text-banquise-blue-light { color: var(--color-banquise-blue-light-hex); }
|
|
.text-banquise-blue-lightest { color: var(--color-banquise-blue-lightest-hex); }
|
|
.text-banquise-gray { color: var(--color-banquise-gray); }
|
|
.text-discord { color: var(--color-discord-blurple); }
|
|
|
|
/* Background colors */
|
|
.bg-banquise-blue { background-color: var(--color-banquise-blue-hex); }
|
|
.bg-banquise-blue-dark { background-color: var(--color-banquise-blue-dark-hex); }
|
|
.bg-banquise-blue-light { background-color: var(--color-banquise-blue-light-hex); }
|
|
.bg-banquise-blue-lightest { background-color: var(--color-banquise-blue-lightest-hex); }
|
|
.bg-banquise-gray { background-color: var(--color-banquise-gray); }
|
|
.bg-discord { background-color: var(--color-discord-blurple); }
|
|
|
|
/* Opacity helpers using rgba() */
|
|
.bg-banquise-blue-5 { background-color: rgba(var(--color-banquise-blue), 0.05); }
|
|
.bg-banquise-blue-10 { background-color: rgba(var(--color-banquise-blue), 0.10); }
|
|
.bg-banquise-blue-20 { background-color: rgba(var(--color-banquise-blue), 0.20); }
|
|
.bg-banquise-blue-dark-10 { background-color: rgba(var(--color-banquise-blue-dark), 0.10); }
|
|
|
|
/* Border colors */
|
|
.border-banquise-blue { border-color: var(--color-banquise-blue-hex); }
|
|
.border-banquise-blue-lightest-30 { border-color: rgba(var(--color-banquise-blue-lightest), 0.3); }
|
|
|
|
/* Gradients shortcuts */
|
|
.from-banquise-blue { --tw-gradient-from: var(--color-banquise-blue-hex); }
|
|
.from-banquise-blue-dark { --tw-gradient-from: var(--color-banquise-blue-dark-hex); }
|
|
.via-banquise-blue { --tw-gradient-via: var(--color-banquise-blue-hex); }
|
|
.to-banquise-blue { --tw-gradient-to: var(--color-banquise-blue-hex); }
|
|
|
|
/* Shadow helpers */
|
|
.shadow-banquise-blue-20 { box-shadow: 0 4px 6px -1px rgba(var(--color-banquise-blue), 0.20); }
|
|
|
|
/* Transitions communes */
|
|
.transition-default { transition: var(--transition-default); }
|
|
.transition-fast { transition: var(--transition-fast); }
|
|
}
|
|
|
|
/* Animations optimisées */
|
|
@keyframes gentle-float {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
50% { transform: translateY(-15px) rotate(1deg); }
|
|
}
|
|
|
|
@keyframes bounce-up {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-4px); }
|
|
}
|
|
|
|
.animate-gentle-float { animation: gentle-float 6s ease-in-out infinite; }
|
|
.scroll-to-top:hover { animation: bounce-up 0.6s ease-in-out; }
|
|
|
|
/* Configuration globale optimisée */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.animate-gentle-float,
|
|
.animate-ping,
|
|
.animate-pulse {
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
html { scroll-behavior: smooth; }
|
|
body { overflow-x: hidden; }
|
|
|
|
/* Scrollbar unifié pour tous les éléments */
|
|
.custom-scrollbar,
|
|
.popup-content {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(31,93,137,0.3) transparent;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar,
|
|
.popup-content::-webkit-scrollbar { width: 6px; }
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track,
|
|
.popup-content::-webkit-scrollbar-track { background: transparent; }
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb,
|
|
.popup-content::-webkit-scrollbar-thumb {
|
|
background: rgba(31,93,137,0.3);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover,
|
|
.popup-content::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(31,93,137,0.5);
|
|
}
|