/* ===== GLOBAL ===== */ .section { padding: 80px 0; } .gradient-text { background: linear-gradient(90deg, #6366f1, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .btn-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); border: none; } /* =============================== THEME SYSTEM (CLASS BASED) Usage: // Dark mode // Light mode ================================ */ /* ---------- LIGHT (DEFAULT) ---------- */ @media (prefers-color-scheme: dark) { :root { --bg: #0b0f19; --text: #f8fafc; --muted: #cbd5f5; --card: #12172a; --hero-overlay: rgba(0, 0, 0, 0.55); } } body { --bg: #f8fafc; --surface: #ffffff; --text: #0f172a; --muted: #475569; --border: #e2e8f0; --primary: #6366f1; --secondary: #8b5cf6; background: var(--bg); color: var(--text); } /* ---------- DARK MODE ---------- */ body.dark { --bg: #0b0f19; --surface: #111827; --text: #f8fafc; --muted: #cbd5f5; --border: #1f2937; --primary: #818cf8; --secondary: #a78bfa; background: var(--bg); color: var(--text); } /* ---------- COMMON UI ---------- */ h1, h2, h3, h4, h5, h6, p, span { color: var(--text); } .text-muted { color: var(--muted) !important; } .card, .feature-card, .course-card, .glass { transition: all .4s ease; background: var(--surface); border: 1px solid var(--border); color: var(--text); } body.dark .card { background: var(--card); } .card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, .2); cursor: pointer; } /* ---------- HERO ---------- */ .hero { padding: 120px 0 100px; position: relative; min-height: 50vh; background: radial-gradient(circle at top, color-mix(in srgb, var(--primary) 25%, transparent), var(--bg)); } .hero .container { position: relative; z-index: 2; } .hero h1, .hero p { color: var(--text); font-size: 3rem; max-width: 620px; margin: 0 auto; } .hero h1 { text-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); } /* ---------- BUTTONS ---------- */ .btn-primary { background: linear-gradient(135deg, var(--primary), var(--secondary)); border: none; } .btn-outline-primary { color: var(--primary); border-color: var(--primary); } .btn-outline-primary:hover { background: var(--primary); color: #fff; } /* ===== FEATURE CARDS ===== */ .feature-card { background: #ffffff; border-radius: 18px; padding: 30px; transition: all .35s ease; box-shadow: 0 20px 40px rgba(15, 23, 42, .05); } .feature-card:hover { transform: translateY(-12px); box-shadow: 0 30px 60px rgba(99, 102, 241, .15); } .feature-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 16px; } /* ---------- GLASS EFFECT ---------- */ body.dark .glass { background: rgba(17,24,39,.65); } body:not(.dark) .glass { background: rgba(255,255,255,.75); } /* ---------- NAVBAR ---------- */ .offcanvas { width: 260px; } .navbar, .offcanvas { background: var(--surface) !important; } .nav-link, .navbar-brand { color: var(--text) !important; } /* ---------- HOVER ---------- */ .tilt:hover { box-shadow: 0 30px 60px color-mix(in srgb, var(--primary) 30%, transparent); } /* ===== COURSE CARD ===== */ .course-card { background: #ffffff; border-radius: 20px; overflow: hidden; transition: .35s; box-shadow: 0 20px 40px rgba(15, 23, 42, .06); } .course-card:hover { transform: translateY(-10px); } .course-thumb { height: 160px; background: linear-gradient(135deg, #60a5fa, #a78bfa); } /* ===== STATS ===== */ .stat h3 { font-weight: 800; } .stat p { color: #64748b; } /* ===== CTA ===== */ .cta { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border-radius: 32px; padding: 80px 30px; } .partner-logo { filter: grayscale(1); transition: .3s; } .partner-logo:hover { filter: grayscale(0); transform: scale(1.1); }