@import "tailwindcss"; @plugin "@tailwindcss/forms"; @theme inline { --color-bg-green: #3A5F0B; --color-bg-green-2: #4B7510; --color-form-green: #2D4608; --color-title-yellow: #F4D35E; --color-secondary-text: rgba(224, 231, 255, 0.8); --color-primary-yellow: #cca508; --color-team-a: #1E3A8A; --color-team-b: #7F1D1D; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } @media (prefers-color-scheme: dark) { :root { --background: #3A5F0B; --foreground: #ffffff; } } @layer components { .form-text-input { width: 100%; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; background-color: rgba(0, 0, 0, 0.25); border-width: 1px; border-color: var(--color-form-green); color: rgba(199, 210, 254, 0.8); transition: all 0.2s; outline: none; } .form-text-input:focus { border-color: var(--color-primary-yellow); box-shadow: 0 0 0 2px var(--color-primary-yellow) inset; } .btn-primary { padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; border-radius: 1rem; background-image: linear-gradient(to right, #F59E0B, #D97706); color: #ffffff; font-weight: bold; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); transition: all 0.2s; } .btn-primary:active { transform: scale(0.95); } } /* ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.150s; } */ /* app/assets/stylesheets/view_transitions.css */ /* Réglages iOS-ish */ :root { --vt-duration: 260ms; /* ajuste 150–320ms */ --vt-ease: cubic-bezier(.22,.61,.36,1); --vt-shift: 12%; /* parallaxe de la vue sortante */ --vt-dim: .96; /* léger assombrissement */ --vt-scale: .985; /* micro-scale de la vue sortante */ } /* FORWARD (par défaut) — nouvelle vue glisse de droite */ ::view-transition-old(root) { animation: vt-old var(--vt-duration) var(--vt-ease) both; } ::view-transition-new(root) { animation: vt-new var(--vt-duration) var(--vt-ease) both; } /* BACK — inverse la direction si vous posez l’attribut ci-dessous sur */ html[data-transition-direction="back"] ::view-transition-old(root) { animation: vt-new var(--vt-duration) var(--vt-ease) reverse both; } html[data-transition-direction="back"] ::view-transition-new(root) { animation: vt-old var(--vt-duration) var(--vt-ease) reverse both; } /* Clés d’anim (style iOS) */ @keyframes vt-old { from { transform: translateX(0) scale(1); filter: brightness(1); } to { transform: translateX(calc(-1 * var(--vt-shift))) scale(var(--vt-scale)); filter: brightness(var(--vt-dim)); } } @keyframes vt-new { from { transform: translateX(100%); box-shadow: 0 0 0 rgba(0,0,0,0); } to { transform: translateX(0); box-shadow: 0 0 24px rgba(0,0,0,.12); } } /* Respecte l’accessibilité */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } } /* Animation de fondu concernant les notices */ @keyframes fadeOut { to { opacity: 0; visibility: hidden; } } .notice { animation: fadeOut 0.5s ease-in-out 3s forwards; } @keyframes slideGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .animate-slide-gradient { animation: slideGradient 5s ease-in-out infinite; background-size: 200% 200%; } /* Prevent scrolling while dialog is open */ body:has(dialog[data-dialog-target="dialog"][open]) { overflow: hidden; } @keyframes fade-in-dialog { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-out-dialog { 0% { opacity: 1; } 100% { opacity: 0; } } /* Add animations */ dialog[data-dialog-target="dialog"][open] { animation: fade-in-dialog 200ms forwards; } dialog[data-dialog-target="dialog"][closing] { animation: fade-out-dialog 200ms forwards; } dialog::backdrop { @apply bg-black/0 transition-colors duration-300 ease-out; } dialog[open]::backdrop { @apply bg-black/50; } /* dialog::backdrop { animation: fade-in-dialog 200ms forwards; } */ /* Styles pour l’autocomplétion Google Maps */ .pac-container { background-color: #2D4608 !important; /* fond sombre translucide */ border: 1px solid var(--color-form-green) !important; border-radius: 0.375rem !important; /* arrondi */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5) !important; font-family: inherit !important; color: white !important; /* même couleur que tes inputs */ z-index: 9999 !important; /* au-dessus de tout */ } .pac-item { padding: 0.5rem 1rem !important; font-size: 0.9rem !important; background-color: transparent !important; } .pac-item span { color: rgba(224, 231, 255, 0.8) !important; /* couleur secondaire */ } .pac-item:hover { background-color: rgba(255, 255, 255, 0.1) !important; cursor: pointer; } .pac-item-query { color: #fff !important; /* mot clé mis en avant */ }