MateusFF/model-intellect-hub

1/* Custom scrollbar */2::-webkit-scrollbar {3    width: 8px;4    height: 8px;5}6 7::-webkit-scrollbar-track {8    background: transparent;9}10 11::-webkit-scrollbar-thumb {12    background: #cbd5e1;13    border-radius: 4px;14}15 16::-webkit-scrollbar-thumb:hover {17    background: #94a3b8;18}19 20.dark ::-webkit-scrollbar-thumb {21    background: #475569;22}23 24.dark ::-webkit-scrollbar-thumb:hover {25    background: #64748b;26}27 28/* Select styling enhancements */29select {30    background-image: none !important;31}32 33/* Focus ring animation */34.focus-ring-animate {35    animation: focusPulse 0.3s ease-out;36}37 38@keyframes focusPulse {39    0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); }40    100% { box-shadow: 0 0 0 4px rgba(14, 165, 233, 0); }41}42 43/* Modal animations */44.modal-enter {45    animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;46}47 48.modal-exit {49    animation: modalOut 0.2s ease-out forwards;50}51 52@keyframes modalIn {53    from {54        opacity: 0;55        transform: scale(0.95) translateY(10px);56    }57    to {58        opacity: 1;59        transform: scale(1) translateY(0);60    }61}62 63@keyframes modalOut {64    from {65        opacity: 1;66        transform: scale(1) translateY(0);67    }68    to {69        opacity: 0;70        transform: scale(0.95) translateY(10px);71    }72}73 74/* Gradient text animation */75.gradient-text-animate {76    background-size: 200% auto;77    animation: gradientShift 3s ease infinite;78}79 80@keyframes gradientShift {81    0%, 100% { background-position: 0% center; }82    50% { background-position: 100% center; }83}84 85/* Button hover glow */86.btn-glow:hover {87    box-shadow: 0 0 20px rgba(14, 165, 233, 0.4);88}89 90/* Tag animation */91.tag-pop {92    animation: tagPop 0.3s ease-out;93}94 95@keyframes tagPop {96    0% { transform: scale(0); opacity: 0; }97    70% { transform: scale(1.1); }98    100% { transform: scale(1); opacity: 1; }99}100 101/* Smooth transitions */102.transition-smooth {103    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);104}105 106/* Glass effect */107.glass {108    background: rgba(255, 255, 255, 0.7);109    backdrop-filter: blur(10px);110    -webkit-backdrop-filter: blur(10px);111}112 113.dark .glass {114    background: rgba(15, 23, 42, 0.7);115}116 117/* Custom select dropdown styling */118select option {119    padding: 12px;120    font-size: 14px;121}122/* Dropdown menu animations */123#dropdownMenu {124    transform-origin: top;125}126 127/* Info button in dropdown */128.info-btn {129    transition: all 0.2s ease;130}131 132.info-btn:hover {133    transform: scale(1.1);134}135 136.info-btn:active {137    transform: scale(0.95);138}139 140/* Dropdown item hover effects */141.dropdown-item {142    position: relative;143}144 145.dropdown-item::before {146    content: '';147    position: absolute;148    left: 0;149    top: 0;150    bottom: 0;151    width: 3px;152    background: linear-gradient(to bottom, #0ea5e9, #d946ef);153    opacity: 0;154    transition: opacity 0.2s ease;155}156 157.dropdown-item:hover::before {158    opacity: 1;159}160 161/* Dropdown arrow rotation */162#dropdownArrow {163    transition: transform 0.2s ease;164}165 166#dropdownArrow.rotate-180 {167    transform: rotate(180deg);168}169 170/* Custom scrollbar for dropdown */171#dropdownMenu::-webkit-scrollbar {172    width: 6px;173}174 175#dropdownMenu::-webkit-scrollbar-track {176    background: transparent;177    border-radius: 0 8px 8px 0;178}179 180#dropdownMenu::-webkit-scrollbar-thumb {181    background: #cbd5e1;182    border-radius: 3px;183}184 185.dark #dropdownMenu::-webkit-scrollbar-thumb {186    background: #475569;187}188 189/* Dropdown trigger focus state */190#dropdownTrigger:focus,191#dropdownTrigger.ring-2 {192    border-color: transparent;193}194/* Floating label show */195.show-label {196    opacity: 1 !important;197}198 199/* Selected display animation */200.selected-show {201    animation: slideDown 0.3s ease-out;202}203 204@keyframes slideDown {205    from {206        opacity: 0;207        transform: translateY(-10px);208    }209    to {210        opacity: 1;211        transform: translateY(0);212    }213}