diff --git a/src/App.css b/src/App.css index 0521d89..97a73c7 100644 --- a/src/App.css +++ b/src/App.css @@ -1,7 +1,6 @@ .app { min-height: 100vh; width: 100%; - overflow-x: hidden; } .app-container { @@ -92,4 +91,4 @@ table { min-width: 100%; -} +} \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 3ad3902..74f5fed 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useContext,useRef } from "react"; +import React, { useEffect, useContext, useRef } from "react"; import Lenis from "@studio-freight/lenis"; import Navbar from "@/components/Navbar"; import { Routes, Route, useLocation } from "react-router-dom"; @@ -30,14 +30,14 @@ import ScrollToTop from "@/components/ScrollToTop"; import PrivacyPolicy from "@/components/PrivacyPolicy.jsx"; import TermsOfService from "@/components/TermsOfService.jsx"; import CookiePolicy from "@/components/CookiePolicy.jsx"; -import "./App.css"; import ContactUs from "./components/ContactUs"; import FAQ from "./components/FAQ"; import PageNotFound from "./components/PageNotFound"; +import "./App.css"; const App = () => { + const lenisRef = useRef(null); - const lenisRef = useRef(null) useEffect(() => { const lenis = new Lenis({ smoothWheel: true, @@ -63,11 +63,12 @@ const App = () => { const { isLoading } = useContext(CoinContext); const location = useLocation(); + const isDashboard = location.pathname === "/dashboard" || location.pathname === "/leaderboard" || location.pathname === "/market-overview" || - location.pathname === "/change-password" ; + location.pathname === "/change-password"; const authRoutes = ["/login", "/signup", "/forgot-password"]; const isAuthPage = authRoutes.includes(location.pathname); @@ -80,58 +81,59 @@ const App = () => { }, []); return ( - <> - - - + + + <> + +
- {/* Loading Spinner - will show when isLoading is true */} {isLoading && !isDashboard && }
{!isDashboard && } + } /> } /> } /> - {/* Blog detail route supporting both slug and id patterns */} } /> } /> - } /> } /> } /> } /> } /> - {/* Dashboard Layout with nested routes - all share the same sidebar */} @@ -145,32 +147,25 @@ const App = () => { } /> - {/* Coin route - accessible to all but shows sidebar if logged in */} } /> - - {/* Add 404 Route if you implemented it earlier */} - {/* } /> */} - } /> } /> } /> } /> - - {/* Page Not Found */} - } /> - - - } /> + } />
- {!isDashboard && !isAuthPage &&
} + + {!isDashboard && !isAuthPage &&
}
- - - - + + + + + ); + }; export default App; diff --git a/src/components/Blog.css b/src/components/Blog.css index 4308747..d3a9cea 100644 --- a/src/components/Blog.css +++ b/src/components/Blog.css @@ -1,11 +1,35 @@ -/* - Glassnode Style - 30 Cards Version -*/ +/* ========== THEME VARIABLES ========== */ +.blog-page, +.blog-detail-page { + --bg-dots: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px); + --bg-dots-size: 24px 24px; + + /* Light Mode Defaults */ + --bg-surface: #ffffff; + --bg-card: #ffffff; + --bg-glass: rgba(69, 89, 220, 0.04); + --blog-border: rgba(0, 0, 0, 0.08); + --blog-text-primary: #15171A; + --blog-text-muted: #64748b; + --blog-accent: #4559DC; +} + +.dark .blog-page, +.dark .blog-detail-page { + --bg-dots: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); + --bg-surface: #0f0f1a; + --bg-card: rgba(25, 25, 45, 0.8); + --bg-glass: rgba(255, 255, 255, 0.03); + --blog-border: rgba(255, 255, 255, 0.1); + --blog-text-primary: #ffffff; + --blog-text-muted: #a0a0a0; + --blog-accent: #00f3ff; +} /* ========== BASE STYLES ========== */ .blog-page.glassnode-style { - background: #0a0a0a; - color: #f7f8fa; + background: var(--bg-stars); + color: var(--text-main); min-height: 100vh; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; padding: 0; @@ -21,9 +45,10 @@ /* ========== HERO SECTION ========== */ .glassnode-hero { text-align: center; - padding: 4rem 0 5rem; + padding: 6rem 0 5rem; margin-bottom: 3rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + background: var(--bg-stars); + border-bottom: 1px solid var(--border-color); } .hero-badge { @@ -36,7 +61,7 @@ border-radius: 24px; font-size: 0.85rem; font-weight: 600; - color: #4559DC; + color: var(--primary-color); letter-spacing: 0.03em; margin-bottom: 1.5rem; backdrop-filter: blur(10px); @@ -47,19 +72,26 @@ font-weight: 800; line-height: 1.1; margin: 0.5rem 0 1.2rem; - background: linear-gradient(135deg, #00f3ff 0%, #4559DC 50%, #9d4edd 100%); + background: linear-gradient(135deg, var(--neon-cyan) 0%, var(--primary-color) 50%, var(--neon-purple) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gradient-text { - background: linear-gradient(135deg, #4559DC, #00f3ff); + background: linear-gradient(135deg, var(--primary-color), var(--neon-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } +.hero-subtitle { + font-size: 1.25rem; + color: var(--text-muted); + max-width: 800px; + margin: 1.5rem auto 0; + line-height: 1.6; +} /* ========== FEATURED SECTION ========== */ @@ -73,10 +105,10 @@ gap: 0.8rem; font-size: 1.8rem; font-weight: 700; - color: #ffffff; + color: var(--text-main); margin-bottom: 2.5rem; padding-bottom: 1rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid var(--border-color); } .featured-grid { @@ -87,8 +119,8 @@ /* Featured Card */ .featured-card { - background: rgba(255, 255, 255, 0.02); - border: 1px solid rgba(255, 255, 255, 0.08); + background: var(--glass-panel-bg); + border: 1px solid var(--border-color); border-radius: 20px; overflow: hidden; cursor: pointer; @@ -98,10 +130,8 @@ .featured-card:hover { border-color: #4559DC; transform: translateY(-10px); - background: rgba(255, 255, 255, 0.03); - box-shadow: - 0 25px 50px rgba(0, 0, 0, 0.4), - 0 0 0 1px rgba(69, 89, 220, 0.1); + background: var(--dashboard-bg-secondary); + box-shadow: var(--dashboard-shadow-lg), 0 0 0 1px var(--border-color); } .card-image-container { @@ -136,14 +166,14 @@ top: 1.2rem; right: 1.2rem; padding: 0.5rem 1rem; - background: #4559DC; - color: white; + background: var(--primary-color); + color: #ffffff; border-radius: 20px; font-size: 0.8rem; font-weight: 600; z-index: 2; backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.2); + border: 1px solid var(--border-color); } .card-content { @@ -194,17 +224,18 @@ font-size: 1.4rem; font-weight: 700; line-height: 1.3; - color: #ffffff; + color: var(--text-main); margin: 0 0 1rem 0; } .card-excerpt { - color: #a0a0a0; + color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.8rem; display: -webkit-box; -webkit-line-clamp: 3; + line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @@ -268,7 +299,7 @@ .section-header h2 { font-size: 2rem; font-weight: 700; - color: #ffffff; + color: var(--text-main); margin-bottom: 0.5rem; } @@ -358,22 +389,24 @@ .post-title { font-size: 1.2rem; font-weight: 600; - color: #ffffff; + color: var(--text-main); margin-bottom: 0.8rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; + line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-excerpt { - color: #a0a0a0; + color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin-bottom: 1.5rem; display: -webkit-box; -webkit-line-clamp: 3; + line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @@ -455,6 +488,8 @@ margin: 0 auto; } + + .newsletter-icon { margin-bottom: 2rem; } @@ -463,15 +498,15 @@ font-size: 2.2rem; font-weight: 700; margin-bottom: 1rem; - color: #ffffff; + color: var(--text-main); } .highlight { - color: #4559DC; + color: var(--primary-color); } .newsletter-description { - color: #a0a0a0; + color: var(--text-muted); font-size: 1.1rem; line-height: 1.6; margin-bottom: 2rem; @@ -498,10 +533,10 @@ .email-input { flex: 1; padding: 1rem 1.5rem; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); + background: var(--dashboard-bg-secondary); + border: 1px solid var(--border-color); border-radius: 12px; - color: #ffffff; + color: var(--text-main); font-size: 1rem; transition: all 0.2s ease; } @@ -515,8 +550,8 @@ .subscribe-btn { padding: 1rem 2.5rem; - background: linear-gradient(135deg, #4559DC, #00a6ff); - color: white; + background: var(--gradient-primary); + color: #ffffff; border: none; border-radius: 12px; font-weight: 600; @@ -727,7 +762,12 @@ .blog-download-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.06); - box-shadow: 0 8px 18px rgba(2, 6, 23, 0.45); + box-shadow: var(--shadow-md); +} + +:root:not(.dark) .blog-download-btn:hover { + background: rgba(255, 255, 255, 0.8); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .blog-download-btn:active { @@ -739,17 +779,17 @@ border: 1px dashed rgba(255, 255, 255, 0.06); } -[data-theme="light"] .blog-download-btn { +:root:not(.dark) .blog-download-btn { background: rgba(255, 255, 255, 0.96); color: #1e293b; border: 1px solid rgba(148, 163, 184, 0.4); } -[data-theme="light"] .blog-download-btn.blog-download-txt { +:root:not(.dark) .blog-download-btn.blog-download-txt { background: transparent; } -[data-theme="light"] .blog-back-btn { +:root:not(.dark) .blog-back-btn { background: radial-gradient(circle at top left, #1d4ed8, #3b82f6); color: white; border-color: #4559DC; @@ -761,34 +801,34 @@ } /* Light Theme */ -[data-theme="light"] .blog-page.glassnode-style { - background: #f7f8fa; +:root:not(.dark) .blog-page.glassnode-style { + background: var(--bg-stars); color: #15171A; } -[data-theme="light"] .featured-card, -[data-theme="light"] .post-card { +:root:not(.dark) .featured-card, +:root:not(.dark) .post-card { background: white; border: 1px solid #e5e7eb; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); } -[data-theme="light"] .card-title, -[data-theme="light"] .post-title { +:root:not(.dark) .card-title, +:root:not(.dark) .post-title { color: #15171A; } -[data-theme="light"] .card-excerpt, -[data-theme="light"] .post-excerpt { +:root:not(.dark) .card-excerpt, +:root:not(.dark) .post-excerpt { color: #666666; } -[data-theme="light"] .newsletter-section { +:root:not(.dark) .newsletter-section { background: linear-gradient(135deg, #f0f4ff, #f0fdff); border-color: #e0e7ff; } -[data-theme="light"] .email-input { +:root:not(.dark) .email-input { background: white; border-color: #d1d5db; color: #15171A; @@ -796,16 +836,16 @@ /* ========== BLOG DETAIL PAGE STYLES ========== */ .blog-detail-page { - background: #0a0a0a; + background: var(--bg-stars); min-height: 100vh; padding: 2rem 1.5rem; - color: #f7f8fa; + color: var(--text-main); } .blog-detail-error { text-align: center; padding: 4rem 2rem; - color: #f7f8fa; + color: var(--text-muted); } /* Breadcrumb */ @@ -837,22 +877,27 @@ } .breadcrumb-divider { - color: rgba(255, 255, 255, 0.3); + color: var(--blog-text-muted); + opacity: 0.5; } .breadcrumb-current { - color: rgba(255, 255, 255, 0.9); + color: var(--blog-text-primary); + font-weight: 600; } /* Header Section */ .blog-detail-header { max-width: 1200px; margin: 0 auto 3rem; - padding: 2rem; - background: rgba(15, 15, 25, 0.4); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 16px; - backdrop-filter: blur(10px); + padding: 2.5rem; + background: var(--bg-card); + border: 1px solid var(--blog-border); + border-radius: 20px; + backdrop-filter: blur(20px); + box-shadow: var(--dashboard-shadow-sm); + position: relative; + z-index: 2; } .blog-detail-tags { @@ -877,9 +922,9 @@ border-radius: 6px; font-size: 0.75rem; font-weight: 600; - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - color: rgba(255, 255, 255, 0.9); + background: var(--bg-glass); + border: 1px solid var(--blog-border); + color: var(--blog-text-primary); } .access-tag.premium { @@ -899,13 +944,13 @@ font-weight: 800; line-height: 1.2; margin: 0 0 1rem; - color: #ffffff; + color: var(--text-main); } .blog-detail-excerpt { font-size: 1.1rem; line-height: 1.6; - color: rgba(255, 255, 255, 0.7); + color: var(--text-muted); margin-bottom: 2rem; padding-left: 1rem; border-left: 3px solid #4559DC; @@ -924,8 +969,8 @@ align-items: center; gap: 1rem; padding: 1.25rem; - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.08); + background: var(--bg-glass); + border: 1px solid var(--border-color); border-radius: 12px; transition: all 0.3s; } @@ -951,14 +996,14 @@ font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; - color: rgba(255, 255, 255, 0.5); + color: var(--blog-text-muted); text-transform: uppercase; } .metadata-value { font-size: 0.95rem; font-weight: 600; - color: rgba(255, 255, 255, 0.95); + color: var(--blog-text-primary); } /* Statistics Cards */ @@ -994,7 +1039,7 @@ font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; - color: rgba(255, 255, 255, 0.6); + color: var(--text-muted); text-transform: uppercase; } @@ -1017,17 +1062,18 @@ position: sticky; top: 100px; padding: 1.5rem; - background: rgba(15, 15, 25, 0.4); - border: 1px solid rgba(255, 255, 255, 0.1); + background: var(--bg-card); + border: 1px solid var(--border-color); border-radius: 12px; backdrop-filter: blur(10px); + box-shadow: var(--dashboard-shadow-sm); } .sidebar-title { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; - color: rgba(255, 255, 255, 0.6); + color: var(--text-muted); text-transform: uppercase; margin-bottom: 1.5rem; } @@ -1067,7 +1113,7 @@ .toc-number { font-size: 0.75rem; font-weight: 700; - color: rgba(255, 255, 255, 0.3); + color: var(--text-muted); min-width: 24px; transition: color 0.2s; } @@ -1075,17 +1121,18 @@ .toc-text { font-size: 0.9rem; font-weight: 500; - color: rgba(255, 255, 255, 0.7); + color: var(--text-main); line-height: 1.4; transition: color 0.2s; } /* Main Content */ .blog-detail-main { - padding: 2rem; - background: rgba(15, 15, 25, 0.3); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 16px; + padding: 3rem; + background: var(--bg-card); + border: 1px solid var(--blog-border); + border-radius: 20px; + box-shadow: var(--dashboard-shadow-sm); } .content-section { @@ -1095,7 +1142,7 @@ .section-heading { font-size: 1.8rem; font-weight: 700; - color: #ffffff; + color: var(--text-main); margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid rgba(69, 89, 220, 0.3); @@ -1104,8 +1151,9 @@ .section-text { font-size: 1.05rem; line-height: 1.8; - color: rgba(255, 255, 255, 0.8); + color: var(--text-main); margin-bottom: 1.5rem; + opacity: 0.9; } /* Footer */ @@ -1153,10 +1201,10 @@ display: flex; align-items: center; justify-content: center; - background: rgba(15, 15, 25, 0.9); - border: 1px solid rgba(255, 255, 255, 0.2); + background: var(--bg-surface); + border: 1px solid var(--border-color); border-radius: 50%; - color: rgba(255, 255, 255, 0.7); + color: var(--text-muted); cursor: pointer; backdrop-filter: blur(10px); transition: all 0.3s; diff --git a/src/components/Blog.jsx b/src/components/Blog.jsx index 80625ab..a29e1b5 100644 --- a/src/components/Blog.jsx +++ b/src/components/Blog.jsx @@ -492,12 +492,12 @@ export default function Blog() { const regularPosts = blogPosts.filter(post => !post.isFeatured); return ( -
+
- + {/* Hero Section - Glassnode Inspired */}
-
- - + + On-Chain Market Intelligence
@@ -514,7 +514,7 @@ export default function Blog() { Professional-Grade Insights

- Your portal to contextualised market analysis, and cutting edge research + Your portal to contextualised market analysis, and cutting edge research for Bitcoin, Ethereum, DeFi and more. Access premium on-chain data and institutional-grade analysis.

@@ -524,12 +524,12 @@ export default function Blog() {

- + Featured Reports

- +
{featuredPosts.map((post, index) => (
- {post.title} - +
{post.tag}
@@ -562,16 +562,16 @@ export default function Blog() { {post.tag === "Premium" ? (
- - + + Premium
) : (
- - + + Free
@@ -588,13 +588,13 @@ export default function Blog() { • {post.readTime}
- +
@@ -624,8 +624,8 @@ export default function Blog() { onClick={() => navigate(`/blog/${post.id}`, { state: { post } })} >
- {post.title}{post.category} {post.date}
- +

{post.title}

{post.excerpt}

- +
{post.readTime}
Read Article - +
@@ -662,14 +662,14 @@ export default function Blog() { {/* Load More Button */}
- Load More Insights - +
diff --git a/src/components/ContactUs.css b/src/components/ContactUs.css index 4e6ea58..1951ca9 100644 --- a/src/components/ContactUs.css +++ b/src/components/ContactUs.css @@ -1,89 +1,115 @@ -.contact-container{ - padding:60px 20px; - max-width:900px; - margin:auto; - color:#fff; - background: linear-gradient(135deg, #0b021f, #1a0438); - margin-bottom: 10px; -} -.contact-header{ +.contact-container { + padding: 60px 20px; + max-width: 900px; + margin: auto; + color: var(--text-main); + background: transparent; + margin-bottom: 10px; +} + +.contact-header { text-align: center; margin-bottom: 60px; } -.contact-header h1{ + +.contact-header h1 { font-size: 40px; margin-top: 10px; - color:#c77dff; + color: var(--neon-purple); font-weight: 700; } -.contact-header p{ - color: #cfcfcf; - max-width: 600px; - margin: 0 auto; + +.contact-header p { + color: var(--text-muted); + max-width: 600px; + margin: 0 auto; } -.contact-content{ + +.contact-content { display: grid; - grid-template-columns: 1.2fr 0.8fr; - gap:50px; + grid-template-columns: 1.2fr 0.8fr; + gap: 50px; } -.contact-form{ - background: rgba(255, 255, 255, 0.05); - padding:30px; - border-radius:10px; + +.contact-form { + background: var(--glass-panel-bg); + padding: 30px; + border-radius: 10px; + border: 1px solid var(--border-color); } -.form-group{ - margin-bottom:20px; + +.form-group { + margin-bottom: 20px; display: flex; flex-direction: column; } -.form-group label{ + +.form-group label { margin-bottom: 10px; font-weight: 600; - color:#ddd; + color: var(--text-main); } + .form-group input, -.form-group textarea{ - padding:10px; - border-radius:10px; - border:1px solid rgba(255, 255, 255, 0.1); - background: rgba(255, 255, 255, 0.07); - color:#fff +.form-group textarea { + padding: 12px; + border-radius: 10px; + border: 1px solid var(--border-color); + background: var(--dashboard-bg-secondary); + color: var(--text-main); + outline: none; + transition: all 0.3s ease; +} + +.form-group input:focus, +.form-group textarea:focus { + border-color: var(--neon-cyan); + box-shadow: 0 0 10px var(--glow-cyan); } + .form-group input::placeholder, -.form-group textarea::placeholder{ - color:#bbb; +.form-group textarea::placeholder { + color: var(--text-muted); + opacity: 0.6; } -.form-group textarea{ + +.form-group textarea { resize: vertical; - min-height:100px; + min-height: 100px; } -button{ - background: #c77dff; - color:#fff; - border:none; - padding:12px 17px; + +button { + background: var(--neon-purple); + color: #fff; + border: none; + padding: 12px 17px; border-radius: 10px; cursor: pointer; font-weight: 600; transition: background 0.3s ease; } -button:hover{ - background: #a64dff; + +button:hover { + background: var(--primary-color); + box-shadow: var(--dashboard-shadow-md); } + .contact-info { - padding: 30px; + padding: 30px; } -.contact-info h3{ + +.contact-info h3 { margin-bottom: 15px; - color:#c77dff; + color: #c77dff; } -.contact-info p{ + +.contact-info p { margin-bottom: 10px; - color:#ccc; + color: #ccc; } -@media (max-width:768px){ - .contact-content{ +@media (max-width:768px) { + .contact-content { grid-template-columns: 1fr; } } \ No newline at end of file diff --git a/src/components/Contributors.jsx b/src/components/Contributors.jsx index 729390c..cb1bed5 100644 --- a/src/components/Contributors.jsx +++ b/src/components/Contributors.jsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import "./contributors.css"; +import "./contributors.css"; const OWNER = "KaranUnique"; const REPO = "CryptoHub"; @@ -15,7 +15,7 @@ const PROJECT_ADMIN = { repo: "CryptoHub", repoUrl: `https://github.com/${OWNER}/${REPO}`, githubUrl: `https://github.com/${OWNER}`, - avatarUrl: `https://avatars.githubusercontent.com/${OWNER}?v=4&s=200`, + avatarUrl: `https://avatars.githubusercontent.com/${OWNER}?v=4&s=200`, description: "Project Creator & Lead Maintainer" }; @@ -390,13 +390,13 @@ const Contributors = () => {
- -
- {/* CARD */} -
- {loading ? ( -
-
-

Loading {topCoins.find(c => c.id === selectedCoin)?.name} chart...

-
- ) : prices.length === 0 ? ( -
-

No data available

-

Please try a different coin or time range

-
- ) : ( -
- + {loading ? ( +
+
+

Loading {topCoins.find(c => c.id === selectedCoin)?.name} chart...

+
+ ) : prices.length === 0 ? ( +
+

No data available

+

Please try a different coin or time range

+
+ ) : ( +
+ -
- )} -
- - {/* TOP 5 COINS DISPLAY */} -
-

Top 5 Coins

-
- {topCoins.map((coin) => ( -
setSelectedCoin(coin.id)} - > - {coin.symbol} - {coin.name} + }} + />
- ))} + )} +
+ + {/* TOP 5 COINS DISPLAY */} +
+

Top 5 Coins

+
+ {topCoins.map((coin) => ( +
setSelectedCoin(coin.id)} + > + {coin.symbol} + {coin.name} +
+ ))} +
-
diff --git a/src/components/Footer.css b/src/components/Footer.css index 8b2c434..74c2030 100644 --- a/src/components/Footer.css +++ b/src/components/Footer.css @@ -1,9 +1,23 @@ /* Main Container */ +:root { + --footer-bg: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%); + --footer-text: #475569; + --footer-border: rgba(0, 0, 0, 0.08); + --footer-heading: #1e293b; +} + +:root[class~="dark"] { + --footer-bg: linear-gradient(180deg, #0b0028 0%, #1a0033 100%); + --footer-text: #b8bdd0; + --footer-border: rgba(255, 255, 255, 0.08); + --footer-heading: #fff; +} + .footer-container { width: 100%; - background: linear-gradient(180deg, #0b0028 0%, #1a0033 100%); - color: #fff; - border-top: 1px solid rgba(255, 255, 255, 0.08); + background: var(--footer-bg); + color: var(--footer-heading); + border-top: 1px solid var(--footer-border); position: relative; overflow: hidden; } @@ -52,7 +66,7 @@ } .footer-brand p { - color: #b8bdd0; + color: var(--footer-text); font-size: 15px; line-height: 1.6; margin-bottom: 24px; @@ -84,7 +98,7 @@ .footer-newsletter h4 { font-size: 16px; font-weight: 700; - color: #fff; + color: var(--footer-heading); margin-bottom: 20px; letter-spacing: -0.02em; } @@ -100,7 +114,7 @@ } .footer-links a { - color: #b8bdd0; + color: var(--footer-text); text-decoration: none; font-size: 14px; font-weight: 500; @@ -109,13 +123,13 @@ } .footer-links a:hover { - color: #fff; + color: var(--footer-heading); transform: translateX(4px); } /* Newsletter */ .footer-newsletter p { - color: #b8bdd0; + color: var(--footer-text); font-size: 14px; margin-bottom: 20px; } @@ -128,18 +142,18 @@ .newsletter-form input { flex: 1; - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.1); + background: var(--glass-panel-bg); + border: 1px solid var(--footer-border); border-radius: 12px; padding: 14px 18px; - color: #fff; + color: var(--footer-heading); font-size: 15px; backdrop-filter: blur(20px); transition: all 0.3s ease; } .newsletter-form input::placeholder { - color: #8f9bba; + color: var(--footer-text); } .newsletter-form input:focus { @@ -194,7 +208,7 @@ /* Bottom Section */ .footer-bottom-section { - border-top: 1px solid rgba(255, 255, 255, 0.08); + border-top: 1px solid var(--footer-border); padding-top: 32px; display: flex; justify-content: space-between; @@ -212,12 +226,12 @@ width: 44px; height: 44px; border-radius: 12px; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); + background: var(--glass-card-bg); + border: 1px solid var(--footer-border); display: flex; align-items: center; justify-content: center; - color: #b8bdd0; + color: var(--footer-text); font-size: 18px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(10px); @@ -226,7 +240,7 @@ .social-links a:hover { background: rgba(121, 40, 202, 0.2); border-color: #7928ca; - color: #fff; + color: var(--footer-heading); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(121, 40, 202, 0.3); } @@ -237,13 +251,13 @@ .footer-bottom p { font-size: 13px; - color: #8f9bba; + color: var(--footer-text); margin: 0; line-height: 1.5; } .footer-bottom a { - color: #b8bdd0; + color: var(--footer-text); text-decoration: none; margin: 0 12px; } @@ -251,28 +265,34 @@ .footer-bottom a:hover { color: #7928ca; } -.footer-newsletter{ - max-width:100%; + +.footer-newsletter { + max-width: 100%; } -.footer-newsletter form{ - display:flex; - flex-wrap:wrap; - gap:10px; + +.footer-newsletter form { + display: flex; + flex-wrap: wrap; + gap: 10px; } -.footer-newsletter form input{ + +.footer-newsletter form input { border-radius: 5px; - flex:1; -padding:5px 0px; + flex: 1; + padding: 5px 0px; } -.footer-newsletter form input::placeholder{ - padding-left:10px; + +.footer-newsletter form input::placeholder { + padding-left: 10px; } -button{ + +button { border-radius: 5px; - padding:5px 10px; + padding: 5px 10px; background-color: #666; } -button:hover{ + +button:hover { background-color: #7928ca; } @@ -282,6 +302,7 @@ button:hover{ opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); @@ -294,7 +315,7 @@ button:hover{ grid-template-columns: 1fr 1fr 1fr; gap: 32px; } - + .footer-brand { grid-column: span 3; } @@ -304,30 +325,30 @@ button:hover{ .footer-content { padding: 40px 20px 20px; } - + .footer-main { grid-template-columns: 1fr; gap: 32px; } - + .footer-brand { text-align: center; } - + .payment-methods { justify-content: center; } - + .footer-bottom-section { flex-direction: column; text-align: center; } - + .footer-bottom { text-align: center; order: -1; } - + .newsletter-form { max-width: 100%; } @@ -337,13 +358,13 @@ button:hover{ .social-links { justify-content: center; } - + .payment-methods { gap: 6px; } - + .payment-icon { width: 36px; height: 24px; } -} +} \ No newline at end of file diff --git a/src/components/LoadingSpinner.css b/src/components/LoadingSpinner.css index bc18a72..425227e 100644 --- a/src/components/LoadingSpinner.css +++ b/src/components/LoadingSpinner.css @@ -9,16 +9,16 @@ justify-content: center; align-items: center; z-index: 9999; - background: transparent; /* No background overlay */ + background: transparent; + /* No background overlay */ } .spinner-card { - background: rgba(31, 31, 31, 0.95); + background: var(--glass-panel-bg); padding: 30px 40px; border-radius: 16px; - box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3), - 0 0 0 1px rgba(127, 92, 255, 0.3); - border: 1px solid rgba(127, 92, 255, 0.4); + box-shadow: var(--dashboard-shadow-lg); + border: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; @@ -32,6 +32,7 @@ opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); @@ -84,14 +85,23 @@ } @keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } } @keyframes bounce { - 0%, 80%, 100% { + + 0%, + 80%, + 100% { transform: scale(0); } + 40% { transform: scale(1); } diff --git a/src/components/Login.css b/src/components/Login.css index ddd3366..0a0ea48 100644 --- a/src/components/Login.css +++ b/src/components/Login.css @@ -69,7 +69,7 @@ font-size: 2rem; font-weight: 700; margin-bottom: 10px; - color: #fff; + color: var(--text-main); } .auth-subtitle { @@ -112,11 +112,11 @@ .auth-input { width: 100%; - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.1); + background: var(--dashboard-bg-secondary); + border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 50px 12px 60px; - color: #fff; + color: var(--text-main); font-size: 1rem; outline: none; transition: all 0.3s ease; @@ -149,7 +149,7 @@ } .toggle-password:hover { - color: #fff; + color: var(--text-main); } /* Error Messages */ @@ -207,7 +207,7 @@ } .forgot-password:hover { - color: #fff; + color: var(--primary-color); text-decoration: underline; } @@ -231,7 +231,7 @@ .divider::after { content: ""; flex: 1; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid var(--glass-border); } .divider span { @@ -249,16 +249,16 @@ border-radius: 12px; cursor: pointer; font-weight: 600; - color: #fff; + color: var(--text-main); margin-bottom: 10px; - border: 1px solid rgba(255, 255, 255, 0.1); - background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--glass-border); + background: var(--glass-panel-bg); transition: all 0.3s; } .google-signin-btn:hover { - background: rgba(255, 255, 255, 0.1); - border-color: rgba(255, 255, 255, 0.2); + background: var(--dashboard-bg-secondary); + border-color: var(--dashboard-border-hover); transform: translateY(-2px); } @@ -300,72 +300,8 @@ } } -/* Google Sign-In Button */ -.divider { - display: flex; - align-items: center; - text-align: center; - margin: 24px 0; -} - -.divider::before, -.divider::after { - content: ''; - flex: 1; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); -} - -.divider span { - padding: 0 16px; - color: #b8b8b8; - font-size: 14px; - font-weight: 500; -} - -.google-signin-btn { - width: 100%; - padding: 12px; - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 8px; - background: rgba(255, 255, 255, 0.05); - color: #fff; - font-size: 16px; - font-weight: 600; - cursor: pointer; - transition: all 0.3s ease; - display: flex; - align-items: center; - justify-content: center; - gap: 12px; -} - -.google-signin-btn:hover:not(:disabled) { - background: rgba(255, 255, 255, 0.1); - border-color: rgba(121, 39, 255, 0.3); - transform: translateY(-2px); -} - +/* Google Sign-In Button - Disabled State */ .google-signin-btn:disabled { opacity: 0.6; cursor: not-allowed; -} - -body[data-theme="light"] .divider::before, -body[data-theme="light"] .divider::after { - border-bottom-color: rgba(0, 0, 0, 0.1); -} - -body[data-theme="light"] .divider span { - color: #718096; -} - -body[data-theme="light"] .google-signin-btn { - background: #ffffff; - border-color: #cbd5e0; - color: #2d3748; -} - -body[data-theme="light"] .google-signin-btn:hover:not(:disabled) { - background: #f7fafc; - border-color: #7927ff; } \ No newline at end of file diff --git a/src/components/MarketFilters.css b/src/components/MarketFilters.css index d862aa9..bba7e06 100644 --- a/src/components/MarketFilters.css +++ b/src/components/MarketFilters.css @@ -12,26 +12,28 @@ .filter-label { font-size: 14px; - color: #aaa; + color: var(--text-muted); } .filter-btn { padding: 6px 14px; border-radius: 20px; - border: 1px solid rgba(255, 255, 255, 0.2); - background: transparent; - color: #fff; + border: 1px solid var(--border-color); + background: var(--dashboard-bg-secondary); + color: var(--text-main); cursor: pointer; - transition: background 0.2s ease, border 0.2s ease; + transition: all 0.2s ease; } .filter-btn:hover { - background: rgba(255, 255, 255, 0.08); + background: var(--dashboard-accent-cyan-dim); + border-color: var(--neon-cyan); } .filter-btn.active { - background: #7927ff; - border-color: #7927ff; + background: var(--neon-purple); + border-color: var(--neon-purple); + color: #fff; } /* Toggle button hidden on desktop */ @@ -45,10 +47,11 @@ display: flex; flex-direction: column; align-items: flex-end; -} + } + .filter-toggle { display: block; - background: #111; + background: var(--dashboard-bg-secondary); color: #fff; border: none; padding: 10px 14px; @@ -61,9 +64,10 @@ align-items: flex-start; gap: 8px; margin-top: 10px; - background: #111; + background: var(--dashboard-bg-secondary); padding: 10px; border-radius: 8px; + border: 1px solid var(--border-color); /* Animation setup */ opacity: 0; @@ -81,7 +85,8 @@ .market-filters.open { opacity: 1; transform: translateY(0); - max-height: 300px; /* safe height */ + max-height: 300px; + /* safe height */ pointer-events: auto; } @@ -93,4 +98,4 @@ width: 100%; text-align: left; } -} +} \ No newline at end of file diff --git a/src/components/Navbar.css b/src/components/Navbar.css index 6d34279..e91ff2f 100644 --- a/src/components/Navbar.css +++ b/src/components/Navbar.css @@ -1,2059 +1,379 @@ -/* RESPONSIVE NAVBAR CSS WITH MOBILE DROPDOWN MENU */ -/* Base Reset */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --primary-color: #b026ff; - --secondary-color: #00f3ff; - --bg-dark: #0a0a0f; - --text-light: #ffffff; - --border-color: rgba(255, 255, 255, 0.1); - --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1); - --transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); - --transition-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -/* MOTION & ANIMATION KEYFRAMES */ - -/* Navbar slide-down entrance animation */ -@keyframes navbarSlideDown { - 0% { - transform: translateY(-100%); - opacity: 0; - } - 100% { - transform: translateY(0); - opacity: 1; - } -} - -/* Staggered fade-in for nav items */ -@keyframes navItemFadeIn { - 0% { - opacity: 0; - transform: translateY(-20px); - } - 100% { - opacity: 1; - transform: translateY(0); - } -} - -/* Glow pulse effect */ -@keyframes glowPulse { - 0%, - 100% { - box-shadow: - 0 0 5px rgba(0, 243, 255, 0.3), - 0 0 10px rgba(176, 38, 255, 0.2); - } - 50% { - box-shadow: - 0 0 15px rgba(0, 243, 255, 0.5), - 0 0 25px rgba(176, 38, 255, 0.4); - } -} +/* === Overrides: logo size & theme toggle contrast === */ -/* Shimmer effect for buttons */ -@keyframes shimmer { - 0% { - background-position: -200% center; - } - 100% { - background-position: 200% center; - } +.navbar-logo img { + width: 56px; /* slightly larger logo */ + height: auto; + flex-shrink: 0; } -/* Floating animation */ -@keyframes float { - 0%, - 100% { - transform: translateY(0px); - } - 50% { - transform: translateY(-3px); - } +.theme-toggle-btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 8px; + border-radius: 999px; + background: rgba(15, 23, 42, 0.04); /* light subtle contrast */ + border: 1px solid rgba(148, 163, 184, 0.6); + color: #0f172a; + cursor: pointer; + transition: all 0.25s ease; } -/* Border gradient animation */ -@keyframes borderGlow { - 0%, - 100% { - border-color: rgba(0, 243, 255, 0.3); - } - 50% { - border-color: rgba(176, 38, 255, 0.5); - } +/* Dark mode base */ +.dark .theme-toggle-btn { + background: rgba(15, 23, 42, 0.85); + border-color: rgba(148, 163, 184, 0.9); + color: #e5e7eb; } -/* Ripple effect */ -@keyframes ripple { - 0% { - transform: scale(0); - opacity: 0.5; - } - 100% { - transform: scale(4); - opacity: 0; - } +/* Light mode hover */ +.theme-toggle-btn:hover { + background: #0f172a; + color: #f9fafb; + border-color: #0f172a; + box-shadow: 0 0 12px rgba(15, 23, 42, 0.35); } -/* Text gradient animation */ -@keyframes gradientShift { - 0%, - 100% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 50%; - } +/* Dark mode hover */ +.dark .theme-toggle-btn:hover { + background: #f9fafb; + color: #020617; + border-color: #f9fafb; + box-shadow: 0 0 12px rgba(255, 255, 255, 0.4); } +/* ========================= */ +/* NAVBAR CLEAN STABLE FIX */ +/* ========================= */ -/* Navbar Container */ .navbar { position: sticky; top: 0; - left: 0; - right: 0; width: 100%; - background: rgba(10, 10, 15, 0.95); - backdrop-filter: blur(20px) saturate(180%); - -webkit-backdrop-filter: blur(20px) saturate(180%); - border-bottom: 1px solid var(--border-color); - padding: 0.875rem 2%; - z-index: 1000; - transition: all 0.4s var(--transition-smooth); - /* Entrance animation */ - animation: navbarSlideDown 0.6s var(--transition-elastic) forwards; - overflow: visible; + backdrop-filter: blur(12px); /* reduced from 20px */ + -webkit-backdrop-filter: blur(12px); + will-change: transform; + transform: translateZ(0); + backface-visibility: hidden; + z-index: 999; + transition: background 0.3s ease, border 0.3s ease; } -/* Subtle border glow animation on navbar */ -.navbar::after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 1px; - background: linear-gradient( - 90deg, - transparent, - rgba(0, 243, 255, 0.5), - rgba(176, 38, 255, 0.5), - transparent - ); - opacity: 0; - transition: opacity 0.4s ease; -} -.navbar:hover::after { - opacity: 1; +/* LIGHT MODE */ +.navbar { + background: rgba(255, 255, 255, 0.9); + border-bottom: 1px solid rgba(0, 0, 0, 0.08); } -.navbar.scrolled { - padding: 0.65rem 2%; - background: rgba(10, 10, 15, 0.98); - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); +/* DARK MODE */ +.dark .navbar { + background: rgba(12, 12, 28, 0.9); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); } -/* Navbar Content Container */ -.navbar-content { +.navbar-container { + max-width: 1400px; + margin: auto; + padding: 0.8rem 2rem; display: flex; - justify-content: space-between; align-items: center; - gap: 1.2rem; - width: 100%; - max-width: 1400px; - margin: 0 auto; - min-height: 56px; -} - -/* Desktop layout - grid for logo, menu, actions */ -@media (min-width: 768px) { - .navbar-content { - display: grid; - grid-template-columns: auto 1fr auto; /* logo | menu | actions */ - gap: 1rem; - align-items: center; - } -} - -@media (min-width: 1024px) { - .navbar-content { - gap: 2rem; - } + justify-content: space-between; } -@media (min-width: 1280px) { - .navbar-content { - gap: 3rem; - } -} +/* LOGO */ -/* Logo/Brand */ .navbar-logo { display: flex; align-items: center; - gap: 0.875rem; + gap: 10px; + font-weight: 700; + font-size: 1.2rem; text-decoration: none; - flex-shrink: 0; - font-weight: 800; - font-size: 1.35rem; - background: linear-gradient(135deg, #ffffff 0%, #00f3ff 50%, #b026ff 100%); - background-size: 200% 200%; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - transition: all 0.4s var(--transition-elastic); - position: relative; - padding: 0; - animation: navItemFadeIn 0.5s var(--transition-smooth) 0.1s both; -} - -.navbar-logo:hover { - transform: translateY(-3px) scale(1.02); - animation: - gradientShift 2s ease infinite, - float 2s ease-in-out infinite; - filter: drop-shadow(0 0 8px rgba(0, 243, 255, 0.4)); -} - -.navbar-logo::after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - width: 0; - height: 2px; - background: linear-gradient(90deg, #00f3ff, #b026ff); - transition: width 0.4s var(--transition-smooth); - border-radius: 2px; -} - -.navbar-logo:hover::after { - width: 100%; + transition: color 0.3s ease; } -.navbar-logo-icon { - width: 44px; - height: 44px; - border-radius: 12px; - background: linear-gradient( - 135deg, - rgba(176, 38, 255, 0.2) 0%, - rgba(0, 243, 255, 0.15) 50%, - rgba(176, 38, 255, 0.1) 100% - ); - border: 1.5px solid rgba(176, 38, 255, 0.3); - display: flex; - align-items: center; - justify-content: center; - transition: all 0.4s var(--transition-smooth); - position: relative; - overflow: hidden; -} - -.navbar-logo-icon::before { - content: ""; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient( - 90deg, - transparent, - rgba(255, 255, 255, 0.1), - transparent - ); - transition: left 0.6s var(--transition-smooth); -} - -.navbar-logo:hover .navbar-logo-icon { - border-color: rgba(0, 243, 255, 0.6); - box-shadow: - 0 8px 32px rgba(0, 243, 255, 0.25), - 0 0 0 1px rgba(176, 38, 255, 0.2); - transform: rotate(5deg) scale(1.05); +/* Light */ +.navbar-logo { + color: #111; } -.navbar-logo:hover .navbar-logo-icon::before { - left: 100%; +/* Dark */ +.dark .navbar-logo { + color: #fff; } -.logo-img { - width: 70%; - height: 70%; - object-fit: contain; - filter: drop-shadow(0 0 6px rgba(0, 243, 255, 0.8)) - drop-shadow(0 0 12px rgba(176, 38, 255, 0.4)); - transition: all 0.4s var(--transition-smooth); +.navbar-logo img { + width: 45px; } -.navbar-logo:hover .logo-img { - transform: scale(1.1); - filter: drop-shadow(0 0 8px rgba(0, 243, 255, 1)) - drop-shadow(0 0 16px rgba(176, 38, 255, 0.6)); -} +/* MENU */ -/* Desktop Navigation Menu */ .navbar-menu { display: flex; - flex-direction: column; + gap: 1.5rem; list-style: none; - gap: 1.2rem; - padding: 0; - margin: 0; -} - -@media (min-width: 768px) { - .navbar-menu { - display: flex; - flex-direction: row; - flex: 1; - max-width: none; - margin: 0; - padding: 0; - gap: 0.5rem; - justify-content: center; - align-items: center; - } -} - -@media (min-width: 1024px) { - .navbar-menu { - gap: 0.875rem; - } -} - -@media (min-width: 1280px) { - .navbar-menu { - gap: 1.2rem; - } + align-items: center; } .navbar-item { - display: flex; position: relative; } -.navbar-item:hover { - z-index: 100; +.navbar-link { + background: none; + border: none; + font-size: 0.95rem; + cursor: pointer; + text-decoration: none; + padding: 8px 14px; + border-radius: 8px; + transition: 0.25s ease; } +/* Light */ .navbar-link { - display: flex; - align-items: center; - padding: 0.5rem 1.125rem; - color: rgba(255, 255, 255, 0.75); - text-decoration: none; - font-weight: 500; - font-size: 0.95rem; - letter-spacing: 0.3px; - transition: all 0.3s var(--transition-smooth); - position: relative; - white-space: nowrap; - border-radius: 10px; - overflow: hidden; - z-index: 1; + color: #333; } -.navbar-link::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient( - 135deg, - rgba(176, 38, 255, 0.1) 0%, - rgba(0, 243, 255, 0.05) 100% - ); - border-radius: 10px; - transform: scaleX(0); - transform-origin: right; - transition: transform 0.4s var(--transition-smooth); - z-index: -1; +/* Dark */ +.dark .navbar-link { + color: #ddd; } .navbar-link:hover { - color: #ffffff; - transform: translateY(-3px) scale(1.05); - text-shadow: - 0 0 10px rgba(0, 243, 255, 0.5), - 0 0 20px rgba(176, 38, 255, 0.3); + background: rgba(176, 38, 255, 0.08); + color: #b026ff; } -.navbar-item:hover .navbar-link { - color: #ffffff; - transform: translateY(-3px) scale(1.05); - text-shadow: 0 0 10px rgba(0, 243, 255, 0.5), - 0 0 20px rgba(176, 38, 255, 0.3); +.dark .navbar-link:hover { + background: rgba(176, 38, 255, 0.15); } -.navbar-link:focus-visible, -.navbar-link:active { - color: #ffffff; - transform: translateY(-3px) scale(1.05); - text-shadow: 0 0 10px rgba(0, 243, 255, 0.5), - 0 0 20px rgba(176, 38, 255, 0.3); +.navbar-link.active { + background: rgba(176, 38, 255, 0.12); + color: #b026ff; } -.navbar-link:hover::before { - transform: scaleX(1); - transform-origin: left; -} +/* DROPDOWN */ -.navbar-item:hover .navbar-link::before { - transform: scaleX(1); - transform-origin: left; +.dropdown-menu { + position: absolute; + top: 110%; + left: 0; + border-radius: 10px; + padding: 10px 0; + min-width: 180px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); + transition: background 0.3s ease; } -.navbar-link:focus-visible::before, -.navbar-link:active::before { - transform: scaleX(1); - transform-origin: left; +/* Light */ +.dropdown-menu { + background: #fff; } -.navbar-link::after { - content: ""; - position: absolute; - bottom: 2px; - left: 50%; - transform: translateX(-50%); - width: 0; - height: 2px; - background: linear-gradient(90deg, #00f3ff, #b026ff); - border-radius: 2px; - transition: all 0.4s var(--transition-bounce); - opacity: 0; - box-shadow: 0 0 8px rgba(0, 243, 255, 0.6); +/* Dark */ +.dark .dropdown-menu { + background: #1a1a2e; } -.navbar-link:hover::after { - width: 80%; - opacity: 1; - animation: glowPulse 1.5s ease infinite; +.dropdown-menu li { + list-style: none; } -.navbar-item:hover .navbar-link::after { - width: 80%; - opacity: 1; - animation: glowPulse 1.5s ease infinite; +.dropdown-menu a { + display: block; + padding: 10px 18px; + text-decoration: none; + transition: 0.2s; } -.navbar-link:focus-visible::after, -.navbar-link:active::after { - width: 80%; - opacity: 1; - animation: glowPulse 1.5s ease infinite; +/* Light */ +.dropdown-menu a { + color: #333; } -/* Staggered animation for nav items */ -.navbar-item:nth-child(1) { - animation: navItemFadeIn 0.5s var(--transition-smooth) 0.15s both; -} -.navbar-item:nth-child(2) { - animation: navItemFadeIn 0.5s var(--transition-smooth) 0.2s both; -} -.navbar-item:nth-child(3) { - animation: navItemFadeIn 0.5s var(--transition-smooth) 0.25s both; -} -.navbar-item:nth-child(4) { - animation: navItemFadeIn 0.5s var(--transition-smooth) 0.3s both; -} -.navbar-item:nth-child(5) { - animation: navItemFadeIn 0.5s var(--transition-smooth) 0.35s both; -} -.navbar-item:nth-child(6) { - animation: navItemFadeIn 0.5s var(--transition-smooth) 0.4s both; -} -.navbar-item:nth-child(7) { - animation: navItemFadeIn 0.5s var(--transition-smooth) 0.45s both; +/* Dark */ +.dark .dropdown-menu a { + color: #ddd; } -.navbar-link.active { - color: #ffffff; - font-weight: 600; - background: linear-gradient( - 135deg, - rgba(176, 38, 255, 0.15) 0%, - rgba(0, 243, 255, 0.1) 100% - ); - box-shadow: - 0 4px 20px rgba(176, 38, 255, 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.1); - animation: borderGlow 3s ease infinite; - border: 1px solid rgba(0, 243, 255, 0.2); +.dropdown-menu a:hover { + background: rgba(176, 38, 255, 0.08); + color: #b026ff; } -.navbar-link.active::after { - width: 80%; - opacity: 1; - animation: glowPulse 2s ease infinite; -} +/* RIGHT SIDE */ -/* Actions Container */ .navbar-actions { - display: flex; - align-items: center; - gap: 1.5rem; - flex-shrink: 0; -} - -/* Desktop Auth */ -.desktop-auth { display: flex; align-items: center; gap: 1rem; } -/* Mobile Only Elements */ -.mobile-only { - display: none; -} +/* BUTTONS */ -/* Action Buttons */ .navbar-btn { - padding: 0.75rem 1.5rem; - border-radius: 12px; - font-weight: 600; - font-size: 0.95rem; + padding: 8px 16px; + border-radius: 8px; + font-size: 0.9rem; text-decoration: none; - transition: all 0.4s var(--transition-smooth); - cursor: pointer; - border: none; - white-space: nowrap; - display: inline-block; - text-align: center; - min-width: fit-content; - position: relative; - overflow: hidden; - letter-spacing: 0.5px; - z-index: 1; -} - -.navbar-btn::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: inherit; - border-radius: inherit; - z-index: -1; - transition: transform 0.4s var(--transition-smooth); -} - -.navbar-btn:hover::before { - transform: scale(1.05); + transition: 0.25s; } -.navbar-btn-login { - color: #ffffff; - background: transparent; - border: 2px solid rgba(255, 255, 255, 0.2); - padding: 0.75rem 1.8rem; - position: relative; - overflow: hidden; - animation: navItemFadeIn 0.5s var(--transition-smooth) 0.4s both; - transition: all 0.3s var(--transition-elastic); +/* Login Button */ +.navbar-btn.login { + border: 1px solid #ccc; + color: #333; } -.navbar-btn-login::after { - 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 var(--transition-smooth); +.dark .navbar-btn.login { + border: 1px solid rgba(255, 255, 255, 0.3); + color: #ddd; } -/* Ripple container for login button */ -.navbar-btn-login::before { - content: ""; - position: absolute; - top: 50%; - left: 50%; - width: 0; - height: 0; - background: rgba(255, 255, 255, 0.15); - border-radius: 50%; - transform: translate(-50%, -50%); - transition: - width 0.6s ease, - height 0.6s ease; +/* Signup Button */ +.navbar-btn.signup { + background: linear-gradient(135deg, #00f3ff, #b026ff); + color: white; } -.navbar-btn-login:hover { - background: rgba(255, 255, 255, 0.08); - border-color: rgba(0, 243, 255, 0.5); - transform: translateY(-3px) scale(1.03); - box-shadow: - 0 8px 32px rgba(0, 243, 255, 0.15), - 0 0 0 1px rgba(0, 243, 255, 0.1); - color: #00f3ff; - text-shadow: 0 0 10px rgba(0, 243, 255, 0.5); -} +/* PROFILE */ -.navbar-btn-login:hover::after { - left: 100%; +.profile-menu-container { + position: relative; } -.navbar-btn-login:hover::before { - width: 300px; - height: 300px; - opacity: 0; +.profile-btn { + background: none; + border: none; + cursor: pointer; + font-size: 1.2rem; + transition: color 0.3s ease; } -.navbar-btn-login:active { - transform: translateY(-1px) scale(0.98); +/* Light */ +.profile-btn { + color: #333; } -.navbar-btn-signup { - background: linear-gradient(135deg, #00f3ff 0%, #b026ff 50%, #00f3ff 100%); - background-size: 200% auto; - color: #000000; - padding: 0.75rem 2rem; - font-weight: 700; - box-shadow: - 0 4px 20px rgba(0, 243, 255, 0.3), - 0 0 0 1px rgba(176, 38, 255, 0.2); - animation: navItemFadeIn 0.5s var(--transition-smooth) 0.5s both; - transition: all 0.3s var(--transition-elastic); - position: relative; - z-index: 1; +/* Dark */ +.dark .profile-btn { + color: #ddd; } -.navbar-btn-signup::before { - content: ""; +.profile-dropdown { position: absolute; - top: 0; - left: 0; right: 0; - bottom: 0; - background: linear-gradient(135deg, #00f3ff 0%, #b026ff 50%, #00f3ff 100%); - background-size: 200% auto; - border-radius: inherit; - z-index: -1; - opacity: 0; - transition: opacity 0.3s ease; -} - -.navbar-btn-signup:hover { - transform: translateY(-4px) scale(1.05); - box-shadow: - 0 15px 45px rgba(0, 243, 255, 0.5), - 0 0 0 2px rgba(176, 38, 255, 0.4), - 0 0 40px rgba(176, 38, 255, 0.3), - 0 0 60px rgba(0, 243, 255, 0.2); - animation: shimmer 1.5s linear infinite; - color: #ffffff; - text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); + top: 120%; + border-radius: 10px; + padding: 12px; + min-width: 220px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + transition: background 0.3s ease; } -.navbar-btn-signup:hover::before { - opacity: 1; - animation: shimmer 1.5s linear infinite; +/* Light */ +.profile-dropdown { + background: white; } -.navbar-btn-signup:active { - transform: translateY(-2px) scale(1.02); - box-shadow: - 0 8px 25px rgba(0, 243, 255, 0.4), - 0 0 0 1px rgba(176, 38, 255, 0.3); +/* Dark */ +.dark .profile-dropdown { + background: #1a1a2e; } -/* User Menu */ -.user-menu { +.profile-dropdown a, +.profile-dropdown button { display: flex; + gap: 8px; align-items: center; - gap: 0.875rem; - background: rgba(255, 255, 255, 0.05); - padding: 10px 18px; - border-radius: 14px; - border: 1px solid rgba(255, 255, 255, 0.08); - flex-shrink: 0; - backdrop-filter: blur(10px); - transition: all 0.4s var(--transition-elastic); - animation: navItemFadeIn 0.5s var(--transition-smooth) 0.3s both; - position: relative; - overflow: hidden; -} - -.user-menu::before { - content: ""; - position: absolute; - top: 0; - left: -100%; - width: 50%; - height: 100%; - background: linear-gradient( - 90deg, - transparent, - rgba(255, 255, 255, 0.05), - transparent - ); - transition: left 0.8s var(--transition-smooth); -} - -.user-menu:hover { - background: rgba(255, 255, 255, 0.08); - border-color: rgba(0, 243, 255, 0.3); - transform: translateY(-2px); - box-shadow: - 0 12px 32px rgba(0, 0, 0, 0.3), - 0 0 0 1px rgba(0, 243, 255, 0.1); -} - -.user-menu:hover::before { - left: 150%; -} - -.user-email { - font-size: 0.85rem; - color: rgba(255, 255, 255, 0.85); - max-width: 200px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-weight: 500; - flex-shrink: 1; -} - -.icon-btn { + width: 100%; + padding: 8px; background: none; border: none; - color: rgba(255, 255, 255, 0.7); cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.3s var(--transition-smooth); - font-size: 1.1rem; - padding: 8px; - border-radius: 8px; - flex-shrink: 0; - position: relative; - overflow: hidden; + text-decoration: none; + transition: 0.2s; } -.icon-btn::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(255, 255, 255, 0.1); - border-radius: 8px; - transform: scale(0); - transition: transform 0.3s var(--transition-smooth); +/* Light */ +.profile-dropdown a, +.profile-dropdown button { + color: #333; } -.icon-btn:hover { - color: #00f3ff; - transform: translateY(-2px) rotate(10deg) scale(1.1); - text-shadow: 0 0 10px rgba(0, 243, 255, 0.8); +/* Dark */ +.dark .profile-dropdown a, +.dark .profile-dropdown button { + color: #ddd; } -.icon-btn:hover::before { - transform: scale(1); - background: rgba(0, 243, 255, 0.15); +.profile-dropdown a:hover, +.profile-dropdown button:hover { + background: rgba(176, 38, 255, 0.08); + color: #b026ff; } -.icon-btn:active { - transform: translateY(0) rotate(0deg) scale(0.95); -} +/* MOBILE */ -.logout-btn { - padding: 8px 16px; - border-radius: 10px; - font-size: 0.85rem; - font-weight: 600; - background: linear-gradient( - 135deg, - rgba(239, 68, 68, 0.15) 0%, - rgba(239, 68, 68, 0.1) 100% - ); - border: 1.5px solid rgba(239, 68, 68, 0.25); - color: #ef4444; +.navbar-toggle { + display: none; + font-size: 1.4rem; + background: none; + border: none; cursor: pointer; - transition: all 0.3s var(--transition-smooth); - flex-shrink: 0; - white-space: nowrap; - position: relative; - overflow: hidden; -} - -.logout-btn::before { - content: ""; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient( - 90deg, - transparent, - rgba(239, 68, 68, 0.1), - transparent - ); - transition: left 0.6s var(--transition-smooth); -} - -.logout-btn:hover { - background: linear-gradient( - 135deg, - rgba(239, 68, 68, 0.25) 0%, - rgba(239, 68, 68, 0.2) 100% - ); - border-color: rgba(239, 68, 68, 0.6); - transform: translateY(-3px) scale(1.03); - box-shadow: - 0 10px 25px rgba(239, 68, 68, 0.25), - 0 0 20px rgba(239, 68, 68, 0.15); - text-shadow: 0 0 8px rgba(239, 68, 68, 0.5); + color: inherit; } -.logout-btn:hover::before { - left: 100%; -} - -.logout-btn:active { - transform: translateY(-1px) scale(0.98); -} +@media (max-width: 900px) { + .navbar-menu { + display: none; + } -/* Profile Menu Container */ -.profile-menu-container { - position: relative; + .navbar-toggle { + display: block; + } } -.profile-icon-btn { - width: 52px; - height: 52px; - border-radius: 50%; - background: linear-gradient(135deg, - rgba(176, 38, 255, 0.2) 0%, - rgba(0, 243, 255, 0.15) 100%); - border: 2px solid rgba(176, 38, 255, 0.3); - color: #fff; +.theme-toggle-btn { + background: var(--navbar-bg); + border: 1px solid var(--border-color); + color: var(--text-main); + padding: 10px; + border-radius: 12px; cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.4rem; - transition: all 0.3s var(--transition-smooth); - position: relative; - overflow: hidden; + transition: all 0.25s ease; } -.profile-icon-btn::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(135deg, - rgba(0, 243, 255, 0.2) 0%, - rgba(176, 38, 255, 0.2) 100%); - opacity: 0; - transition: opacity 0.3s var(--transition-smooth); +/* Light mode hover */ +:root:not(.dark) .theme-toggle-btn:hover { + background: var(--primary-color); + color: #ffffff; + border-color: var(--primary-color); + box-shadow: 0 0 12px rgba(176, 38, 255, 0.4); } -.profile-icon-btn:hover { - transform: translateY(-3px) scale(1.08); - border-color: rgba(0, 243, 255, 0.6); - box-shadow: 0 8px 24px rgba(0, 243, 255, 0.3), - 0 0 20px rgba(176, 38, 255, 0.25); +/* Dark mode hover */ +:root.dark .theme-toggle-btn:hover { + background: #ffffff; + color: #111; + border-color: #ffffff; + box-shadow: 0 0 12px rgba(255, 255, 255, 0.4); } -.profile-icon-btn:hover::before { - opacity: 1; -} +/* === Final theme toggle contrast fix (light mode) === */ -.profile-icon-btn:active { - transform: translateY(0) scale(0.98); +:root:not(.dark) .theme-toggle-btn { + background: #ffffff; + color: #0f172a; + border-color: rgba(148, 163, 184, 0.9); } -/* Profile Dropdown */ -.profile-dropdown { - position: absolute; - top: calc(100% + 12px); - right: 0; - min-width: 280px; - background: rgba(15, 15, 25, 0.98); - border: 1px solid rgba(176, 38, 255, 0.3); - border-radius: 16px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), - 0 0 40px rgba(176, 38, 255, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); - backdrop-filter: blur(20px); - overflow: hidden; - opacity: 0; - visibility: hidden; - transform: translateY(-10px) scale(0.95); - transition: all 0.3s var(--transition-smooth); - z-index: 100; -} - -.profile-dropdown.show { - opacity: 1; - visibility: visible; - transform: translateY(0) scale(1); -} - -.profile-dropdown::before { - content: ''; - position: absolute; - top: -8px; - right: 18px; - width: 0; - height: 0; - border-left: 8px solid transparent; - border-right: 8px solid transparent; - border-bottom: 8px solid rgba(176, 38, 255, 0.3); -} - -.profile-dropdown-header { - padding: 18px 20px; - background: linear-gradient(135deg, - rgba(176, 38, 255, 0.15) 0%, - rgba(0, 243, 255, 0.1) 100%); - display: flex; - align-items: center; - gap: 12px; -} - -.profile-dropdown-header .profile-icon { - font-size: 1.25rem; - color: #00f3ff; - filter: drop-shadow(0 0 8px rgba(0, 243, 255, 0.6)); -} - -.profile-email { - color: rgba(255, 255, 255, 0.95); - font-size: 0.9rem; - font-weight: 500; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - flex: 1; -} - -.profile-dropdown-divider { - height: 1px; - background: linear-gradient(90deg, - transparent, - rgba(176, 38, 255, 0.3), - rgba(0, 243, 255, 0.3), - transparent); -} - -.profile-dropdown-items { - padding: 8px; -} - -.profile-dropdown-item { - display: flex; - align-items: center; - gap: 12px; - padding: 12px 16px; - color: rgba(255, 255, 255, 0.85); - font-size: 0.95rem; - font-weight: 500; - text-decoration: none; - border: none; - background: transparent; - cursor: pointer; - border-radius: 10px; - transition: all 0.25s var(--transition-smooth); - width: 100%; - text-align: left; - position: relative; - overflow: hidden; -} - -.profile-dropdown-item::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, - transparent, - rgba(176, 38, 255, 0.15), - transparent); - transition: left 0.4s var(--transition-smooth); -} - -.profile-dropdown-item:hover { - background: rgba(176, 38, 255, 0.2); - color: #fff; - transform: translateX(5px); - box-shadow: 0 4px 12px rgba(176, 38, 255, 0.2); -} - -.profile-dropdown-item:hover::before { - left: 100%; -} - -.profile-dropdown-item svg { - font-size: 1.1rem; - transition: all 0.25s var(--transition-smooth); -} - -.profile-dropdown-item:hover svg { - transform: scale(1.15); - filter: drop-shadow(0 0 6px currentColor); -} - -.profile-dropdown-item.logout-item { - color: #ef4444; - margin-top: 4px; -} - -.profile-dropdown-item.logout-item:hover { - background: rgba(239, 68, 68, 0.15); - color: #ff6b6b; -} - -.profile-dropdown-item:active { - transform: translateX(3px) scale(0.98); -} - -/* Mobile Menu Toggle Button */ -.navbar-toggle { - display: none; - background: none; - border: none; - cursor: pointer; - padding: 10px; - border-radius: 10px; - transition: all 0.3s var(--transition-smooth); - position: relative; - overflow: hidden; - color: #ffffff; -} - -.navbar-toggle::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(255, 255, 255, 0.1); - border-radius: 10px; - transform: scale(0); - transition: transform 0.3s var(--transition-smooth); -} - -.navbar-toggle:hover::before { - transform: scale(1); -} - -.navbar-toggle:hover { - color: var(--secondary-color); -} - -.navbar-toggle span { - display: block; - width: 24px; - height: 2.5px; - background: currentColor; - border-radius: 2px; - transition: all 0.3s var(--transition-smooth); - position: relative; -} - -.navbar-toggle span:not(:last-child) { - margin-bottom: 5px; -} - -.navbar-toggle.active span:nth-child(1) { - transform: rotate(45deg) translateY(7.5px); - background: #00f3ff; -} - -.navbar-toggle.active span:nth-child(2) { - opacity: 0; - transform: translateX(20px); -} - -.navbar-toggle.active span:nth-child(3) { - transform: rotate(-45deg) translateY(-7.5px); - background: #b026ff; -} - -/* Mobile Menu Dropdown */ -.mobile-menu { - position: fixed; - top: 64px; - left: 0; - right: 0; - width: 100%; - background: rgba(10, 10, 15, 0.98); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - border-bottom: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); - padding: 0.5rem 0; - animation: slideDown 0.3s ease-out; - z-index: 999; - max-height: calc(100vh - 64px); - overflow-y: auto; -} - -@keyframes slideDown { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.mobile-menu-list { - list-style: none; - padding: 0; - margin: 0; -} - -.mobile-menu-item { - border-bottom: 1px solid rgba(255, 255, 255, 0.05); -} - -.mobile-menu-link { - display: block; - padding: 1rem 1.5rem; - color: rgba(255, 255, 255, 0.8); - text-decoration: none; - font-weight: 500; - font-size: 0.95rem; - transition: all 0.3s ease; - cursor: pointer; - position: relative; - border-radius: 10px; - overflow: hidden; -} - -.mobile-menu-link::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(135deg, - rgba(176, 38, 255, 0.1) 0%, - rgba(0, 243, 255, 0.05) 100%); - border-radius: 10px; - transform: scaleX(0); - transform-origin: right; - transition: transform 0.4s ease; - z-index: -1; -} - -.mobile-menu-link::after { - content: ''; - position: absolute; - bottom: 2px; - left: 50%; - transform: translateX(-50%); - width: 0; - height: 2px; - background: linear-gradient(90deg, #00f3ff, #b026ff); - border-radius: 2px; - transition: all 0.4s ease; - opacity: 0; - box-shadow: 0 0 8px rgba(0, 243, 255, 0.6); -} - -.mobile-menu-link:hover, -.mobile-menu-link.active { - color: #ffffff; - transform: translateY(-2px) scale(1.02); - text-shadow: 0 0 10px rgba(0, 243, 255, 0.5), - 0 0 20px rgba(176, 38, 255, 0.3); -} - -.mobile-menu-link:hover::before, -.mobile-menu-link.active::before { - transform: scaleX(1); - transform-origin: left; -} - -.mobile-menu-link:hover::after, -.mobile-menu-link.active::after { - width: 80%; - opacity: 1; - animation: glowPulse 1.5s ease infinite; -} - -.mobile-menu-item:hover .mobile-menu-link { - color: #ffffff; - transform: translateY(-2px) scale(1.02); - text-shadow: 0 0 10px rgba(0, 243, 255, 0.5), - 0 0 20px rgba(176, 38, 255, 0.3); -} - -.mobile-menu-item:hover .mobile-menu-link::before { - transform: scaleX(1); - transform-origin: left; -} - -.mobile-menu-item:hover .mobile-menu-link::after { - width: 80%; - opacity: 1; - animation: glowPulse 1.5s ease infinite; -} - -.mobile-menu-link:focus-visible, -.mobile-menu-link:active { - color: #ffffff; - transform: translateY(-2px) scale(1.02); - text-shadow: 0 0 10px rgba(0, 243, 255, 0.5), - 0 0 20px rgba(176, 38, 255, 0.3); -} - -.mobile-menu-link:focus-visible::before, -.mobile-menu-link:active::before { - transform: scaleX(1); - transform-origin: left; -} - -.mobile-menu-link:focus-visible::after, -.mobile-menu-link:active::after { - width: 80%; - opacity: 1; - animation: glowPulse 1.5s ease infinite; -} - -.mobile-dropdown-menu { - list-style: none; - padding: 0; - margin: 0; - background: rgba(0, 0, 0, 0.3); -} - -.mobile-dropdown-link { - display: block; - padding: 0.75rem 1.5rem 0.75rem 2.5rem; - color: rgba(255, 255, 255, 0.7); - text-decoration: none; - font-size: 0.9rem; - transition: all 0.3s ease; - position: relative; - border-radius: 8px; - overflow: hidden; -} - -.mobile-dropdown-link::before { - content: ''; - position: absolute; - left: 0; - top: 0; - width: 3px; - height: 100%; - background: linear-gradient(180deg, #b026ff, #00f3ff); - transform: scaleY(0); - transition: transform 0.3s ease; - border-radius: 0 3px 3px 0; -} - -.mobile-dropdown-link:hover { - background: linear-gradient( - 135deg, - rgba(176, 38, 255, 0.15), - rgba(0, 243, 255, 0.1) - ); - color: #ffffff; - transform: translateX(5px); - box-shadow: 0 4px 12px rgba(0, 243, 255, 0.1); -} - -.mobile-dropdown-link:hover::before { - transform: scaleY(1); -} - -.mobile-dropdown-menu li:hover .mobile-dropdown-link { - background: linear-gradient( - 135deg, - rgba(176, 38, 255, 0.15), - rgba(0, 243, 255, 0.1) - ); - color: #ffffff; - transform: translateX(5px); - box-shadow: 0 4px 12px rgba(0, 243, 255, 0.1); -} - -.mobile-dropdown-menu li:hover .mobile-dropdown-link::before { - transform: scaleY(1); -} - -.mobile-dropdown-link:focus-visible, -.mobile-dropdown-link:active { - background: linear-gradient( - 135deg, - rgba(176, 38, 255, 0.15), - rgba(0, 243, 255, 0.1) - ); +:root:not(.dark) .theme-toggle-btn:hover { + background: #0f172a; color: #ffffff; - transform: translateX(5px); - box-shadow: 0 4px 12px rgba(0, 243, 255, 0.1); -} - -.mobile-dropdown-link:focus-visible::before, -.mobile-dropdown-link:active::before { - transform: scaleY(1); -} - -.mobile-controls { - padding: 1rem 2rem; - border-top: 1px solid rgba(255, 255, 255, 0.05); -} - -.mobile-control-item { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.75rem 0; - color: rgba(255, 255, 255, 0.7); - cursor: pointer; -} - -.toggle-track { - width: 50px; - height: 26px; - background: rgba(255, 255, 255, 0.1); - border-radius: 13px; - position: relative; - transition: all 0.3s ease; - border: 1px solid rgba(255, 255, 255, 0.2); -} - -.toggle-track.dark { - background: linear-gradient(135deg, #00f3ff 0%, #b026ff 100%); -} - -.toggle-thumb { - position: absolute; - top: 2px; - left: 2px; - width: 20px; - height: 20px; - background: white; - border-radius: 50%; - transition: all 0.3s ease; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); -} - -.toggle-track.dark .toggle-thumb { - transform: translateX(24px); -} - -.mobile-auth { - padding: 1rem 1.5rem; - border-top: 1px solid rgba(255, 255, 255, 0.05); - display: flex; - gap: 0.75rem; - flex-direction: column; -} - -.mobile-auth .navbar-btn { - width: 100%; - text-align: center; - padding: 0.875rem 1rem; - font-size: 0.95rem; - font-weight: 600; -} - -.mobile-auth .navbar-btn-login { - border: 2px solid rgba(0, 243, 255, 0.5); - background: transparent; - color: #00f3ff; -} - -.mobile-auth .navbar-btn-login:hover { - background: rgba(0, 243, 255, 0.1); - border-color: #00f3ff; -} - -.mobile-auth .navbar-btn-signup { - background: linear-gradient(135deg, #00f3ff 0%, #b026ff 100%); - color: white; - border: none; -} - -.mobile-auth .navbar-btn-signup:hover { - transform: translateY(-2px); - box-shadow: 0 5px 20px rgba(0, 243, 255, 0.4); -} - -.mobile-change-password { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.75rem 1rem; - margin-bottom: 0.75rem; - color: rgba(255, 255, 255, 0.7); - text-decoration: none; - border-radius: 8px; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); - transition: all 0.3s ease; -} - -.mobile-change-password:hover { - background: rgba(255, 255, 255, 0.1); - color: #ffffff; -} - -.mobile-auth-buttons { - display: flex; - flex-direction: row; - gap: 0.75rem; -} - -.mobile-auth-buttons .login-btn, -.mobile-auth-buttons .signup-btn { - padding: 0.75rem 1.5rem; - border-radius: 8px; - font-weight: 600; - font-size: 0.95rem; - border: none; - cursor: pointer; - transition: all 0.3s ease; - text-align: center; - text-decoration: none; - display: block; - flex: 1; -} - -.mobile-auth-buttons .login-btn { - background: transparent; - border: 2px solid rgba(255, 255, 255, 0.25); - color: #ffffff; -} - -.mobile-auth-buttons .login-btn:hover { - background: rgba(255, 255, 255, 0.1); - border-color: rgba(255, 255, 255, 0.6); -} - -.mobile-auth-buttons .signup-btn { - background: linear-gradient(135deg, #00f3ff 0%, #b026ff 100%); - color: #000000; -} - -.mobile-auth-buttons .signup-btn:hover { - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(0, 243, 255, 0.5); -} - -.full-width { - width: 100%; -} - -/* Visibility Classes */ -.desktop-only { - display: none; -} - -.mobile-only { - display: flex; -} - -/* =================================== - RESPONSIVE BREAKPOINTS - =================================== */ - -/* Desktop Only */ -.desktop-only { - display: none; -} - -@media (min-width: 1024px) { - /* Show desktop elements, hide mobile elements on desktop only */ - .desktop-only { - display: flex; - } - - .mobile-only { - display: none; - } - - .mobile-menu { - display: none !important; - } - - .navbar-menu { - display: flex; - } -} - -/* Mobile Only */ -@media (max-width: 767px) { - .navbar { - padding: 0.75rem 4%; - } - - .navbar.scrolled { - padding: 0.65rem 4%; - } - - .navbar-content { - gap: 1rem; - grid-template-columns: auto 1fr; - } - - .mobile-only { - display: flex; - } - - .desktop-only { - display: none !important; - } - - .navbar-toggle { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - } - - .navbar-menu { - display: none; - } - - .desktop-auth { - display: flex !important; - } - - .navbar-btn-login, - .navbar-btn-signup { - display: none; - } - - .navbar-logo { - font-size: 1.25rem; - } - - .navbar-logo-icon { - width: 40px; - height: 40px; - } - - .navbar-actions { - gap: 0.875rem; - justify-content: flex-end; - } - - .profile-icon-btn { - width: 48px; - height: 48px; - font-size: 1.3rem; - } - - .profile-dropdown { - min-width: 260px; - right: -10px; - } - - .profile-dropdown-header { - padding: 14px 16px; - } - - .profile-email { - font-size: 0.85rem; - } - - .profile-dropdown-item { - padding: 10px 14px; - font-size: 0.9rem; - } -} - -/* Tablet */ -@media (min-width: 768px) and (max-width: 1023px) { - .navbar { - padding: 0.75rem 2%; - } - - .navbar.scrolled { - padding: 0.6rem 2%; - } - - .navbar-content { - gap: 1rem; - grid-template-columns: auto 1fr; - } - - .navbar-toggle { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - } - - .navbar-menu { - display: none; - } - - .desktop-auth { - display: flex !important; - } - - .navbar-btn-login, - .navbar-btn-signup { - display: none; - } - - .navbar-logo { - font-size: 1.2rem; - } - - .navbar-logo-icon { - width: 40px; - height: 40px; - } - - .navbar-actions { - gap: 1rem; - justify-content: flex-end; - } - - .profile-icon-btn { - width: 50px; - height: 50px; - font-size: 1.35rem; - } - - .profile-dropdown { - min-width: 270px; - } - - .profile-dropdown-header { - padding: 16px 18px; - } - - .profile-email { - font-size: 0.875rem; - } - - .profile-dropdown-item { - padding: 11px 15px; - font-size: 0.925rem; - } -} - -/* Desktop */ -@media (min-width: 1024px) and (max-width: 1279px) { - .navbar { - padding: 0.875rem 3%; - } - - .navbar.scrolled { - padding: 0.65rem 3%; - } - - .navbar-toggle { - display: none; - } - - .navbar-menu { - display: flex !important; - gap: 0.5rem; - } - - .navbar-content { - padding: 0; - grid-template-columns: auto 1fr auto; - gap: 1.5rem; - } - - .navbar-link { - padding: 0.5rem 0.75rem; - font-size: 0.9rem; - } - - .navbar-logo { - font-size: 1.35rem; - } - - .navbar-logo-icon { - width: 42px; - height: 42px; - } - - .navbar-actions { - gap: 1rem; - } - - .navbar-btn { - padding: 0.6rem 1.1rem; - font-size: 0.85rem; - } - - .navbar-btn-login { - padding: 0.6rem 1.3rem; - } - - .navbar-btn-signup { - padding: 0.6rem 1.5rem; - } - - .profile-icon-btn { - width: 50px; - height: 50px; - font-size: 1.35rem; - } - - .profile-dropdown { - min-width: 275px; - } -} - -/* Large Desktop */ -@media (min-width: 1280px) { - .navbar { - padding: 0.875rem 3%; - } - - .navbar.scrolled { - padding: 0.65rem 3%; - } - - .navbar-content { - padding: 0; - max-width: 1400px; - gap: 2rem; - } - - .navbar-link { - padding: 0.5rem 1rem; - font-size: 1rem; - } - - .navbar-logo { - font-size: 1.5rem; - } - - .navbar-logo-icon { - width: 44px; - height: 44px; - } - - .navbar-actions { - gap: 1.5rem; - } - - .navbar-btn { - padding: 0.75rem 1.5rem; - font-size: 0.95rem; - } - - .navbar-btn-login { - padding: 0.75rem 1.75rem; - } - - .navbar-btn-signup { - padding: 0.75rem 2rem; - } - - .profile-icon-btn { - width: 52px; - height: 52px; - font-size: 1.4rem; - } -} - -/* Accessibility */ -@media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} - -/* Touch devices */ -@media (hover: none) and (pointer: coarse) { - .navbar-link, - .navbar-btn, - .icon-btn, - .mobile-nav-link, - .login-btn, - .signup-btn { - min-height: 44px; - min-width: 44px; - } -} -/* Dropdown */ -.dropdown-trigger { - cursor: pointer; - position: relative; - display: flex; - align-items: center; - gap: 0.5rem; -} - -.dropdown-trigger::after { - content: "▼"; - font-size: 0.65rem; - transition: transform 0.3s var(--transition-smooth); - color: rgba(255, 255, 255, 0.6); -} - -.navbar-item:hover .dropdown-trigger::after { - color: var(--secondary-color); -} - -.navbar-item:hover .dropdown-trigger { - color: #ffffff; - background: linear-gradient( - 135deg, - rgba(176, 38, 255, 0.1) 0%, - rgba(0, 243, 255, 0.05) 100% - ); -} - -.dropdown-menu { - position: absolute; - top: calc(100% + 0.5rem); - left: 50%; - transform: translateX(-50%) translateY(-10px); - background: rgba(10, 10, 15, 0.98); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.15); - border-radius: 12px; - min-width: 200px; - padding: 0.5rem; - z-index: 1000; - opacity: 0; - visibility: hidden; - pointer-events: none; - transition: - opacity 0.3s var(--transition-smooth), - transform 0.3s var(--transition-smooth), - visibility 0.3s; - box-shadow: - 0 10px 40px rgba(0, 0, 0, 0.5), - 0 0 20px rgba(176, 38, 255, 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.navbar-item:hover .dropdown-menu { - opacity: 1; - visibility: visible; - pointer-events: auto; - transform: translateX(-50%) translateY(0); -} - -.dropdown-menu.show { - opacity: 1; - visibility: visible; - pointer-events: auto; - transform: translateX(-50%) translateY(0); -} - -.dropdown-menu::before { - content: ""; - position: absolute; - top: -6px; - left: 50%; - transform: translateX(-50%); - width: 0; - height: 0; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-bottom: 6px solid rgba(255, 255, 255, 0.15); -} - -.dropdown-menu li { - list-style: none; - margin: 0.25rem 0; -} - -.dropdown-menu li:first-child { - margin-top: 0; -} - -.dropdown-menu li:last-child { - margin-bottom: 0; -} - -.dropdown-link { - display: block; - padding: 0.75rem 1rem; - border-radius: 8px; - color: rgba(255, 255, 255, 0.75); - text-decoration: none; - font-weight: 500; - font-size: 0.9rem; - transition: all 0.3s var(--transition-smooth); - position: relative; - overflow: hidden; -} - -.dropdown-link::before { - content: ""; - position: absolute; - left: 0; - top: 0; - width: 3px; - height: 100%; - background: linear-gradient( - 180deg, - var(--secondary-color), - var(--primary-color) - ); - transform: scaleY(0); - transition: transform 0.3s var(--transition-smooth); - border-radius: 0 3px 3px 0; -} - -.dropdown-link:hover { - background: linear-gradient( - 135deg, - rgba(176, 38, 255, 0.15), - rgba(0, 243, 255, 0.1) - ); - color: #ffffff; - padding-left: 1.25rem; - transform: translateX(5px); - box-shadow: 0 4px 12px rgba(0, 243, 255, 0.1); -} - -.dropdown-menu li:hover .dropdown-link { - background: linear-gradient( - 135deg, - rgba(176, 38, 255, 0.15), - rgba(0, 243, 255, 0.1) - ); - color: #ffffff; - padding-left: 1.25rem; - transform: translateX(5px); - box-shadow: 0 4px 12px rgba(0, 243, 255, 0.1); -} - -.dropdown-link:focus-visible, -.dropdown-link:active { - background: linear-gradient( - 135deg, - rgba(176, 38, 255, 0.15), - rgba(0, 243, 255, 0.1) - ); - color: #ffffff; - padding-left: 1.25rem; - transform: translateX(5px); - box-shadow: 0 4px 12px rgba(0, 243, 255, 0.1); -} - -.dropdown-link:hover::before { - transform: scaleY(1); -} - -.dropdown-menu li:hover .dropdown-link::before { - transform: scaleY(1); -} - -.dropdown-link:focus-visible::before, -.dropdown-link:active::before { - transform: scaleY(1); -} - -.dropdown-link:focus { - outline: 2px solid var(--secondary-color); - outline-offset: 2px; - background: linear-gradient( - 135deg, - rgba(176, 38, 255, 0.15), - rgba(0, 243, 255, 0.1) - ); - color: #ffffff; -} - -/* Mobile Dropdown Styles */ -@media (max-width: 767px) { - .dropdown-trigger { - width: 100%; - justify-content: space-between; - padding: 1rem 2rem; - color: rgba(255, 255, 255, 0.7); - } - - .dropdown-trigger::after { - content: "▼"; - font-size: 0.7rem; - margin-left: auto; - transition: transform 0.3s var(--transition-smooth); - } - - .navbar-item:has(.dropdown-menu.show) .dropdown-trigger, - .dropdown-trigger:active { - color: #ffffff; - background: rgba(255, 255, 255, 0.05); - } - - .navbar-item:has(.dropdown-menu.show) .dropdown-trigger::after { - transform: rotate(180deg); - color: var(--secondary-color); - } - - .dropdown-menu { - position: static; - transform: none; - opacity: 0; - max-height: 0; - overflow: hidden; - margin-top: 0.5rem; - margin-left: 1rem; - padding: 0; - border: none; - border-left: 2px solid rgba(0, 243, 255, 0.3); - background: transparent; - box-shadow: none; - transition: all 0.3s var(--transition-smooth); - } - - .dropdown-menu.show { - opacity: 1; - max-height: 300px; - padding: 0.5rem 0; - } - - .dropdown-menu::before { - display: none; - } - - .dropdown-link { - padding: 0.6rem 1rem; - font-size: 0.85rem; - } - - .dropdown-link:hover { - padding-left: 1.5rem; - } + border-color: #0f172a; + box-shadow: 0 0 12px rgba(15, 23, 42, 0.35); } diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 0a4bb7d..341e07c 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,13 +1,12 @@ import React, { useState, useEffect, useCallback } from "react"; import { useAuth } from "../context/AuthContext"; -import { useTheme } from "../context/ThemeContext"; import { Link, useNavigate, useLocation } from "react-router-dom"; import { FiLock, FiUser, FiLogOut, FiMail } from "react-icons/fi"; +import ThemeToggle from "./ThemeToggle"; import "./Navbar.css"; function Navbar() { const { currentUser, logout, isEmailProvider } = useAuth(); - const { theme } = useTheme(); const navigate = useNavigate(); const location = useLocation(); @@ -15,79 +14,52 @@ function Navbar() { const [scrolled, setScrolled] = useState(false); const [openDropdown, setOpenDropdown] = useState(null); const [isProfileOpen, setIsProfileOpen] = useState(false); - const isDashboardPage = location.pathname === "/dashboard"; - /* -------------------- Handlers -------------------- */ - - const handleDropdownEnter = (label) => { - setOpenDropdown(label); - }; + /* Scroll Effect */ + useEffect(() => { + const handleScroll = () => setScrolled(window.scrollY > 20); + window.addEventListener("scroll", handleScroll); + return () => window.removeEventListener("scroll", handleScroll); + }, []); - const handleDropdownLeave = () => { - setOpenDropdown(null); + /* Close dropdown on outside click */ + useEffect(() => { + const handleClick = (e) => { + if (!e.target.closest(".dropdown-container")) { + setOpenDropdown(null); + } + if (!e.target.closest(".profile-menu-container")) { + setIsProfileOpen(false); + } }; - const handleDropdownClick = (label) => { - setOpenDropdown(openDropdown === label ? null : label); - }; + document.addEventListener("click", handleClick); + return () => document.removeEventListener("click", handleClick); + }, []); - const toggleMobileMenu = () => { + const toggleMobileMenu = () => setIsMobileMenuOpen((prev) => !prev); - }; const closeMobileMenu = () => { setIsMobileMenuOpen(false); setOpenDropdown(null); }; + const handleDropdownClick = (label) => { + setOpenDropdown(openDropdown === label ? null : label); + }; + const handleLogout = useCallback(async () => { try { await logout(); navigate("/"); - closeMobileMenu(); - } catch (error) { - console.error("Logout failed:", error); + } catch (err) { + console.error(err); } }, [logout, navigate]); - /* -------------------- Effects -------------------- */ - - useEffect(() => { - const onScroll = () => setScrolled(window.scrollY > 20); - window.addEventListener("scroll", onScroll); - return () => window.removeEventListener("scroll", onScroll); - }, []); - - useEffect(() => { - const handleClickOutside = (e) => { - if (openDropdown && !e.target.closest(".dropdown-container")) { - setOpenDropdown(null); - } - if (isProfileOpen && !event.target.closest('.profile-menu-container')) { - setIsProfileOpen(false); - } - }; - - const handleEscapeKey = (event) => { - if (event.key === 'Escape') { - if (openDropdown) setOpenDropdown(null); - if (isProfileOpen) setIsProfileOpen(false); - } - }; - - document.addEventListener("click", handleClickOutside); - document.addEventListener("keydown", handleEscape); - - return () => { - document.removeEventListener("click", handleClickOutside); - document.removeEventListener("keydown", handleEscape); - }; - }, [openDropdown, isProfileOpen]); - - /* -------------------- Nav Links -------------------- */ - const navLinks = [ { to: "/", label: "Home" }, { to: "/pricing", label: "Pricing" }, @@ -103,214 +75,44 @@ function Navbar() { }, ]; - const authenticatedNavLinks = [ - ...navLinks, - { to: "/dashboard", label: "Dashboard" }, - { to: "/leaderboard", label: "Leaderboard" }, - ]; - - const linksToRender = currentUser ? authenticatedNavLinks : navLinks; - - /* -------------------- JSX -------------------- */ + const linksToRender = currentUser + ? [...navLinks, { to: "/dashboard", label: "Dashboard" }] + : navLinks; return ( - ); } diff --git a/src/components/Pricing.css b/src/components/Pricing.css index f82047f..c65272b 100644 --- a/src/components/Pricing.css +++ b/src/components/Pricing.css @@ -1,7 +1,38 @@ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); +/* Pricing Page Theme Variables */ +:root { + --pricing-bg: var(--bg-deep); + --pricing-card-bg: var(--glass-panel-bg); + --pricing-card-inner-bg: var(--dashboard-bg-elevated); + --pricing-card-border: var(--border-color); + --pricing-table-bg: var(--glass-panel-bg); + --pricing-table-header-bg: var(--dashboard-bg-secondary); + --pricing-table-border: var(--border-color); + --pricing-text-primary: #1e293b; + --pricing-text-secondary: #475569; + --pricing-text-muted: #94a3b8; + --gradient-primary: linear-gradient(135deg, #7c3aed 0%, #db2777 100%); +} + +:root[class~="dark"] { + --pricing-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(7, 14, 30, 1) 100%); + --pricing-card-bg: rgba(255, 255, 255, 0.12); + --pricing-card-inner-bg: rgba(255, 255, 255, 0.08); + --pricing-card-border: rgba(255, 255, 255, 0.15); + --pricing-table-bg: rgba(17, 24, 39, 0.95); + --pricing-table-header-bg: rgba(15, 23, 42, 0.98); + --pricing-table-border: rgba(71, 85, 105, 0.3); + --pricing-text-primary: #e2e8f0; + --pricing-text-secondary: #94a3b8; + --pricing-text-muted: #64748b; + --gradient-primary: linear-gradient(135deg, #9333ea 0%, #db2777 100%); +} + /* Base Reset */ -*, *::before, *::after { +*, +*::before, +*::after { box-sizing: border-box; } @@ -9,18 +40,20 @@ body { font-family: 'Inter', sans-serif; line-height: 1.6; } -section.py-20.px-8 { - max-width: 1200px; +section.py-20.px-8 { + max-width: 1200px; } + section.py-20.px-6 { - max-width: 1200px;} + max-width: 1200px; +} /* Glass Panels */ .glass-panel { - background: rgba(255, 255, 255, 0.12); + background: var(--pricing-card-bg); backdrop-filter: blur(24px); - border: 1px solid rgba(255, 255, 255, 0.15); + border: 1px solid var(--pricing-card-border); border-radius: 1.5rem; position: relative; overflow: visible !important; @@ -33,14 +66,14 @@ section.py-20.px-6 { margin-top: 2.75rem !important; } -.glass-panel.rounded-3xl.p-1 > div { - background: rgba(255, 255, 255, 0.08); +.glass-panel.rounded-3xl.p-1>div { + background: var(--pricing-card-inner-bg); border-radius: 1.5rem !important; padding: 3rem 2rem 2.5rem !important; min-height: 32rem !important; display: flex !important; flex-direction: column !important; - border: 1px solid rgba(255, 255, 255, 0.1); + border: 1px solid var(--pricing-card-border); } /* PERFECT Most Popular Badge */ @@ -55,31 +88,29 @@ section.py-20.px-6 { font-size: 0.875rem !important; font-weight: 900 !important; border-radius: 50rem !important; - box-shadow: 0 16px 40px rgba(251, 191, 36, 0.5); + box-shadow: 0 16px 40px rgba(251, 191, 36, 0.3); white-space: nowrap; } -.py-24.px-6.bg-gradient-to-b { - background: linear-gradient(180deg, - rgba(15, 23, 42, 0.98) 0%, - rgba(7, 14, 30, 1) 100%) !important; +.pricing-section { + background: var(--pricing-bg) !important; padding: 6rem 1.5rem !important; position: relative; } -.py-24.px-6.bg-gradient-to-b::before { +.pricing-section::before { content: ''; position: absolute; inset: 0; - background: - radial-gradient(ellipse 30% 30% at 25% 75%, rgba(139, 92, 246, 0.2) 0%, transparent 50%), - radial-gradient(ellipse 25% 25% at 75% 25%, rgba(236, 72, 153, 0.2) 0%, transparent 50%); + background: + radial-gradient(ellipse 30% 30% at 25% 75%, rgba(139, 92, 246, 0.1) 0%, transparent 50%), + radial-gradient(ellipse 25% 25% at 75% 25%, rgba(236, 72, 153, 0.1) 0%, transparent 50%); z-index: 0; } /* FIXED: Table Container */ -.overflow-x-auto > div { +.overflow-x-auto>div { position: relative; z-index: 10; } @@ -87,21 +118,19 @@ section.py-20.px-6 { .max-w-7xl table { width: 100% !important; min-width: 0; - background: rgba(17, 24, 39, 0.95) !important; + background: var(--pricing-table-bg) !important; backdrop-filter: blur(40px) !important; - border: 1px solid rgba(71, 85, 105, 0.3) !important; + border: 1px solid var(--pricing-table-border) !important; border-radius: 1.75rem !important; - box-shadow: - 0 35px 80px rgba(0, 0, 0, 0.6), - inset 0 1px 0 rgba(255, 255, 255, 0.05); + box-shadow: var(--dashboard-shadow-lg); overflow: hidden !important; table-layout: fixed !important; } /* Table Headers */ table thead tr th { - background: rgba(15, 23, 42, 0.98) !important; - border-bottom: 1px solid rgba(71, 85, 105, 0.3) !important; + background: var(--pricing-table-header-bg) !important; + border-bottom: 1px solid var(--pricing-table-border) !important; position: relative; } @@ -111,7 +140,7 @@ table thead th:first-child { width: 25% !important; font-size: 1.25rem !important; font-weight: 800 !important; - color: #e2e8f0 !important; + color: var(--pricing-text-primary) !important; } table thead th:not(:first-child) { @@ -133,14 +162,13 @@ table thead th .text-2xl { background-clip: text !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; - text-fill-color: transparent !important; margin-bottom: 0.5rem; display: block !important; } table thead th .text-sm { font-size: 0.8125rem !important; - color: #94a3b8 !important; + color: var(--pricing-text-muted) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; @@ -163,7 +191,7 @@ table th .absolute.-top-4 { /* Table Body */ table tbody tr { transition: all 0.3s ease; - border-bottom: 1px solid rgba(71, 85, 105, 0.15); + border-bottom: 1px solid var(--pricing-table-border); } table tbody tr:hover { @@ -173,21 +201,22 @@ table tbody tr:hover { table tbody td { padding: 1.75rem 1.5rem !important; vertical-align: middle !important; - border-right: 1px solid rgba(71, 85, 105, 0.1); - color: #cbd5e1 !important; + border-right: 1px solid var(--pricing-table-border); + color: var(--pricing-text-secondary) !important; } table tbody td:first-child { font-weight: 700 !important; font-size: 1.125rem !important; - background: rgba(15, 23, 42, 0.7) !important; + background: var(--pricing-table-header-bg) !important; width: 25% !important; + color: var(--pricing-text-primary) !important; } table tbody td:not(:first-child) { text-align: center !important; padding: 1.75rem 1rem !important; - border-right: 1px solid rgba(71, 85, 105, 0.1); + border-right: 1px solid var(--pricing-table-border); } table tbody td:last-child { @@ -210,7 +239,8 @@ table tbody td:last-child { .w-full.py-6.px-8.rounded-2xl { - height: 4.5rem !important; /* FIXED: Fixed height */ + height: 4.5rem !important; + /* FIXED: Fixed height */ min-height: 4.5rem !important; display: flex !important; align-items: center !important; @@ -225,38 +255,30 @@ table tbody td:last-child { letter-spacing: 0.08em !important; border: none !important; cursor: pointer !important; - margin-top: auto !important; /* FIXED: Push to bottom */ -} - -/* Trader Button (Highlighted) */ -.bg-gradient-to-r.from-purple-600.to-pink-600 { - background: linear-gradient(135deg, #9333ea 0%, #ec4899 50%, #3b82f6 100%) !important; - box-shadow: - 0 16px 40px rgba(147, 51, 234, 0.5), - 0 8px 24px rgba(0, 0, 0, 0.3) !important; - color: #fff !important; + margin-top: auto !important; + /* FIXED: Push to bottom */ } -.bg-gradient-to-r.from-purple-600.to-pink-600:hover { - transform: translateY(-3px) !important; - box-shadow: - 0 24px 60px rgba(147, 51, 234, 0.6), - 0 12px 32px rgba(0, 0, 0, 0.4) !important; +/* Global CTA Button Look - All Purple/Pink Gradient */ +.w-full.py-6.px-8.rounded-2xl { + background: var(--gradient-primary) !important; + color: #ffffff !important; + box-shadow: 0 16px 40px rgba(124, 58, 237, 0.3) !important; + border: none !important; + position: relative !important; + z-index: 30 !important; } -/* Explorer/Pro Buttons */ -.bg-white\/80, .dark\:bg-gray-800\/80 { - background: rgba(255, 255, 255, 0.95) !important; - color: #1e293b !important; - border: 2px solid rgba(255, 255, 255, 0.4) !important; - font-weight: 800 !important; - backdrop-filter: blur(20px) !important; +.w-full.py-6.px-8.rounded-2xl:hover { + transform: translateY(-4px) scale(1.05) !important; + box-shadow: + 0 24px 60px rgba(147, 51, 234, 0.5), + 0 12px 32px rgba(0, 0, 0, 0.3) !important; } -.dark .bg-white\/80 { - background: rgba(30, 41, 59, 0.95) !important; - color: #f1f5f9 !important; - border-color: rgba(71, 85, 105, 0.4) !important; +/* Specific highlight logic (optional differentiator) */ +.glass-panel.ring-4 .w-full.py-6.px-8.rounded-2xl { + box-shadow: 0 20px 50px rgba(147, 51, 234, 0.5) !important; } /* Button Inner Content */ @@ -278,11 +300,11 @@ table tbody td:last-child { .overflow-x-auto { scrollbar-width: thin; } - + table { min-width: 650px !important; } - + .w-full.py-6.px-8.rounded-2xl { height: 3.75rem !important; font-size: 1rem !important; @@ -297,4 +319,4 @@ table tbody td:last-child { .dark table thead th:first-child, .dark table tbody td:first-child { color: #e2e8f0 !important; -} +} \ No newline at end of file diff --git a/src/components/Pricing.jsx b/src/components/Pricing.jsx index 33fc65e..b20606f 100644 --- a/src/components/Pricing.jsx +++ b/src/components/Pricing.jsx @@ -94,7 +94,7 @@ export default function Pricing() { }; return ( -
+
{/* FIXED: Progress Bar */}
- + Monthly @@ -166,13 +166,13 @@ export default function Pricing() { > @@ -205,7 +205,7 @@ export default function Pricing() { {/* Pricing Cards */} setHoveredPlan(null)} > {/* Card Background */} -
+
{/* Popular Badge */} {plan.highlight && ( @@ -283,10 +283,7 @@ export default function Pricing() { {/* CTA Button */} handlePlanClick(plan.name)} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.98 }} @@ -301,15 +298,16 @@ export default function Pricing() { ); })}
- + {/* FIXED: Working Comparison Table */} -
@@ -322,7 +320,7 @@ export default function Pricing() {
- +
@@ -375,11 +373,11 @@ export default function Pricing() {
Feature
- + {/* FIXED: Working FAQ Section */} -
- + {/* FIXED: Payment Modal */} - + < dialog id="payment-modal" className="backdrop:bg-black/80 p-8 w-full max-w-md mx-auto" >
- + -
+
); } \ No newline at end of file diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx new file mode 100644 index 0000000..9d8ca98 --- /dev/null +++ b/src/components/ThemeToggle.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { useTheme } from '../context/ThemeContext'; +import { FiSun, FiMoon } from 'react-icons/fi'; + +const ThemeToggle = () => { + const { theme, toggleTheme } = useTheme(); + + return ( + + ); +}; + +export default ThemeToggle; diff --git a/src/components/contributors.css b/src/components/contributors.css index a8ec0a8..3573e02 100644 --- a/src/components/contributors.css +++ b/src/components/contributors.css @@ -1,104 +1,135 @@ -:root { +/* Contributors Variables - Default to Light Mode (Airy/White) */ +.contributors-page { --primary-50: #f3e8ff; --primary-100: #e9d5ff; --primary-200: #d6b4fc; --primary-300: #c084fc; --primary-400: #a855f7; - --primary-500: #9333ea; + --primary-500: #9333ea; --primary-600: #7e22ce; --primary-700: #6b21a8; --primary-800: #581c87; - --primary-900: #3b0764; - + --primary-900: #3b0764; + --secondary-400: #60a5fa; - --secondary-500: #3b82f6; + --secondary-500: #3b82f6; --secondary-600: #2563eb; --secondary-700: #1d4ed8; - + --accent-cyan: #06b6d4; --accent-teal: #14b8a6; - + --gold-400: #facc15; - --gold-500: #eab308; + --gold-500: #eab308; --gold-600: #ca8a04; --silver-300: #d1d5db; --silver-400: #9ca3af; --bronze-400: #f59e0b; --bronze-500: #d97706; - - --bg-body: #0a0315; - --bg-surface: #120537; + + /* Default Light Mode */ + --bg-body-inner: #f8fafc; + --bg-surface: #ffffff; + --bg-card: #ffffff; + --bg-card-hover: #f1f5f9; + --bg-glass: rgba(147, 51, 234, 0.04); + --bg-glass-hover: rgba(147, 51, 234, 0.08); + + --text-primary-inner: var(--text-main); + --text-secondary-inner: var(--text-muted); + --text-muted-inner: #64748b; + --text-accent: var(--gold-600); + + --border-base: rgba(0, 0, 0, 0.08); + --border-hover: rgba(147, 51, 234, 0.2); + --border-active: rgba(147, 51, 234, 0.3); + + --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 50%, var(--primary-900) 100%); + --gradient-secondary: linear-gradient(135deg, var(--secondary-500) 0%, var(--accent-cyan) 50%, var(--secondary-700) 100%); + --gradient-gold: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%); + --gradient-silver: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%); + --gradient-bronze: linear-gradient(135deg, var(--bronze-400) 0%, #b45309 100%); + --gradient-glass: linear-gradient(135deg, rgba(147, 51, 234, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%); + + --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05); + --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.08); + --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12); + --shadow-purple-glow: 0 0 15px rgba(147, 51, 234, 0.12); + --shadow-blue-glow: 0 0 15px rgba(59, 130, 246, 0.12); + --shadow-gold-glow: 0 0 15px rgba(234, 179, 8, 0.15); + + --radius-sm: 12px; + --radius-md: 20px; + --radius-lg: 28px; + + --transition-fast: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + --transition-normal: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Dark Mode Overrides */ +.dark .contributors-page { + --bg-body-inner: #0a0315; + --bg-surface: #120537; --bg-card: rgba(18, 5, 55, 0.8); --bg-glass: rgba(255, 255, 255, 0.08); --bg-glass-hover: rgba(255, 255, 255, 0.12); - - --text-primary: #ffffff; - --text-secondary: #e5d8ff; - --text-muted: #a78bfa; + --bg-card-hover: linear-gradient(168deg, rgba(24, 8, 70, 0.98) 0%, rgba(14, 5, 35, 1) 100%); + + --text-primary-inner: #ffffff; + --text-secondary-inner: #e5d8ff; + --text-muted-inner: #a78bfa; --text-accent: var(--gold-500); - + --border-base: rgba(147, 51, 234, 0.2); --border-hover: rgba(59, 130, 246, 0.4); --border-active: rgba(147, 51, 234, 0.6); - - --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 50%, var(--primary-900) 100%); - --gradient-secondary: linear-gradient(135deg, var(--secondary-500) 0%, var(--accent-cyan) 50%, var(--secondary-700) 100%); - --gradient-gold: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 50%, #ca8a04 100%); - --gradient-silver: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 50%, #9ca3af 100%); - --gradient-bronze: linear-gradient(135deg, var(--bronze-400) 0%, var(--bronze-500) 50%, #b45309 100%); - --gradient-glass: linear-gradient(135deg, rgba(147,51,234,0.1) 0%, rgba(59,130,246,0.1) 50%, rgba(6,182,212,0.1) 100%); - + --shadow-sm: 0 4px 14px rgba(10, 3, 21, 0.4); --shadow-md: 0 12px 32px rgba(10, 3, 21, 0.6); --shadow-lg: 0 24px 64px rgba(10, 3, 21, 0.8); --shadow-purple-glow: 0 0 32px rgba(147, 51, 234, 0.4); --shadow-blue-glow: 0 0 32px rgba(59, 130, 246, 0.4); --shadow-gold-glow: 0 0 24px rgba(234, 179, 8, 0.6); - - --radius-sm: 12px; - --radius-md: 20px; - --radius-lg: 28px; - - --transition-fast: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); - --transition-normal: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); } -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; - background: var(--bg-body); - color: var(--text-primary); +.contributors-page { + background: var(--bg-body-inner); + color: var(--text-primary-inner); line-height: 1.6; - overflow-x: hidden; - position: relative; } -body::before { +/* Cosmic background overlay - only in dark mode */ +.dark .contributors-page::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; - background-image: - radial-gradient(circle at 20% 80%, rgba(147,51,234,0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 20%, rgba(59,130,246,0.1) 0%, transparent 50%), - radial-gradient(circle at 40% 40%, rgba(6,182,212,0.08) 0%, transparent 50%); + background-image: + radial-gradient(circle at 20% 80%, rgba(147, 51, 234, 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), + radial-gradient(circle at 40% 40%, rgba(6, 182, 212, 0.08) 0%, transparent 50%); pointer-events: none; z-index: -1; animation: bgShift 20s ease-in-out infinite; } @keyframes bgShift { - 0%, 100% { transform: scale(1) rotate(0deg); } - 33% { transform: scale(1.05) rotate(1deg); } - 66% { transform: scale(1.02) rotate(-1deg); } + + 0%, + 100% { + transform: scale(1) rotate(0deg); + } + + 33% { + transform: scale(1.05) rotate(1deg); + } + + 66% { + transform: scale(1.02) rotate(-1deg); + } } .contributors-page { @@ -115,6 +146,7 @@ body::before { opacity: 0; transform: translateY(40px) scale(0.95); } + to { opacity: 1; transform: translateY(0) scale(1); @@ -122,34 +154,62 @@ body::before { } @keyframes cosmicFloat { - 0%, 100% { transform: translateY(0px) rotate(0deg); } - 33% { transform: translateY(-12px) rotate(1deg); } - 66% { transform: translateY(-6px) rotate(-1deg); } + + 0%, + 100% { + transform: translateY(0px) rotate(0deg); + } + + 33% { + transform: translateY(-12px) rotate(1deg); + } + + 66% { + transform: translateY(-6px) rotate(-1deg); + } } @keyframes pulseNeon { - 0%, 100% { + + 0%, + 100% { box-shadow: var(--shadow-md); border-color: var(--border-base); } - 50% { + + 50% { box-shadow: var(--shadow-purple-glow), var(--shadow-lg); border-color: var(--border-active); } } @keyframes shimmerWave { - 0% { background-position: -200% 0; } - 100% { background-position: 200% 0; } + 0% { + background-position: -200% 0; + } + + 100% { + background-position: 200% 0; + } } @keyframes rotateGlow { - from { filter: hue-rotate(0deg) brightness(1); } - to { filter: hue-rotate(360deg) brightness(1.1); } + from { + filter: hue-rotate(0deg) brightness(1); + } + + to { + filter: hue-rotate(360deg) brightness(1.1); + } } -.fade-in-up { animation: fadeInUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } -.cosmic-float { animation: cosmicFloat 4s ease-in-out infinite; } +.fade-in-up { + animation: fadeInUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; +} + +.cosmic-float { + animation: cosmicFloat 4s ease-in-out infinite; +} .contributors-header { text-align: center; @@ -161,6 +221,10 @@ body::before { border-radius: var(--radius-lg); position: relative; overflow: hidden; + box-shadow: var(--shadow-md); +} + +.dark .contributors-header { box-shadow: var(--shadow-lg); } @@ -177,7 +241,10 @@ body::before { animation: shimmerWave 3s infinite; } -.contributors-header > * { position: relative; z-index: 2; } +.contributors-header>* { + position: relative; + z-index: 2; +} .contributors-title { font-size: clamp(3rem, 6vw, 5rem); @@ -188,10 +255,13 @@ body::before { background-clip: text; margin-bottom: 1.5rem; letter-spacing: -0.03em; - text-shadow: 0 8px 32px rgba(147, 51, 234, 0.4); position: relative; } +.dark .contributors-title { + text-shadow: 0 8px 32px rgba(147, 51, 234, 0.4); +} + .contributors-title::after { content: ''; position: absolute; @@ -206,7 +276,7 @@ body::before { .contributors-subtitle { font-size: 1.4rem; - color: var(--text-secondary); + color: var(--text-secondary-inner); max-width: 700px; margin: 0 auto 4rem; font-weight: 300; @@ -241,12 +311,11 @@ body::before { left: -150%; width: 150%; height: 100%; - background: linear-gradient(90deg, - transparent, - rgba(147,51,234,0.1), - rgba(59,130,246,0.1), - transparent - ); + background: linear-gradient(90deg, + transparent, + rgba(147, 51, 234, 0.1), + rgba(59, 130, 246, 0.1), + transparent); transition: left 0.8s; } @@ -264,7 +333,7 @@ body::before { .stat-label { display: block; font-size: 0.95rem; - color: var(--text-muted); + color: var(--text-muted-inner); font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; @@ -302,7 +371,7 @@ body::before { flex-wrap: wrap; margin-bottom: 4rem; padding: 2rem; - background: var(--bg-glass); + background: var(--bg-surface); backdrop-filter: blur(24px); border: 1px solid var(--border-base); border-radius: var(--radius-lg); @@ -404,8 +473,25 @@ body::before { contain: layout style; } +.project-admin-container { + background: var(--bg-card); + border: 1px solid var(--border-base); + border-radius: var(--radius-lg); + padding: 3.5rem 4rem; + max-width: 900px; + width: 100%; + position: relative; + overflow: hidden; + transition: var(--transition-slow); + box-shadow: var(--shadow-md); +} + +.dark .project-admin-container { + background: linear-gradient(168deg, rgba(234, 179, 8, 0.05) 0%, rgba(10, 3, 21, 0.98) 100%); +} + .contributor-card { - background: linear-gradient(168deg, rgba(18, 5, 55, 0.95) 0%, rgba(10, 3, 21, 0.98) 100%); + background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--radius-lg); padding: 2.5rem; @@ -459,26 +545,40 @@ body::before { } .contributor-card:hover { - transform: translateY(-10px) scale(1.02); + transform: translateY(-8px) scale(1.02); box-shadow: - 0 0 24px rgba(147, 51, 234, 0.25), - 0 20px 60px rgba(10, 3, 21, 0.7), - inset 0 1px 0 rgba(255, 255, 255, 0.06); + var(--shadow-purple-glow), + var(--shadow-lg), + inset 0 1px 0 rgba(255, 255, 255, 0.1); border-color: var(--border-hover); + background: var(--bg-card-hover); +} + +.dark .contributor-card:hover { background: linear-gradient(168deg, rgba(24, 8, 70, 0.98) 0%, rgba(14, 5, 35, 1) 100%); + box-shadow: + 0 0 24px rgba(147, 51, 234, 0.25), + 0 20px 60px rgba(10, 3, 21, 0.7); } /* ===== RANK-SPECIFIC CARD THEMES ===== */ .contributor-card.contributor-rank-gold { border-color: rgba(234, 179, 8, 0.2); + background: var(--bg-card); +} + +.dark .contributor-card.contributor-rank-gold { background: linear-gradient(168deg, rgba(30, 18, 5, 0.95) 0%, rgba(10, 3, 21, 0.98) 100%); } + .contributor-card.contributor-rank-gold::before { background: var(--gradient-gold); } + .contributor-card.contributor-rank-gold::after { background: radial-gradient(circle, rgba(234, 179, 8, 0.1) 0%, transparent 70%); } + .contributor-card.contributor-rank-gold:hover { border-color: rgba(234, 179, 8, 0.4); box-shadow: @@ -496,11 +596,17 @@ body::before { .contributor-card.contributor-rank-silver { border-color: rgba(209, 213, 219, 0.15); + background: var(--bg-card); +} + +.dark .contributor-card.contributor-rank-silver { background: linear-gradient(168deg, rgba(20, 15, 35, 0.95) 0%, rgba(10, 3, 21, 0.98) 100%); } + .contributor-card.contributor-rank-silver::before { background: var(--gradient-silver); } + .contributor-card.contributor-rank-silver:hover { border-color: rgba(209, 213, 219, 0.35); box-shadow: @@ -518,11 +624,17 @@ body::before { .contributor-card.contributor-rank-bronze { border-color: rgba(217, 119, 6, 0.2); + background: var(--bg-card); +} + +.dark .contributor-card.contributor-rank-bronze { background: linear-gradient(168deg, rgba(25, 12, 5, 0.95) 0%, rgba(10, 3, 21, 0.98) 100%); } + .contributor-card.contributor-rank-bronze::before { background: var(--gradient-bronze); } + .contributor-card.contributor-rank-bronze:hover { border-color: rgba(217, 119, 6, 0.4); box-shadow: @@ -541,6 +653,7 @@ body::before { .contributor-card.contributor-rank-contributor { border-color: rgba(168, 85, 247, 0.15); } + .contributor-card.contributor-rank-contributor::before { background: linear-gradient(90deg, var(--primary-500), var(--accent-cyan)); } @@ -603,7 +716,7 @@ body::before { font-size: 1.45rem; font-weight: 800; margin-bottom: 0.5rem; - background: linear-gradient(135deg, #fff 0%, var(--text-secondary) 100%); + background: linear-gradient(135deg, var(--text-primary-inner) 0%, var(--text-secondary-inner) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -626,9 +739,10 @@ body::before { text-transform: uppercase; letter-spacing: 1.5px; font-family: 'SF Mono', 'Roboto Mono', monospace; - background: rgba(255, 255, 255, 0.06); - border: 1px solid rgba(255, 255, 255, 0.08); + background: var(--bg-glass); + border: 1px solid var(--border-base); display: inline-block; + color: var(--text-secondary-inner); } .contributor-stats { @@ -637,9 +751,9 @@ body::before { gap: 0; margin-bottom: 1.75rem; padding: 0; - background: rgba(255, 255, 255, 0.03); + background: var(--bg-glass); border-radius: var(--radius-sm); - border: 1px solid rgba(255, 255, 255, 0.04); + border: 1px solid var(--border-base); overflow: hidden; } @@ -650,13 +764,13 @@ body::before { } .contributor-stat-item:first-child { - border-right: 1px solid rgba(255, 255, 255, 0.06); + border-right: 1px solid var(--border-base); } .contributor-stat-label { display: block; font-size: 0.7rem; - color: var(--text-muted); + color: var(--text-muted-inner); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 0.4rem; @@ -674,6 +788,12 @@ body::before { font-family: 'SF Mono', 'Roboto Mono', monospace; } +:root:not(.dark) .contributor-stat-value { + background: none; + -webkit-text-fill-color: initial; + color: var(--gold-600); +} + .btn { padding: 1.125rem 2.25rem; border-radius: var(--radius-md); @@ -701,11 +821,10 @@ body::before { left: -100%; width: 100%; height: 100%; - background: linear-gradient(90deg, - transparent, - rgba(255,255,255,0.3), - transparent - ); + background: linear-gradient(90deg, + transparent, + rgba(255, 255, 255, 0.3), + transparent); transition: left 0.6s; z-index: 1; } @@ -729,15 +848,16 @@ body::before { .btn-outline { background: transparent; - color: var(--text-primary); + color: var(--text-primary-inner); border: 2px solid var(--secondary-500); - box-shadow: var(--shadow-blue-glow); + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1); } .btn-outline:hover { background: var(--secondary-500); - transform: translateY(-4px) scale(1.08); - box-shadow: var(--shadow-blue-glow), 0 20px 40px rgba(59, 130, 246, 0.4); + transform: translateY(-4px) scale(1.05); + box-shadow: var(--shadow-blue-glow), 0 12px 24px rgba(59, 130, 246, 0.25); + color: white; } .contributor-actions { @@ -760,7 +880,8 @@ body::before { .contributors-modal-backdrop { position: fixed; inset: 0; - background: rgba(10, 3, 21, 0.9); + background: rgba(10, 3, 21, 0.85); + /* Dark theme default */ backdrop-filter: blur(12px); z-index: 1000; display: flex; @@ -769,20 +890,29 @@ body::before { animation: fadeInUp 0.4s ease-out; } +:root:not(.dark) .contributors-modal-backdrop { + background: rgba(255, 255, 255, 0.6); +} + .contributors-modal { background: var(--bg-surface); backdrop-filter: blur(40px); - border: 1px solid var(--border-active); + border: 1px solid var(--border-base); border-radius: var(--radius-lg); max-width: 700px; max-height: 85vh; width: 92%; overflow-y: auto; animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); - box-shadow: var(--shadow-lg), var(--shadow-purple-glow); + box-shadow: var(--shadow-lg); position: relative; } +.dark .contributors-modal { + border-color: var(--border-active); + box-shadow: var(--shadow-lg), var(--shadow-purple-glow); +} + .contributors-modal::-webkit-scrollbar { width: 10px; } @@ -814,17 +944,17 @@ body::before { .contributors-modal-title { font-size: 1.8rem; font-weight: 800; - background: var(--gradient-secondary); + background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .contributors-modal-close { - background: rgba(147, 51, 234, 0.2); - border: 2px solid var(--border-base); + background: var(--bg-glass); + border: 1px solid var(--border-base); font-size: 1.8rem; - color: var(--text-secondary); + color: var(--text-secondary-inner); cursor: pointer; width: 48px; height: 48px; @@ -946,45 +1076,78 @@ body::before { } @media (max-width: 1024px) { - .contributors-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } + .contributors-grid { + grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); + } } @media (max-width: 768px) { - .contributors-page { padding: 1.5rem 1rem; } - .contributors-controls { + .contributors-page { + padding: 1.5rem 1rem; + } + + .contributors-controls { justify-content: center; - align-items: center; + align-items: center; + gap: 1.5rem; + } + + .contributors-search-input { + min-width: 200px; + } + + .contributors-grid { + grid-template-columns: 1fr; + gap: 2rem; + } + + .contributor-stats { + flex-direction: column; gap: 1.5rem; } - .contributors-search-input { min-width: 200px; } - .contributors-grid { - grid-template-columns: 1fr; - gap: 2rem; + + .contributor-actions { + flex-direction: column; } - .contributor-stats { - flex-direction: column; - gap: 1.5rem; + + .contributors-stats { + gap: 1.5rem; } - .contributor-actions { flex-direction: column; } - .contributors-stats { gap: 1.5rem; } - .contributors-modal-header { - flex-direction: column; - gap: 1.5rem; - text-align: center; + + .contributors-modal-header { + flex-direction: column; + gap: 1.5rem; + text-align: center; } - .contributors-filters{ + + .contributors-filters { flex-direction: column; } } @media (max-width: 480px) { - .contributors-header { padding: 2.5rem 1.5rem; } - .contributors-stats { flex-direction: column; align-items: center; } - .contributors-stat-card { min-width: 280px; } - .contributor-card { padding: 2rem; } + .contributors-header { + padding: 2.5rem 1.5rem; + } + + .contributors-stats { + flex-direction: column; + align-items: center; + } + + .contributors-stat-card { + min-width: 280px; + } + + .contributor-card { + padding: 2rem; + } } -.contributor-card, .btn, .contributors-select, .contributors-search-input { +.contributor-card, +.btn, +.contributors-select, +.contributors-search-input { backface-visibility: hidden; transform: translateZ(0); } @@ -1001,12 +1164,16 @@ body::before { } @media (prefers-reduced-motion: reduce) { - * { animation-duration: 0.01ms !important; transition-duration: 0.2s !important; } + * { + animation-duration: 0.01ms !important; + transition-duration: 0.2s !important; + } } /* Custom Scrollbar for Grid */ .contributors-grid::-webkit-scrollbar { - width: 12px; height: 12px; + width: 12px; + height: 12px; } .contributors-grid::-webkit-scrollbar-track { @@ -1025,10 +1192,14 @@ body::before { @media print { :root { --bg-body: white; - --bg-card: rgba(255,255,255,0.9); + --bg-card: rgba(255, 255, 255, 0.9); --text-primary: black; } - .btn, .contributors-modal { display: none !important; } + + .btn, + .contributors-modal { + display: none !important; + } } @@ -1043,20 +1214,24 @@ body::before { } .project-admin-container { - background: linear-gradient(165deg, rgba(24, 10, 65, 0.97) 0%, rgba(12, 4, 30, 0.99) 60%, rgba(18, 8, 50, 0.97) 100%); - border: 1px solid rgba(147, 51, 234, 0.3); + background: var(--bg-card); + border: 1px solid var(--border-base); border-radius: var(--radius-lg); padding: 3rem; position: relative; overflow: hidden; - box-shadow: - 0 24px 80px rgba(10, 3, 21, 0.7), - 0 0 40px rgba(147, 51, 234, 0.15); + box-shadow: var(--shadow-md); transition: var(--transition-slow); max-width: 640px; margin: 0 auto 3rem; } +.dark .project-admin-container { + box-shadow: + 0 24px 80px rgba(10, 3, 21, 0.7), + 0 0 40px rgba(147, 51, 234, 0.15); +} + /* Animated gradient top border */ .project-admin-container::before { content: ''; @@ -1088,12 +1263,19 @@ body::before { .project-admin-container:hover { transform: translateY(-6px); box-shadow: - 0 0 32px rgba(234, 179, 8, 0.15), - 0 32px 80px rgba(10, 3, 21, 0.8), + var(--shadow-gold-glow), + var(--shadow-lg), inset 0 1px 0 rgba(234, 179, 8, 0.08); border-color: rgba(234, 179, 8, 0.3); } +.dark .project-admin-container:hover { + box-shadow: + var(--shadow-gold-glow), + var(--shadow-xl), + inset 0 1px 0 rgba(234, 179, 8, 0.08); +} + .project-admin-container:hover::after { top: -60px; right: -60px; @@ -1143,13 +1325,17 @@ body::before { height: 100%; border-radius: 50%; border: none; - box-shadow: 0 4px 20px rgba(10, 3, 21, 0.6); + box-shadow: var(--shadow-sm); transition: var(--transition-normal); object-fit: cover; position: relative; z-index: 1; } +.dark .project-admin-avatar { + box-shadow: 0 4px 20px rgba(10, 3, 21, 0.6); +} + .project-admin-container:hover .project-admin-avatar { transform: scale(1.06); box-shadow: 0 0 24px rgba(234, 179, 8, 0.3); @@ -1182,8 +1368,7 @@ body::before { .project-admin-info h2 { font-size: 1.75rem; font-weight: 900; - background: linear-gradient(135deg, var(--gold-400) 0%, #fff 50%, var(--gold-500) 100%); - background-size: 200% 100%; + background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -1228,14 +1413,14 @@ body::before { justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.06); + background: var(--bg-glass); + border: 1px solid var(--border-base); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-normal); font-weight: 600; font-size: 1.05rem; - color: var(--text-primary); + color: var(--text-primary-inner); } .project-admin-repo-link:hover { @@ -1277,11 +1462,11 @@ body::before { text-align: center; gap: 1.25rem; } - + .project-admin-actions { flex-direction: column; } - + .project-admin-container { margin: 0 0 2rem; padding: 2rem 1.5rem; @@ -1293,7 +1478,8 @@ body::before { height: 90px; } } -.contributors-content{ + +.contributors-content { display: flex; flex-direction: column; gap: 3rem; diff --git a/src/context/ThemeContext.jsx b/src/context/ThemeContext.jsx index 97c6663..5fa718b 100644 --- a/src/context/ThemeContext.jsx +++ b/src/context/ThemeContext.jsx @@ -14,14 +14,22 @@ export const useTheme = () => { export const ThemeProvider = ({ children }) => { const [theme, setTheme] = useState(() => { const savedTheme = localStorage.getItem("cryptohub-theme"); - return savedTheme || "dark"; + if (savedTheme) return savedTheme; + // Fallback to system preference + if (window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches) { + return "light"; + } + return "dark"; }); useEffect(() => { - requestAnimationFrame(() => { - localStorage.setItem("cryptohub-theme", theme); - document.documentElement.classList.toggle("dark", theme === "dark"); - }); + localStorage.setItem("cryptohub-theme", theme); + document.documentElement.setAttribute("data-theme", theme); + if (theme === "dark") { + document.documentElement.classList.add("dark"); + } else { + document.documentElement.classList.remove("dark"); + } }, [theme]); const toggleTheme = useCallback(() => { diff --git a/src/data/BlogArticle.css b/src/data/BlogArticle.css index b25734d..4fb42c8 100644 --- a/src/data/BlogArticle.css +++ b/src/data/BlogArticle.css @@ -62,10 +62,10 @@ left: 0; right: 0; bottom: 0; - background: linear-gradient(135deg, - rgba(69, 89, 220, 0.1) 0%, - rgba(34, 197, 94, 0.05) 50%, - rgba(157, 78, 221, 0.05) 100%); + background: linear-gradient(135deg, + rgba(69, 89, 220, 0.1) 0%, + rgba(34, 197, 94, 0.05) 50%, + rgba(157, 78, 221, 0.05) 100%); z-index: -1; } @@ -919,12 +919,12 @@ .content-layout { grid-template-columns: 1fr; } - + .article-sidebar { position: static; order: 2; } - + .toc-card { display: none; } @@ -938,38 +938,38 @@ transform: none; flex-direction: row; } - + .article-title { font-size: 32px; } - + .article-excerpt { font-size: 18px; padding-left: 15px; } - + .article-meta-grid { grid-template-columns: 1fr; } - + .quick-stats { grid-template-columns: repeat(2, 1fr); } - + .cta-content { flex-direction: column; text-align: center; } - + .cta-form { flex-direction: column; width: 100%; } - + .related-grid { grid-template-columns: 1fr; } - + .takeaways-grid { grid-template-columns: 1fr; } @@ -980,20 +980,128 @@ flex-direction: column; align-items: flex-start; } - + .article-title { font-size: 28px; } - + .article-excerpt { font-size: 16px; } - + .content-section h2 { font-size: 22px; } - + .content-section p { font-size: 16px; } +} + +/* ========== LIGHT THEME OVERRIDES ========== */ +[data-theme="light"] .blog-article-container { + background: var(--bg-deep); + color: var(--text-main); +} + +[data-theme="light"] .article-title { + background: none; + -webkit-text-fill-color: initial; + color: #0f172a; +} + +[data-theme="light"] .article-excerpt { + color: #475569; + border-left-color: #7c3aed; +} + +[data-theme="light"] .meta-value, +[data-theme="light"] .toc-title, +[data-theme="light"] .data-source h4, +[data-theme="light"] .author-info h4, +[data-theme="light"] .content-section h2, +[data-theme="light"] .highlight-box strong, +[data-theme="light"] .card-header h3, +[data-theme="light"] .viz-header, +[data-theme="light"] .section-header h2, +[data-theme="light"] .card-body h3, +[data-theme="light"] .blog-article-not-found h1 { + color: #0f172a; +} + +[data-theme="light"] .article-meta-grid, +[data-theme="light"] .toc-card, +[data-theme="light"] .stat, +[data-theme="light"] .author-card-sidebar, +[data-theme="light"] .metric-card, +[data-theme="light"] .insight-list li, +[data-theme="light"] .takeaway, +[data-theme="light"] .insight-card, +[data-theme="light"] .cta-content, +[data-theme="light"] .viz-placeholder { + background: #ffffff; + border-color: #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); +} + +[data-theme="light"] .content-section p, +[data-theme="light"] .meta-label, +[data-theme="light"] .stat-label, +[data-theme="light"] .toc-link, +[data-theme="light"] .author-info p, +[data-theme="light"] .metric-label, +[data-theme="light"] .viz-labels, +[data-theme="light"] .takeaway p, +[data-theme="light"] .card-body p, +[data-theme="light"] .section-subtitle, +[data-theme="light"] .date, +[data-theme="light"] .read-time, +[data-theme="light"] .blog-article-not-found p, +[data-theme="light"] .cta-text p { + color: #475569; +} + +[data-theme="light"] .highlight-box { + background: #f5f3ff; +} + +[data-theme="light"] .highlight-box.success { + background: #f0fdf4; +} + +[data-theme="light"] .data-viz { + background: #f8fafc; + border-color: #e2e8f0; +} + +[data-theme="light"] .key-takeaways-card { + background: linear-gradient(135deg, #f5f3ff 0%, #f0fdf4 100%); + border-color: #e0e7ff; +} + +[data-theme="light"] .related-insights { + background: #f8fafc; + border-color: #e2e8f0; +} + +[data-theme="light"] .cta-form input { + background: #ffffff; + border-color: #d1d5db; + color: #0f172a; +} + +[data-theme="light"] .back-btn { + border-color: #d1d5db; + color: #475569; +} + +[data-theme="light"] .back-btn:hover { + background: #f1f5f9; + color: #0f172a; +} + +[data-theme="light"] .toc-link:hover, +[data-theme="light"] .toc-link.active { + background: #f5f3ff; + color: #7c3aed; } \ No newline at end of file diff --git a/src/index.css b/src/index.css index 4ce4e59..617b5e6 100644 --- a/src/index.css +++ b/src/index.css @@ -6,6 +6,57 @@ @tailwind utilities; :root { + /* Light Mode Defaults - Smoother Palette */ + --bg-deep: #fdfdfd; + --bg-stars: #f8fafc; + + /* Neon Accents - Refined for Light Mode Contrast */ + --neon-cyan: #0891b2; + --neon-purple: #7c3aed; + --neon-pink: #db2777; + + /* Glows - Subtle */ + --glow-cyan: rgba(8, 145, 178, 0.15); + --glow-purple: rgba(124, 58, 237, 0.15); + + --text-main: #0f172a; + --text-muted: #475569; + + /* Professional Dashboard Theme - Light */ + --dashboard-bg-primary: #f8fafc; + --dashboard-bg-secondary: #f1f5f9; + --dashboard-bg-elevated: #ffffff; + --dashboard-bg-card: #ffffff; + + /* Dashboard Borders - Light */ + --dashboard-border-subtle: rgba(0, 0, 0, 0.05); + --dashboard-border-medium: rgba(0, 0, 0, 0.08); + --dashboard-border-hover: rgba(8, 145, 178, 0.2); + --dashboard-border-active: rgba(8, 145, 178, 0.3); + + /* Dashboard Text - Light */ + --dashboard-text-primary: #0f172a; + --dashboard-text-secondary: #334155; + --dashboard-text-muted: #64748b; + + /* Dashboard Accents - Light */ + --dashboard-accent-cyan: #0891b2; + --dashboard-accent-cyan-dim: rgba(8, 145, 178, 0.08); + --dashboard-accent-cyan-hover: rgba(8, 145, 178, 0.12); + + /* Dashboard Shadows - Professional & Soft */ + --dashboard-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); + --dashboard-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --dashboard-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + + /* Glass - Softened for Light Mode */ + --glass-panel-bg: rgba(255, 255, 255, 0.85); + --glass-card-bg: rgba(255, 255, 255, 0.9); + --glass-border: rgba(0, 0, 0, 0.04); + --navbar-bg: rgba(255, 255, 255, 0.9); +} + +:root[class~="dark"] { --bg-deep: #050505; --bg-stars: #0a0a0f; @@ -47,6 +98,11 @@ --dashboard-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --dashboard-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3); --dashboard-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4); + + /* Glass - Dark */ + --glass-panel-bg: rgba(10, 10, 15, 0.6); + --glass-card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%); + --glass-border: rgba(255, 255, 255, 0.08); } * { @@ -56,23 +112,31 @@ font-family: "Outfit", sans-serif; } +html { + /* Lenis handles smooth scrolling; keep native behavior instant for consistency */ + scroll-behavior: auto; +} + body { background-color: var(--bg-deep); color: var(--text-main); - background: - radial-gradient(ellipse at top, #19102c 0%, transparent 40%), - /* Top Purple Nebula */ - radial-gradient(circle at 80% 20%, #0c1827 0%, transparent 30%), - /* Right Blue Void */ - #050505; - /* Fallback Base */ min-height: 100vh; overflow-x: hidden; position: relative; + transition: background-color 0.3s ease, color 0.3s ease; +} + +/* Global theme transition for all elements */ +*, +*::before, +*::after { + transition-property: background-color, border-color, color, box-shadow; + transition-duration: 0.2s; + transition-timing-function: ease; } -/* Starfield overlay pattern (optional enhancement) */ -body::before { +/* Starfield overlay pattern - dark mode only */ +:root[class~="dark"] body::before { content: ""; position: fixed; top: 0; @@ -100,17 +164,17 @@ a { Glassmorphism Utilities -------------------------------- */ .glass-panel { - background: rgba(10, 10, 15, 0.6); + background: var(--glass-panel-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.08); - box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); + border: 1px solid var(--glass-border); + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1); } .glass-card { - background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%); + background: var(--glass-card-bg); backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.06); + border: 1px solid var(--glass-border); transition: all 0.3s ease; } @@ -124,10 +188,10 @@ a { .auth-input { width: 100%; padding: 12px 16px; - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.1); + background: var(--dashboard-bg-secondary); + border: 1px solid var(--border-color); border-radius: 8px; - color: #fff; + color: var(--text-main); font-size: 1rem; outline: none; transition: all 0.3s ease; @@ -135,8 +199,8 @@ a { .auth-input:focus { border-color: var(--neon-cyan); - box-shadow: 0 0 10px rgba(0, 243, 255, 0.2); - background: rgba(0, 243, 255, 0.05); + box-shadow: 0 0 10px var(--glow-cyan); + background: var(--dashboard-accent-cyan-dim); } /* ----------------------------- @@ -160,7 +224,6 @@ a { .btn-neon:hover { box-shadow: 0 0 20px var(--glow-cyan); - transform: translateY(-2px); filter: brightness(1.2); } @@ -177,21 +240,21 @@ a { .btn-neon-purple:hover { box-shadow: 0 0 20px var(--glow-purple); - transform: translateY(-2px); filter: brightness(1.2); } /* Text Gradients */ .text-gradient-cyan { - background: linear-gradient(to right, #00f3ff, #0066ff); + background: linear-gradient(to right, var(--neon-cyan), #0066ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .text-gradient-purple { - background: linear-gradient(to right, #bc00dd, #ff0055); + background: linear-gradient(to right, #8b5cf6, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; + background-clip: text; } /* ----------------------------- @@ -232,16 +295,17 @@ a { } ::-webkit-scrollbar-track { - background: #000; + background: var(--bg-deep); } ::-webkit-scrollbar-thumb { - background: #333; + background: var(--text-muted); border-radius: 3px; + border: 2px solid var(--bg-deep); } ::-webkit-scrollbar-thumb:hover { - background: #555; + background: var(--text-main); } body[data-theme="light"] .signup-btn, diff --git a/src/pages/Dashboard/Dashboard.jsx b/src/pages/Dashboard/Dashboard.jsx index 2bf9a34..6f249e2 100644 --- a/src/pages/Dashboard/Dashboard.jsx +++ b/src/pages/Dashboard/Dashboard.jsx @@ -75,13 +75,10 @@ const Dashboard = () => { ]; return ( -
+