177 lines
3.4 KiB
CSS
177 lines
3.4 KiB
CSS
/* src/styles/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');
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* CSS Variables */
|
|
:root {
|
|
--nigerian-green: #16a34a;
|
|
--kente-gold: #f59e0b;
|
|
--ankara-red: #dc2626;
|
|
--adire-blue: #2563eb;
|
|
/* Dutch Flag Colors */
|
|
--dutch-red: #21468b;
|
|
--dutch-white: #ffffff;
|
|
--dutch-blue: #1e4785;
|
|
}
|
|
|
|
/* Dark theme tokens */
|
|
.dark {
|
|
--dutch-white: #0b0f14;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--nigerian-green);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #15803d;
|
|
}
|
|
|
|
/* Smooth scrolling */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Animation keyframes */
|
|
@keyframes textShine {
|
|
0% { background-position: -200% center; }
|
|
100% { background-position: 200% center; }
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
@keyframes bounceGentle {
|
|
0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
|
|
40%, 43% { transform: translateY(-10px); }
|
|
70% { transform: translateY(-5px); }
|
|
90% { transform: translateY(-2px); }
|
|
}
|
|
|
|
/* Animation classes */
|
|
.animate-text-shine {
|
|
background: linear-gradient(90deg, #ffffff, #e0e7ff, #8b5cf6, #e0e7ff, #ffffff);
|
|
background-size: 300% auto;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: textShine 8s linear infinite; /* Changed from 4s to 8s */
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-bounce-gentle {
|
|
animation: bounceGentle 2s infinite;
|
|
}
|
|
|
|
.animation-delay-1s {
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
/* Layout classes */
|
|
@layer components {
|
|
.section {
|
|
@apply py-16;
|
|
}
|
|
|
|
.container {
|
|
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
|
|
}
|
|
|
|
/* Card components */
|
|
.card {
|
|
@apply bg-white rounded-xl shadow-lg overflow-hidden;
|
|
}
|
|
|
|
.card-body {
|
|
@apply p-6;
|
|
}
|
|
|
|
.card-title {
|
|
@apply text-xl font-bold mb-2;
|
|
}
|
|
|
|
/* Button components */
|
|
.btn {
|
|
@apply inline-flex items-center px-6 py-3 rounded-lg font-medium transition-all duration-200 cursor-pointer;
|
|
}
|
|
|
|
.btn-lg {
|
|
@apply px-8 py-4 text-lg;
|
|
}
|
|
|
|
/* Badge components */
|
|
.badge {
|
|
@apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
|
|
}
|
|
|
|
.badge-lg {
|
|
@apply px-4 py-2;
|
|
}
|
|
}
|
|
|
|
/* Custom utility classes */
|
|
@layer utilities {
|
|
.text-shadow-lg {
|
|
text-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.backdrop-blur-xs {
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
}
|
|
|
|
/* Animation utilities */
|
|
[data-animate-on-scroll] {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.6s ease;
|
|
}
|
|
|
|
[data-animate-on-scroll].visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Responsive design adjustments */
|
|
@media (max-width: 768px) {
|
|
.section {
|
|
@apply py-8;
|
|
}
|
|
|
|
.hero-title-shine {
|
|
font-size: 2.5rem !important;
|
|
}
|
|
}
|
|
|
|
/* Reduced motion support */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.animate-text-shine,
|
|
.animate-float,
|
|
.animate-bounce-gentle {
|
|
animation: none;
|
|
}
|
|
|
|
* {
|
|
transition-duration: 0.01ms !important;
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
}
|
|
} |