CoolFace
Apppublic

Prithvi23111/solarshine-pro-solutions

sourceHugging Faceupdated 9mo agoView on Hugging Face
0likes
style.css109 linesDownload Raw Back to root
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}