diff --git a/src/pages/contact-us/index.css b/src/pages/contact-us/index.css index dba5797c..a31f31f2 100644 --- a/src/pages/contact-us/index.css +++ b/src/pages/contact-us/index.css @@ -19,8 +19,15 @@ } /* Light Theme Variables */ -[data-theme='light'] { - --contact-bg-primary: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #cbd5e1 50%, #94a3b8 75%, #64748b 100%); +[data-theme="light"] { + --contact-bg-primary: linear-gradient( + 135deg, + #f8fafc 0%, + #e2e8f0 25%, + #cbd5e1 50%, + #94a3b8 75%, + #64748b 100% + ); --contact-bg-card: rgba(255, 255, 255, 0.9); --contact-bg-card-hover: rgba(255, 255, 255, 0.95); --contact-bg-secondary: rgba(255, 255, 255, 0.8); @@ -39,8 +46,15 @@ } /* Force theme variables on specific elements */ -html[data-theme='light'] { - --contact-bg-primary: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #cbd5e1 50%, #94a3b8 75%, #64748b 100%); +html[data-theme="light"] { + --contact-bg-primary: linear-gradient( + 135deg, + #f8fafc 0%, + #e2e8f0 25%, + #cbd5e1 50%, + #94a3b8 75%, + #64748b 100% + ); --contact-bg-card: rgba(255, 255, 255, 0.9); --contact-bg-card-hover: rgba(255, 255, 255, 0.95); --contact-bg-secondary: rgba(255, 255, 255, 0.8); @@ -69,15 +83,25 @@ html[data-theme='light'] { } @keyframes backgroundShift { - 0%, 100% { transform: translateX(0px) translateY(0px) scale(1); } - 25% { transform: translateX(30px) translateY(-20px) scale(1.02); } - 50% { transform: translateX(-10px) translateY(30px) scale(0.98); } - 75% { transform: translateX(-25px) translateY(-15px) scale(1.01); } + 0%, + 100% { + transform: translateX(0px) translateY(0px) scale(1); + } + 25% { + transform: translateX(30px) translateY(-20px) scale(1.02); + } + 50% { + transform: translateX(-10px) translateY(30px) scale(0.98); + } + 75% { + transform: translateX(-25px) translateY(-15px) scale(1.01); + } } /* Main Container */ .enhanced-contact-container { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + sans-serif; background: var(--contact-bg-primary); color: var(--contact-text-secondary); min-height: 100vh; @@ -88,26 +112,48 @@ html[data-theme='light'] { /* Background Effects */ .enhanced-contact-container::before { - content: ''; + content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: - radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.08) 0%, transparent 60%), - radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.06) 0%, transparent 60%), - radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.04) 0%, transparent 60%); + background: radial-gradient( + circle at 20% 80%, + rgba(120, 119, 198, 0.08) 0%, + transparent 60% + ), + radial-gradient( + circle at 80% 20%, + rgba(255, 119, 198, 0.06) 0%, + transparent 60% + ), + radial-gradient( + circle at 40% 40%, + rgba(120, 219, 255, 0.04) 0%, + transparent 60% + ); animation: backgroundShift 25s ease-in-out infinite; pointer-events: none; } /* Light theme background effects */ -[data-theme='light'] .enhanced-contact-container::before { - background: - radial-gradient(circle at 20% 80%, rgba(79, 70, 229, 0.05) 0%, transparent 60%), - radial-gradient(circle at 80% 20%, rgba(124, 58, 237, 0.04) 0%, transparent 60%), - radial-gradient(circle at 40% 40%, rgba(236, 72, 153, 0.03) 0%, transparent 60%); +[data-theme="light"] .enhanced-contact-container::before { + background: radial-gradient( + circle at 20% 80%, + rgba(79, 70, 229, 0.05) 0%, + transparent 60% + ), + radial-gradient( + circle at 80% 20%, + rgba(124, 58, 237, 0.04) 0%, + transparent 60% + ), + radial-gradient( + circle at 40% 40%, + rgba(236, 72, 153, 0.03) 0%, + transparent 60% + ); } /* Content Wrapper */ @@ -129,7 +175,13 @@ html[data-theme='light'] { .contact-title { font-size: 3rem; font-weight: 900; - background: linear-gradient(135deg, var(--contact-text-primary) 0%, var(--contact-text-secondary) 30%, var(--contact-text-muted) 60%, var(--contact-text-dim) 100%); + background: linear-gradient( + 135deg, + var(--contact-text-primary) 0%, + var(--contact-text-secondary) 30%, + var(--contact-text-muted) 60%, + var(--contact-text-dim) 100% + ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -374,19 +426,27 @@ html[data-theme='light'] { padding-right: 2.5rem; } -[data-theme='light'] .form-select { +[data-theme="light"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); } -.form-select option { +[data-theme="dark"] .form-select { + background: #273254cf; +} + +/* .form-select option { background: var(--contact-bg-card); color: var(--contact-text-primary); -} +} */ .submit-button { width: 100%; padding: 0.875rem 1.5rem; - background: linear-gradient(135deg, var(--contact-accent-primary) 0%, var(--contact-accent-secondary) 100%); + background: linear-gradient( + 135deg, + var(--contact-accent-primary) 0%, + var(--contact-accent-secondary) 100% + ); color: white; border: none; border-radius: 0.75rem; @@ -503,4 +563,4 @@ html[data-theme='light'] { .resources-title { font-size: 1.25rem; } -} \ No newline at end of file +} diff --git a/src/theme/Footer/Layout/enhanced-footer.css b/src/theme/Footer/Layout/enhanced-footer.css index 0dca92cd..7bfc1a6a 100644 --- a/src/theme/Footer/Layout/enhanced-footer.css +++ b/src/theme/Footer/Layout/enhanced-footer.css @@ -9,7 +9,8 @@ /* Keyframe Animations */ @keyframes linkPulse { - 0%, 100% { + 0%, + 100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); } 50% { @@ -18,7 +19,8 @@ } @keyframes iconBounce { - 0%, 100% { + 0%, + 100% { transform: scale(1) rotate(0deg); } 50% { @@ -36,7 +38,8 @@ } @keyframes statGlow { - 0%, 100% { + 0%, + 100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); } 50% { @@ -45,7 +48,8 @@ } @keyframes numberPulse { - 0%, 100% { + 0%, + 100% { transform: scale(1); } 50% { @@ -53,8 +57,16 @@ } } .enhanced-footer { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; - background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + sans-serif !important; + background: linear-gradient( + 135deg, + #0f0f23 0%, + #1a1a2e 25%, + #16213e 50%, + #0f3460 75%, + #533483 100% + ) !important; color: #e2e8f0 !important; position: relative; overflow: hidden; @@ -77,42 +89,42 @@ .enhanced-footer ul, .enhanced-footer button, .enhanced-footer input, -[data-theme='dark'] .enhanced-footer, -[data-theme='light'] .enhanced-footer, -html[data-theme='dark'] .enhanced-footer, -html[data-theme='light'] .enhanced-footer, -[data-theme='dark'] .enhanced-footer *, -[data-theme='light'] .enhanced-footer *, -[data-theme='dark'] .enhanced-footer h1, -[data-theme='dark'] .enhanced-footer h2, -[data-theme='dark'] .enhanced-footer h3, -[data-theme='dark'] .enhanced-footer h4, -[data-theme='dark'] .enhanced-footer h5, -[data-theme='dark'] .enhanced-footer h6, -[data-theme='dark'] .enhanced-footer p, -[data-theme='dark'] .enhanced-footer span, -[data-theme='dark'] .enhanced-footer div, -[data-theme='dark'] .enhanced-footer a, -[data-theme='dark'] .enhanced-footer li, -[data-theme='dark'] .enhanced-footer ul, -[data-theme='dark'] .enhanced-footer button, -[data-theme='dark'] .enhanced-footer input, -[data-theme='light'] .enhanced-footer h1, -[data-theme='light'] .enhanced-footer h2, -[data-theme='light'] .enhanced-footer h3, -[data-theme='light'] .enhanced-footer h4, -[data-theme='light'] .enhanced-footer h5, -[data-theme='light'] .enhanced-footer h6, -[data-theme='light'] .enhanced-footer p, -[data-theme='light'] .enhanced-footer span, -[data-theme='light'] .enhanced-footer div, -[data-theme='light'] .enhanced-footer a, -[data-theme='light'] .enhanced-footer li, -[data-theme='light'] .enhanced-footer ul, -[data-theme='light'] .enhanced-footer button, -[data-theme='light'] .enhanced-footer input, -html[data-theme='dark'] .enhanced-footer *, -html[data-theme='light'] .enhanced-footer * { +[data-theme="dark"] .enhanced-footer, +[data-theme="light"] .enhanced-footer, +html[data-theme="dark"] .enhanced-footer, +html[data-theme="light"] .enhanced-footer, +[data-theme="dark"] .enhanced-footer *, +[data-theme="light"] .enhanced-footer *, +[data-theme="dark"] .enhanced-footer h1, +[data-theme="dark"] .enhanced-footer h2, +[data-theme="dark"] .enhanced-footer h3, +[data-theme="dark"] .enhanced-footer h4, +[data-theme="dark"] .enhanced-footer h5, +[data-theme="dark"] .enhanced-footer h6, +[data-theme="dark"] .enhanced-footer p, +[data-theme="dark"] .enhanced-footer span, +[data-theme="dark"] .enhanced-footer div, +[data-theme="dark"] .enhanced-footer a, +[data-theme="dark"] .enhanced-footer li, +[data-theme="dark"] .enhanced-footer ul, +[data-theme="dark"] .enhanced-footer button, +[data-theme="dark"] .enhanced-footer input, +[data-theme="light"] .enhanced-footer h1, +[data-theme="light"] .enhanced-footer h2, +[data-theme="light"] .enhanced-footer h3, +[data-theme="light"] .enhanced-footer h4, +[data-theme="light"] .enhanced-footer h5, +[data-theme="light"] .enhanced-footer h6, +[data-theme="light"] .enhanced-footer p, +[data-theme="light"] .enhanced-footer span, +[data-theme="light"] .enhanced-footer div, +[data-theme="light"] .enhanced-footer a, +[data-theme="light"] .enhanced-footer li, +[data-theme="light"] .enhanced-footer ul, +[data-theme="light"] .enhanced-footer button, +[data-theme="light"] .enhanced-footer input, +html[data-theme="dark"] .enhanced-footer *, +html[data-theme="light"] .enhanced-footer * { background-color: inherit !important; color: inherit !important; } @@ -191,56 +203,86 @@ html[data-theme='light'] .enhanced-footer.light-theme { color: #cbd5e1 !important; } -[data-theme='dark'] .enhanced-footer .footer-link:hover, -[data-theme='light'] .enhanced-footer .footer-link:hover { +[data-theme="dark"] .enhanced-footer .footer-link:hover, +[data-theme="light"] .enhanced-footer .footer-link:hover { color: #ffffff !important; } -[data-theme='dark'] .enhanced-footer .footer-copyright, -[data-theme='light'] .enhanced-footer .footer-copyright { +[data-theme="dark"] .enhanced-footer .footer-copyright, +[data-theme="light"] .enhanced-footer .footer-copyright { color: #94a3b8 !important; } -[data-theme='dark'] .enhanced-footer .legal-link, -[data-theme='light'] .enhanced-footer .legal-link { +[data-theme="dark"] .enhanced-footer .legal-link, +[data-theme="light"] .enhanced-footer .legal-link { color: #94a3b8 !important; } -[data-theme='dark'] .enhanced-footer .legal-link:hover, -[data-theme='light'] .enhanced-footer .legal-link:hover { +[data-theme="dark"] .enhanced-footer .legal-link:hover, +[data-theme="light"] .enhanced-footer .legal-link:hover { color: #ffffff !important; } /* Add animated background pattern */ .enhanced-footer::before { - content: ''; + content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: - radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.08) 0%, transparent 60%), - radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.06) 0%, transparent 60%), - radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.04) 0%, transparent 60%), - radial-gradient(circle at 60% 70%, rgba(167, 139, 250, 0.05) 0%, transparent 50%); + background: radial-gradient( + circle at 20% 80%, + rgba(120, 119, 198, 0.08) 0%, + transparent 60% + ), + radial-gradient( + circle at 80% 20%, + rgba(255, 119, 198, 0.06) 0%, + transparent 60% + ), + radial-gradient( + circle at 40% 40%, + rgba(120, 219, 255, 0.04) 0%, + transparent 60% + ), + radial-gradient( + circle at 60% 70%, + rgba(167, 139, 250, 0.05) 0%, + transparent 50% + ); animation: backgroundShift 25s ease-in-out infinite; pointer-events: none; } /* Additional floating particles */ .enhanced-footer::after { - content: ''; + content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background-image: - radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.1), transparent), - radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.08), transparent), - radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.06), transparent), - radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.04), transparent); + background-image: radial-gradient( + 2px 2px at 20px 30px, + rgba(255, 255, 255, 0.1), + transparent + ), + radial-gradient( + 2px 2px at 40px 70px, + rgba(255, 255, 255, 0.08), + transparent + ), + radial-gradient( + 1px 1px at 90px 40px, + rgba(255, 255, 255, 0.06), + transparent + ), + radial-gradient( + 1px 1px at 130px 80px, + rgba(255, 255, 255, 0.04), + transparent + ); background-repeat: repeat; background-size: 150px 100px; animation: particleFloat 30s linear infinite; @@ -249,7 +291,8 @@ html[data-theme='light'] .enhanced-footer.light-theme { } @keyframes backgroundShift { - 0%, 100% { + 0%, + 100% { opacity: 1; transform: translateX(0px) translateY(0px) scale(1); } @@ -268,10 +311,18 @@ html[data-theme='light'] .enhanced-footer.light-theme { } @keyframes particleFloat { - 0% { transform: translateY(0px) translateX(0px); } - 33% { transform: translateY(-10px) translateX(10px); } - 66% { transform: translateY(5px) translateX(-5px); } - 100% { transform: translateY(0px) translateX(0px); } + 0% { + transform: translateY(0px) translateX(0px); + } + 33% { + transform: translateY(-10px) translateX(10px); + } + 66% { + transform: translateY(5px) translateX(-5px); + } + 100% { + transform: translateY(0px) translateX(0px); + } } /* NO THEME OVERRIDES - FOOTER STAYS THE SAME ALWAYS */ @@ -312,17 +363,15 @@ html[data-theme='light'] .enhanced-footer.light-theme { display: flex; align-items: center; justify-content: center; - box-shadow: - 0 4px 16px rgba(102, 126, 234, 0.4), - 0 0 0 1px rgba(255, 255, 255, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.2); + box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4), + 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2); position: relative; transition: all 0.3s ease; cursor: pointer; } .logo-container::before { - content: ''; + content: ""; position: absolute; inset: 0; border-radius: 16px; @@ -340,10 +389,8 @@ html[data-theme='light'] .enhanced-footer.light-theme { .logo-container:hover { transform: translateY(-2px) scale(1.05); - box-shadow: - 0 12px 40px rgba(102, 126, 234, 0.5), - 0 0 0 1px rgba(255, 255, 255, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.3); + box-shadow: 0 12px 40px rgba(102, 126, 234, 0.5), + 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .footer-logo-img { @@ -372,7 +419,8 @@ html[data-theme='light'] .enhanced-footer.light-theme { text-align: center; letter-spacing: -1px; margin: 0; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", + sans-serif; } .footer-trust-badge { @@ -394,11 +442,21 @@ html[data-theme='light'] .enhanced-footer.light-theme { animation: starGlow 2s ease-in-out infinite alternate; } -.trust-stars .star:nth-child(1) { animation-delay: 0s; } -.trust-stars .star:nth-child(2) { animation-delay: 0.1s; } -.trust-stars .star:nth-child(3) { animation-delay: 0.2s; } -.trust-stars .star:nth-child(4) { animation-delay: 0.3s; } -.trust-stars .star:nth-child(5) { animation-delay: 0.4s; } +.trust-stars .star:nth-child(1) { + animation-delay: 0s; +} +.trust-stars .star:nth-child(2) { + animation-delay: 0.1s; +} +.trust-stars .star:nth-child(3) { + animation-delay: 0.2s; +} +.trust-stars .star:nth-child(4) { + animation-delay: 0.3s; +} +.trust-stars .star:nth-child(5) { + animation-delay: 0.4s; +} .trust-text { font-size: 12px; @@ -469,8 +527,13 @@ html[data-theme='light'] .enhanced-footer.light-theme { } @keyframes starGlow { - 0%, 100% { filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3)); } - 50% { filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.6)); } + 0%, + 100% { + filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3)); + } + 50% { + filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.6)); + } } .rating-text { @@ -484,7 +547,13 @@ html[data-theme='light'] .enhanced-footer.light-theme { .footer-hero-text h1 { font-size: 32px; font-weight: 900; - background: linear-gradient(135deg, #ffffff 0%, #f8fafc 30%, #e2e8f0 60%, #cbd5e1 100%); + background: linear-gradient( + 135deg, + #ffffff 0%, + #f8fafc 30%, + #e2e8f0 60%, + #cbd5e1 100% + ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -500,14 +569,27 @@ html[data-theme='light'] .enhanced-footer.light-theme { } @keyframes titleGlow { - 0%, 100% { - background: linear-gradient(135deg, #ffffff 0%, #f8fafc 30%, #e2e8f0 60%, #cbd5e1 100%); + 0%, + 100% { + background: linear-gradient( + 135deg, + #ffffff 0%, + #f8fafc 30%, + #e2e8f0 60%, + #cbd5e1 100% + ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } 50% { - background: linear-gradient(135deg, #667eea 0%, #764ba2 30%, #f093fb 60%, #ffffff 100%); + background: linear-gradient( + 135deg, + #667eea 0%, + #764ba2 30%, + #f093fb 60%, + #ffffff 100% + ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -551,13 +633,18 @@ html[data-theme='light'] .enhanced-footer.light-theme { } .stat-item::before { - content: ''; + content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.1), + transparent + ); transition: left 0.6s ease; } @@ -566,10 +653,8 @@ html[data-theme='light'] .enhanced-footer.light-theme { transform: translateY(-4px) scale(1.02); background: rgba(255, 255, 255, 0.06); border-color: rgba(102, 126, 234, 0.3); - box-shadow: - 0 12px 30px rgba(0, 0, 0, 0.2), - 0 4px 15px rgba(102, 126, 234, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1); + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2), + 0 4px 15px rgba(102, 126, 234, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1); cursor: default; } @@ -703,13 +788,17 @@ html[data-theme='light'] .enhanced-footer.light-theme { } .footer-column::before { - content: ''; + content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; - background: linear-gradient(135deg, rgba(102, 126, 234, 0.03) 0%, rgba(240, 147, 251, 0.03) 100%); + background: linear-gradient( + 135deg, + rgba(102, 126, 234, 0.03) 0%, + rgba(240, 147, 251, 0.03) 100% + ); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; @@ -723,7 +812,8 @@ html[data-theme='light'] .enhanced-footer.light-theme { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); transform: translateY(-4px); - box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 6px 20px rgba(102, 126, 234, 0.1); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), + 0 6px 20px rgba(102, 126, 234, 0.1); } .footer-column-title { @@ -795,26 +885,36 @@ html[data-theme='light'] .enhanced-footer.light-theme { } .footer-link::before { - content: ''; + content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; - background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 50%, rgba(240, 147, 251, 0.15) 100%); + background: linear-gradient( + 135deg, + rgba(102, 126, 234, 0.15) 0%, + rgba(118, 75, 162, 0.15) 50%, + rgba(240, 147, 251, 0.15) 100% + ); transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); border-radius: 12px; z-index: 0; } .footer-link::after { - content: ''; + content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.1), + transparent + ); transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); border-radius: 12px; z-index: 1; @@ -833,10 +933,8 @@ html[data-theme='light'] .enhanced-footer.light-theme { background: rgba(255, 255, 255, 0.12); border-color: rgba(102, 126, 234, 0.3); transform: translateX(6px) translateY(-2px) scale(1.01); - box-shadow: - 0 8px 25px rgba(0, 0, 0, 0.2), - 0 4px 15px rgba(102, 126, 234, 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.1); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), + 0 4px 15px rgba(102, 126, 234, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); } @@ -853,9 +951,7 @@ html[data-theme='light'] .enhanced-footer.light-theme { .footer-link:focus { outline: none; border-color: rgba(102, 126, 234, 0.5); - box-shadow: - 0 0 0 3px rgba(102, 126, 234, 0.2), - 0 8px 25px rgba(0, 0, 0, 0.15); + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2), 0 8px 25px rgba(0, 0, 0, 0.15); animation: linkPulse 2s infinite; } @@ -1010,10 +1106,8 @@ html[data-theme='light'] .enhanced-footer.light-theme { font-weight: 700; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - box-shadow: - 0 8px 24px rgba(102, 126, 234, 0.4), - 0 0 0 1px rgba(255, 255, 255, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.2); + box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4), + 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2); position: relative; overflow: hidden; text-transform: uppercase; @@ -1021,13 +1115,18 @@ html[data-theme='light'] .enhanced-footer.light-theme { } .newsletter-button::before { - content: ''; + content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.2), + transparent + ); transition: left 0.6s ease; } @@ -1037,10 +1136,8 @@ html[data-theme='light'] .enhanced-footer.light-theme { .newsletter-button:hover { transform: translateY(-2px) scale(1.02); - box-shadow: - 0 12px 32px rgba(102, 126, 234, 0.5), - 0 0 0 1px rgba(255, 255, 255, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.3); + box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5), + 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .newsletter-button:active { @@ -1054,9 +1151,15 @@ html[data-theme='light'] .enhanced-footer.light-theme { } @keyframes successPulse { - 0% { transform: scale(1); } - 50% { transform: scale(1.05); } - 100% { transform: scale(1); } + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } + 100% { + transform: scale(1); + } } .newsletter-button:disabled { @@ -1085,7 +1188,7 @@ html[data-theme='light'] .enhanced-footer.light-theme { /* Newsletter-specific quick links styling */ .newsletter-quick-links { margin-top: 28px; - background: rgba(255,255,255,0.02); + background: rgba(255, 255, 255, 0.02); border-radius: 12px; padding: 18px 0 0 0; box-shadow: none; @@ -1105,8 +1208,8 @@ html[data-theme='light'] .enhanced-footer.light-theme { } .newsletter-quick-links .quick-link { - background: rgba(255,255,255,0.04); - border: 1px solid rgba(255,255,255,0.08); + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; color: #cbd5e1; font-size: 13px; @@ -1117,7 +1220,7 @@ html[data-theme='light'] .enhanced-footer.light-theme { } .newsletter-quick-links .quick-link:hover { - background: rgba(255,255,255,0.12); + background: rgba(255, 255, 255, 0.12); color: #fff; } @@ -1161,24 +1264,33 @@ html[data-theme='light'] .enhanced-footer.light-theme { } .quick-link::before { - content: ''; + content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; - background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.15), transparent); + background: linear-gradient( + 90deg, + transparent, + rgba(102, 126, 234, 0.15), + transparent + ); transition: left 0.6s ease; } .quick-link::after { - content: ''; + content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; - background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(240, 147, 251, 0.1) 100%); + background: linear-gradient( + 135deg, + rgba(102, 126, 234, 0.1) 0%, + rgba(240, 147, 251, 0.1) 100% + ); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 10px; } @@ -1196,7 +1308,8 @@ html[data-theme='light'] .enhanced-footer.light-theme { border-color: rgba(102, 126, 234, 0.4); color: #ffffff; transform: translateY(-3px) translateX(2px); - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(102, 126, 234, 0.15); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), + 0 4px 12px rgba(102, 126, 234, 0.15); } .quick-link-icon { @@ -1223,9 +1336,9 @@ html[data-theme='light'] .enhanced-footer.light-theme { .footer-bottom-content { display: grid; - grid-template-columns: 1fr auto 1fr; + grid-template-columns: 1fr auto; align-items: center; - gap: 24px; + gap: 20px; padding: 0 16px; } @@ -1266,13 +1379,18 @@ html[data-theme='light'] .enhanced-footer.light-theme { } .social-link::before { - content: ''; + content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.1), + transparent + ); transition: left 0.6s ease; } @@ -1352,13 +1470,17 @@ html[data-theme='light'] .enhanced-footer.light-theme { } .legal-link::before { - content: ''; + content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; - background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%); + background: linear-gradient( + 135deg, + rgba(99, 102, 241, 0.1) 0%, + rgba(139, 92, 246, 0.1) 100% + ); transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 0; } @@ -1372,9 +1494,7 @@ html[data-theme='light'] .enhanced-footer.light-theme { background: rgba(255, 255, 255, 0.08); border-color: rgba(99, 102, 241, 0.4); transform: translateY(-2px) scale(1.02); - box-shadow: - 0 6px 20px rgba(0, 0, 0, 0.15), - 0 2px 8px rgba(99, 102, 241, 0.2); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(99, 102, 241, 0.2); text-shadow: 0 0 8px rgba(255, 255, 255, 0.3); } @@ -1386,6 +1506,7 @@ html[data-theme='light'] .enhanced-footer.light-theme { .footer-bottom-right { display: flex; + width: 100%; justify-content: flex-end; } @@ -1395,6 +1516,18 @@ html[data-theme='light'] .enhanced-footer.light-theme { font-size: 14px; line-height: 1.6; font-weight: 500; + width: 100%; +} + +.footer { + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.footer-content { + font-size: 18px; } .newsletter-input.input-error { @@ -1407,7 +1540,6 @@ html[data-theme='light'] .enhanced-footer.light-theme { color: #e53e3e; } - /* Responsive Design */ @media (max-width: 1200px) { .footer-links-grid { @@ -1522,7 +1654,7 @@ html[data-theme='light'] .enhanced-footer.light-theme { border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 10px; margin: 0; - white-space: nowrap; /* mobile-friendly single line; content fits */ + white-space: nowrap; /* mobile-friendly single line; content fits */ } .footer-link:hover { @@ -1581,8 +1713,7 @@ html[data-theme='light'] .enhanced-footer.light-theme { /* Optimize hover effects for mobile */ .footer-link:hover { transform: translateX(4px) translateY(-1px) scale(1.01); - box-shadow: - 0 6px 20px rgba(0, 0, 0, 0.15), + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 3px 10px rgba(102, 126, 234, 0.1); } @@ -1715,8 +1846,7 @@ html[data-theme='light'] .enhanced-footer.light-theme { /* Mobile-optimized stat item hover effects */ .stat-item:hover { transform: translateY(-2px) scale(1.01); - box-shadow: - 0 8px 20px rgba(0, 0, 0, 0.15), + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(102, 126, 234, 0.1); } @@ -1749,11 +1879,18 @@ html[data-theme='light'] .enhanced-footer.light-theme { animation: fadeInUp 0.6s ease-out; } -.stat-item:nth-child(1) { animation-delay: 0.1s; } -.stat-item:nth-child(2) { animation-delay: 0.2s; } -.stat-item:nth-child(3) { animation-delay: 0.3s; } -.stat-item:nth-child(4) { animation-delay: 0.4s; } - +.stat-item:nth-child(1) { + animation-delay: 0.1s; +} +.stat-item:nth-child(2) { + animation-delay: 0.2s; +} +.stat-item:nth-child(3) { + animation-delay: 0.3s; +} +.stat-item:nth-child(4) { + animation-delay: 0.4s; +} /* Toast Notification Styles */ .newsletter-toast { @@ -1772,12 +1909,11 @@ html[data-theme='light'] .enhanced-footer.light-theme { border-radius: 8px; padding: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); - border-left: 4px solid #4CAF50; + border-left: 4px solid #4caf50; max-width: 350px; opacity: 1 !important; } - .toast-icon { font-size: 24px; margin-right: 12px; @@ -1833,8 +1969,8 @@ html[data-theme='light'] .enhanced-footer.light-theme { right: 10px; left: 10px; } - + .toast-content { max-width: none; } -} \ No newline at end of file +} diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx index 6a6eb5d3..b7a96102 100644 --- a/src/theme/Footer/Layout/index.tsx +++ b/src/theme/Footer/Layout/index.tsx @@ -60,10 +60,10 @@ export default function FooterLayout({ fetchStats(); const interval = setInterval(fetchStats, 30000); // Update every 30 seconds - + return () => clearInterval(interval); }, []); - + const handleSubscribe = (e: React.FormEvent) => { e.preventDefault(); @@ -473,13 +473,20 @@ export default function FooterLayout({ -
+ {/*
© {currentYear} recodehive. Made with ❤️ by the Community.
-
+
*/} + + +
+
+ + © {currentYear} recodehive. Made with ❤️ by the Community. +
diff --git a/src/theme/Footer/index.tsx b/src/theme/Footer/index.tsx index a14a2b7b..511ce78a 100644 --- a/src/theme/Footer/index.tsx +++ b/src/theme/Footer/index.tsx @@ -1,17 +1,16 @@ -import React from 'react'; -import {useThemeConfig} from '@docusaurus/theme-common'; -import FooterLayout from '@theme/Footer/Layout'; -import FooterCopyright from '@theme/Footer/Copyright'; -import FooterLogo from '@theme/Footer/Logo'; -import FooterLinks from '@theme/Footer/Links'; -import type {Props} from '@theme/Footer'; +import React, { JSX } from "react"; +import { useThemeConfig } from "@docusaurus/theme-common"; +import FooterLayout from "@theme/Footer/Layout"; +import FooterCopyright from "@theme/Footer/Copyright"; +import FooterLogo from "@theme/Footer/Logo"; +import FooterLinks from "@theme/Footer/Links"; function Footer(): JSX.Element | null { - const {footer} = useThemeConfig(); + const { footer } = useThemeConfig(); if (!footer) { return null; } - const {copyright, links, logo, style} = footer; + const { copyright, links, logo, style } = footer; return (