/* Base Styles */ body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; background-color: #f8fafc; color: #0f172a; } code, pre { font-family: 'Fira Code', monospace; } /* Language Switcher */ .language-switcher { position: fixed; top: 20px; right: 20px; z-index: 1000; display: flex; gap: 10px; } .language-btn { padding: 8px 16px; background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; color: white; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .language-btn:hover { background-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } .language-btn.active { background-color: var(--accent); border-color: var(--accent); } /* Color Palette */ :root { --primary: #0ea5e9; /* Sky 500 */ --primary-dark: #0284c7; /* Sky 600 */ --secondary: #85F1C2; /* Custom Green */ --accent: #f59e0b; /* Amber 500 */ --accent-dark: #d97706; /* Amber 600 */ --background: #f8fafc; /* Slate 50 */ --surface: #ffffff; /* White */ --text-primary: #0f172a; /* Slate 900 */ --text-secondary: #64748b; /* Slate 500 */ --text-light: #94a3b8; /* Slate 400 */ --border: #e2e8f0; /* Slate 200 */ --success: #10b981; /* Emerald 500 */ --warning: #f59e0b; /* Amber 500 */ --error: #ef4444; /* Red 500 */ } /* Hero Section */ .hero-image { filter: brightness(0.9); } /* Section Spacing */ section { scroll-margin-top: 80px; } /* Card Hover Effects */ .card-hover:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } /* Responsive Grid */ @media (max-width: 768px) { .grid-cols-5 { grid-template-columns: repeat(1, minmax(0, 1fr)); } } /* Footer Icons */ footer a svg { transition: all 0.3s ease; } footer a:hover svg { transform: scale(1.2); } /* Particles.js container */ #particles-js { width: 100%; height: 100%; background-color: #09191E; } /* Updated Section Styles */ .py-20 { padding-top: 5rem; padding-bottom: 5rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } /* Text Styles */ .text-3xl { color: var(--text-primary); } .text-lg { color: var(--text-secondary); } /* Background Styles */ .bg-gray-100 { background-color: var(--background); } .bg-white { background-color: var(--surface); } .bg-gray-900 { background-color: #0f172a; } /* Button Styles */ .px-6.py-3 { transition: all 0.3s ease; } .px-6.py-3.bg-amber-500 { background-color: var(--accent); color: white; } .px-6.py-3.bg-amber-500:hover { background-color: var(--accent-dark); } .px-6.py-3.border-2.border-white { border-color: var(--surface); color: var(--surface); } .px-6.py-3.border-2.border-white:hover { background-color: rgba(255, 255, 255, 0.1); } /* Link Styles */ .underline { color: var(--primary); } .underline:hover { color: var(--primary-dark); } /* Card Styles */ .bg-white.p-6 { background-color: var(--surface); border: 1px solid var(--border); transition: all 0.3s ease; } .bg-white.p-6:hover { border-color: var(--primary); } /* Text Colors */ .text-amber-500 { color: var(--accent); } .text-gray-600 { color: var(--text-secondary); } .text-gray-400 { color: var(--text-light); } .text-gray-500 { color: var(--text-light); } /* Blockquote */ blockquote { border-left-color: var(--accent); color: var(--text-primary); } /* Footer */ footer.py-16 { background-color: #0f172a; } footer a { color: var(--text-light); } footer a:hover { color: var(--secondary); } /* Hover Effects */ .hover\:text-amber-400:hover { color: var(--secondary); } /* Responsive Adjustments */ @media (max-width: 768px) { .text-4xl { font-size: 2.25rem; } .text-3xl { font-size: 1.875rem; } .text-xl { font-size: 1.125rem; } }