284 lines
8.1 KiB
JavaScript
284 lines
8.1 KiB
JavaScript
// tailwind.config.mjs
|
|
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Nigerian flag colors as primary palette
|
|
'nigerian-green': {
|
|
50: '#f0fdf4',
|
|
100: '#dcfce7',
|
|
200: '#bbf7d0',
|
|
300: '#86efac',
|
|
400: '#4ade80',
|
|
500: '#22c55e',
|
|
600: '#16a34a',
|
|
700: '#15803d',
|
|
800: '#166534',
|
|
900: '#14532d',
|
|
},
|
|
'nigerian-white': {
|
|
50: '#ffffff',
|
|
100: '#fefefe',
|
|
200: '#fafafa',
|
|
300: '#f5f5f5',
|
|
400: '#efefef',
|
|
500: '#e5e5e5',
|
|
},
|
|
// Rich cultural colors inspired by Nigerian textiles
|
|
'kente-gold': {
|
|
50: '#fffbeb',
|
|
100: '#fef3c7',
|
|
200: '#fde68a',
|
|
300: '#fcd34d',
|
|
400: '#fbbf24',
|
|
500: '#f59e0b',
|
|
600: '#d97706',
|
|
700: '#b45309',
|
|
800: '#92400e',
|
|
900: '#78350f',
|
|
},
|
|
'adire-blue': {
|
|
50: '#eff6ff',
|
|
100: '#dbeafe',
|
|
200: '#bfdbfe',
|
|
300: '#93c5fd',
|
|
400: '#60a5fa',
|
|
500: '#3b82f6',
|
|
600: '#2563eb',
|
|
700: '#1d4ed8',
|
|
800: '#1e40af',
|
|
900: '#1e3a8a',
|
|
},
|
|
'ankara-red': {
|
|
50: '#fef2f2',
|
|
100: '#fee2e2',
|
|
200: '#fecaca',
|
|
300: '#fca5a5',
|
|
400: '#f87171',
|
|
500: '#ef4444',
|
|
600: '#dc2626',
|
|
700: '#b91c1c',
|
|
800: '#991b1b',
|
|
900: '#7f1d1d',
|
|
},
|
|
'earth-brown': {
|
|
50: '#fdf8f6',
|
|
100: '#f2e8e5',
|
|
200: '#eaddd7',
|
|
300: '#e0cfc5',
|
|
400: '#d2bab0',
|
|
500: '#bfa094',
|
|
600: '#a18072',
|
|
700: '#977669',
|
|
800: '#846358',
|
|
900: '#43302b',
|
|
}
|
|
},
|
|
fontFamily: {
|
|
'headline': ['Poppins', 'system-ui', 'sans-serif'],
|
|
'body': ['Inter', 'system-ui', 'sans-serif'],
|
|
'cultural': ['Noto Serif', 'serif'],
|
|
},
|
|
backgroundImage: {
|
|
'nigerian-pattern': `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f59e0b' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
|
|
'kente-gradient': 'linear-gradient(135deg, #f59e0b 0%, #dc2626 25%, #16a34a 50%, #2563eb 75%, #f59e0b 100%)',
|
|
'hero-overlay': 'linear-gradient(135deg, rgba(22, 163, 74, 0.9) 0%, rgba(245, 158, 11, 0.8) 100%)',
|
|
},
|
|
animation: {
|
|
'float': 'float 6s ease-in-out infinite',
|
|
'slide-up': 'slideUp 0.8s ease-out',
|
|
'fade-in': 'fadeIn 1s ease-out',
|
|
'bounce-gentle': 'bounceGentle 2s ease-in-out infinite',
|
|
},
|
|
keyframes: {
|
|
float: {
|
|
'0%, 100%': { transform: 'translateY(0px)' },
|
|
'50%': { transform: 'translateY(-10px)' },
|
|
},
|
|
slideUp: {
|
|
'0%': { transform: 'translateY(30px)', opacity: '0' },
|
|
'100%': { transform: 'translateY(0px)', opacity: '1' },
|
|
},
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
bounceGentle: {
|
|
'0%, 100%': { transform: 'translateY(0px)' },
|
|
'50%': { transform: 'translateY(-5px)' },
|
|
}
|
|
},
|
|
boxShadow: {
|
|
'nigerian': '0 10px 25px -3px rgba(22, 163, 74, 0.1), 0 4px 6px -2px rgba(22, 163, 74, 0.05)',
|
|
'kente': '0 10px 25px -3px rgba(245, 158, 11, 0.2), 0 4px 6px -2px rgba(245, 158, 11, 0.1)',
|
|
}
|
|
},
|
|
},
|
|
daisyui: {
|
|
themes: [
|
|
{
|
|
omoluabi: {
|
|
"primary": "#16a34a", // Nigerian green
|
|
"secondary": "#f59e0b", // Kente gold
|
|
"accent": "#dc2626", // Ankara red
|
|
"neutral": "#fafafa", // Clean white base
|
|
"base-100": "#ffffff", // Pure white
|
|
"base-200": "#f5f5f5", // Light gray
|
|
"base-300": "#e5e5e5", // Medium gray
|
|
"info": "#2563eb", // Adire blue
|
|
"success": "#22c55e", // Success green
|
|
"warning": "#f59e0b", // Warning gold
|
|
"error": "#dc2626", // Error red
|
|
},
|
|
},
|
|
],
|
|
},
|
|
plugins: [require("daisyui")],
|
|
}
|
|
|
|
/* Updated global.css */
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&family=Noto+Serif:wght@400;600;700&display=swap');
|
|
@import "tailwindcss";
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
background: linear-gradient(135deg, #fafafa 0%, #f0fdf4 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #16a34a;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #15803d;
|
|
}
|
|
|
|
/* Smooth hover transitions */
|
|
* {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
/* Nigerian pattern overlay */
|
|
.nigerian-pattern {
|
|
position: relative;
|
|
}
|
|
|
|
.nigerian-pattern::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f59e0b' fill-opacity='0.03'%3E%3Cpath d='M20 20c0 11.046-8.954 20-20 20v-40c11.046 0 20 8.954 20 20zM40 20c0 11.046-8.954 20-20 20v-40c11.046 0 20 8.954 20 20z'/%3E%3C/g%3E%3C/svg%3E");
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Enhanced button styles */
|
|
.btn {
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.025em;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
.btn:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Card enhancements */
|
|
.card {
|
|
border-radius: 16px;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border: 1px solid rgba(229, 229, 229, 0.8);
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Input styling */
|
|
.input, .textarea {
|
|
border-radius: 12px;
|
|
border: 2px solid #e5e5e5;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.input:focus, .textarea:focus {
|
|
border-color: #16a34a;
|
|
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
|
|
}
|
|
|
|
/* Badge styling */
|
|
.badge {
|
|
border-radius: 20px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.025em;
|
|
}
|
|
|
|
/* Hero text animations */
|
|
@keyframes textShine {
|
|
0% { background-position: -200% center; }
|
|
100% { background-position: 200% center; }
|
|
}
|
|
|
|
.text-shine {
|
|
background: linear-gradient(90deg, #16a34a, #f59e0b, #dc2626, #16a34a);
|
|
background-size: 200% auto;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: textShine 3s linear infinite;
|
|
}
|
|
|
|
/* Loading animations */
|
|
.animate-pulse-slow {
|
|
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
/* Custom spacing utilities */
|
|
.section-padding {
|
|
padding: 5rem 1rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.section-padding {
|
|
padding: 3rem 1rem;
|
|
}
|
|
} |