Prithvi23111/solarshine-pro-solutions
0
1/* Custom styles that can't be easily done with Tailwind */2@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');3body {4 font-family: 'Poppins', sans-serif;5 scroll-behavior: smooth;6 background-color: #f9f7f0;7 background-image: 8 radial-gradient(at 0% 0%, rgba(34, 197, 94, 0.03) 0px, transparent 50%),9 radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.03) 0px, transparent 50%);10}11 12.dark body {13 background-color: #0f172a;14 background-image: 15 radial-gradient(at 0% 0%, rgba(34, 197, 94, 0.05) 0px, transparent 50%),16 radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.05) 0px, transparent 50%);17}18/* Custom scrollbar */19::-webkit-scrollbar {20 width: 8px;21}22 23::-webkit-scrollbar-track {24 background: #f1f1f1;25}26 27::-webkit-scrollbar-thumb {28 background: #22c55e;29 border-radius: 4px;30}31 32.dark ::-webkit-scrollbar-track {33 background: #1f2937;34}35 36.dark ::-webkit-scrollbar-thumb {37 background: #10b981;38}39 40/* Animation for buttons */41.btn-animate {42 transition: all 0.3s ease;43 transform: translateY(0);44}45 46.btn-animate:hover {47 transform: translateY(-2px);48}49 50/* Form input focus styles */51input:focus, textarea:focus, select:focus {52 outline: none;53 box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);54}55 56.dark input:focus, .dark textarea:focus, .dark select:focus {57 box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);58}59/* Project filter button styles */60.project-filter-btn {61 @apply px-4 py-2 rounded-lg font-medium transition border border-transparent;62}63 64.project-filter-btn.active {65 @apply bg-primary-500 text-white;66}67 68.project-filter-btn:not(.active) {69 @apply border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700;70}71 72/* Project card hover effect */73.project-card {74 transition: transform 0.3s ease, box-shadow 0.3s ease;75}76 77.project-card:hover {78 transform: translateY(-5px);79 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);80}81 82.dark .project-card:hover {83 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);84}85 86/* Calculator slider styles */87input[type="range"] {88 -webkit-appearance: none;89 height: 6px;90 background: #e5e7eb;91 border-radius: 3px;92}93 94input[type="range"]::-webkit-slider-thumb {95 -webkit-appearance: none;96 width: 18px;97 height: 18px;98 background: #22c55e;99 border-radius: 50%;100 cursor: pointer;101}102 103.dark input[type="range"] {104 background: #4b5563;105}106 107.dark input[type="range"]::-webkit-slider-thumb {108 background: #10b981;109}