88 lines
3.8 KiB
CSS
88 lines
3.8 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Variables CSS pour les polices et couleurs personnalisées */
|
|
:root {
|
|
--font-heading: 'Dela Gothic One', sans-serif;
|
|
--font-body: 'Roboto', sans-serif;
|
|
|
|
/* Couleurs personnalisées La Banquise */
|
|
--color-banquise-blue: 64, 180, 255; /* RGB for reuse in rgba() */
|
|
--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;
|
|
}
|
|
|
|
/* Minimal, valid utility helpers that rely on CSS variables and rgba() */
|
|
@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); }
|
|
|
|
/* 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); }
|
|
|
|
/* Opacity helpers using rgba() and the stored RGB variables */
|
|
.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 (use with existing Tailwind gradient utilities) */
|
|
.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); }
|
|
|
|
/* Simple shadow helpers */
|
|
.shadow-banquise-blue\/20 { box-shadow: 0 4px 6px -1px rgba(var(--color-banquise-blue), 0.20); }
|
|
}
|
|
|
|
/* Animations kept as valid keyframes */
|
|
@keyframes gentle-float {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
50% { transform: translateY(-15px) rotate(1deg); }
|
|
}
|
|
|
|
.animate-gentle-float { animation: gentle-float 6s ease-in-out infinite; }
|
|
|
|
@keyframes bounce-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
|
|
.scroll-to-top:hover { animation: bounce-up 0.6s ease-in-out; }
|
|
|
|
/* Accessibility: respect reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.animate-gentle-float,
|
|
.animate-ping,
|
|
.animate-pulse {
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
/* Global improvements */
|
|
html { scroll-behavior: smooth; }
|
|
body { overflow-x: hidden; }
|
|
|
|
/* Scrollbar styles for popup content */
|
|
.popup-content { scrollbar-width: thin; scrollbar-color: rgba(31,93,137,0.3) transparent; }
|
|
.popup-content::-webkit-scrollbar { width: 6px; }
|
|
.popup-content::-webkit-scrollbar-track { background: transparent; }
|
|
.popup-content::-webkit-scrollbar-thumb { background: rgba(31,93,137,0.3); border-radius: 3px; }
|
|
.popup-content::-webkit-scrollbar-thumb:hover { background: rgba(31,93,137,0.5); }
|