146 lines
No EOL
2.4 KiB
CSS
146 lines
No EOL
2.4 KiB
CSS
@import 'tailwindcss/base';
|
|
@import 'tailwindcss/components';
|
|
@import 'tailwindcss/utilities';
|
|
|
|
/* Custom styles */
|
|
html, body {
|
|
@apply antialiased;
|
|
}
|
|
|
|
body {
|
|
@apply bg-gray-100;
|
|
}
|
|
|
|
/* Mobile-first approach */
|
|
.container {
|
|
@apply px-4 sm:px-6 lg:px-8;
|
|
}
|
|
|
|
/* Header styles */
|
|
.header-nav {
|
|
@apply flex flex-col sm:flex-row items-center justify-between;
|
|
}
|
|
|
|
.nav-item {
|
|
@apply block py-2 px-4 text-center sm:inline-block sm:py-0;
|
|
}
|
|
|
|
/* Footer styles */
|
|
.footer-content {
|
|
@apply flex flex-col sm:flex-row justify-between items-start sm:items-center;
|
|
}
|
|
|
|
.footer-section {
|
|
@apply w-full sm:w-1/3 mb-6 sm:mb-0;
|
|
}
|
|
|
|
/* Form styles */
|
|
.form-input {
|
|
@apply w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#8C1D40] focus:border-transparent;
|
|
}
|
|
|
|
/* Button styles */
|
|
.btn {
|
|
@apply px-4 py-2 rounded-md transition duration-300 ease-in-out;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply bg-[#8C1D40] text-white hover:bg-[#6B1631];
|
|
}
|
|
|
|
/* Responsive typography */
|
|
h1 {
|
|
@apply text-3xl sm:text-4xl font-bold;
|
|
}
|
|
|
|
h2 {
|
|
@apply text-2xl sm:text-3xl font-semibold;
|
|
}
|
|
|
|
/* Custom scrollbar for webkit browsers */
|
|
::-webkit-scrollbar {
|
|
@apply w-2;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-gray-200;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-[#8C1D40] rounded-full;
|
|
}
|
|
|
|
/* Smooth scrolling for the entire page */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Improved focus styles for accessibility */
|
|
*:focus {
|
|
@apply outline-none ring-2 ring-[#8C1D40] ring-opacity-50;
|
|
}
|
|
|
|
/* Custom utility classes */
|
|
.text-shadow {
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.hover-grow {
|
|
@apply transition-transform duration-300 ease-in-out;
|
|
}
|
|
|
|
.hover-grow:hover {
|
|
@apply transform scale-105;
|
|
}
|
|
|
|
/* Responsive grid layouts */
|
|
.grid-responsive {
|
|
@apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6;
|
|
}
|
|
|
|
/* Custom animations */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.animate-fadeIn {
|
|
animation: fadeIn 0.5s ease-in-out;
|
|
}
|
|
|
|
/* Modal styles */
|
|
.modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: white;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.75);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.modal {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 80%;
|
|
max-width: 1000px;
|
|
height: 90vh;
|
|
border-radius: 8px;
|
|
}
|
|
} |