CSNET/thairice-ndvi-visualizer

1/* ThaiRice NDVI Visualizer - Main Styles */2 3/* Custom Scrollbar */4::-webkit-scrollbar {5    width: 10px;6}7 8::-webkit-scrollbar-track {9    background: #f1f1f1;10}11 12::-webkit-scrollbar-thumb {13    background: #10b981;14    border-radius: 5px;15}16 17::-webkit-scrollbar-thumb:hover {18    background: #059669;19}20 21/* Smooth Scrolling */22html {23    scroll-behavior: smooth;24}25 26/* Custom Animations */27@keyframes fadeInUp {28    from {29        opacity: 0;30        transform: translateY(20px);31    }32    to {33        opacity: 1;34        transform: translateY(0);35    }36}37 38@keyframes pulse {39    0%, 100% {40        opacity: 1;41    }42    50% {43        opacity: 0.7;44    }45}46 47@keyframes gradientShift {48    0% {49        background-position: 0% 50%;50    }51    50% {52        background-position: 100% 50%;53    }54    100% {55        background-position: 0% 50%;56    }57}58 59/* Animation Classes */60.fade-in-up {61    animation: fadeInUp 0.6s ease-out forwards;62}63 64.pulse-slow {65    animation: pulse 2s infinite;66}67 68.gradient-shift {69    background-size: 200% 200%;70    animation: gradientShift 3s ease infinite;71}72 73/* Custom Components */74.ndvi-gradient {75    background: linear-gradient(90deg, 76        #d32f2f 0%, 77        #f57c00 20%, 78        #fbc02d 40%, 79        #7cb342 60%, 80        #388e3c 80%, 81        #1b5e20 100%);82}83 84.health-indicator {85    position: relative;86}87 88.health-indicator::after {89    content: '';90    position: absolute;91    top: -4px;92    right: -4px;93    width: 12px;94    height: 12px;95    border-radius: 50%;96    background-color: #10b981;97    border: 2px solid white;98    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);99}100 101/* Map Controls */102.map-control {103    transition: all 0.2s ease;104    backdrop-filter: blur(10px);105}106 107.map-control:hover {108    transform: scale(1.05);109    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);110}111 112/* Card Hover Effects */113.hover-lift {114    transition: all 0.3s ease;115}116 117.hover-lift:hover {118    transform: translateY(-5px);119    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);120}121 122/* Loading States */123.loading-shimmer {124    background: linear-gradient(90deg, 125        #f0f0f0 25%, 126        #e0e0e0 50%, 127        #f0f0f0 75%);128    background-size: 200% 100%;129    animation: shimmer 1.5s infinite;130}131 132@keyframes shimmer {133    0% {134        background-position: -200% 0;135    }136    100% {137        background-position: 200% 0;138    }139}140 141/* Tooltip Styles */142.tooltip {143    position: fixed;144    z-index: 9999;145    pointer-events: none;146    opacity: 0;147    animation: tooltipFadeIn 0.2s ease forwards;148}149 150@keyframes tooltipFadeIn {151    from {152        opacity: 0;153        transform: translateY(10px);154    }155    to {156        opacity: 1;157        transform: translateY(0);158    }159}160 161/* Responsive Typography */162@media (max-width: 640px) {163    .responsive-text {164        font-size: 0.875rem;165    }166}167 168/* Custom Borders */169.border-gradient {170    border: 2px solid transparent;171    background: linear-gradient(white, white) padding-box,172                linear-gradient(90deg, #10b981, #059669) border-box;173}174 175/* Focus States */176.focus-ring:focus {177    outline: none;178    ring-width: 3px;179    ring-color: rgba(16, 185, 129, 0.5);180    ring-offset: 2px;181}182 183/* Print Styles */184@media print {185    .no-print {186        display: none !important;187    }188    189    .print-only {190        display: block !important;191    }192}