/* ========================================================= AFZAL Education Academy Hub — Theme System Light + Dark, glassmorphism, CSS variables only. Toggle via [data-theme] attribute on . ========================================================= */ /* --------------------------------------------------------- LIGHT THEME (default) --------------------------------------------------------- */ :root, :root[data-theme="light"] { --bg-base: #F5F7FB; --bg-surface: rgba(255, 255, 255, 0.65); --bg-surface-solid: #FFFFFF; --bg-gradient: linear-gradient(135deg, #EEF2FF 0%, #F5F7FB 50%, #FDF4FF 100%); --border-glass: rgba(15, 23, 42, 0.08); --shadow-soft: 0 8px 30px rgba(31, 41, 55, 0.08); --shadow-hover: 0 14px 40px rgba(79, 70, 229, 0.15); --text-primary: #1E293B; --text-secondary: #64748B; --text-muted: #94A3B8; --accent-primary: #4F46E5; --accent-secondary: #7C3AED; --accent-success: #10B981; --accent-warning: #F59E0B; --accent-danger: #EF4444; --accent-info: #0EA5E9; --gradient-primary: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); --gradient-success: linear-gradient(135deg, #10B981 0%, #34D399 100%); --gradient-warning: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%); --gradient-danger: linear-gradient(135deg, #EF4444 0%, #F87171 100%); --gradient-info: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%); --table-header-tint: rgba(79, 70, 229, 0.06); --table-row-hover: rgba(79, 70, 229, 0.04); --table-zebra: rgba(15, 23, 42, 0.02); --skeleton-base: rgba(15, 23, 42, 0.06); --skeleton-shine: rgba(15, 23, 42, 0.12); } /* --------------------------------------------------------- Base --------------------------------------------------------- */ * { box-sizing: border-box; } body { background: var(--bg-gradient); color: var(--text-primary); font-family: "Inter", "Poppins", sans-serif; min-height: 100vh; transition: background 0.3s ease, color 0.3s ease; } h1, h2, h3, h4, h5, h6, .stat-number { font-family: "Poppins", "Inter", sans-serif; color: var(--text-primary); font-weight: 600; } p, span, label, td, th { color: var(--text-secondary); } a { color: var(--accent-primary); text-decoration: none; } a:hover { color: var(--accent-secondary); } /* --------------------------------------------------------- Glass Card --------------------------------------------------------- */ .glass-card { background: var(--bg-surface); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--border-glass); border-radius: 20px; box-shadow: var(--shadow-soft); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 1.5rem; } .glass-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } /* Card entrance animation, stagger with inline style --delay */ .card-animate { opacity: 0; transform: translateY(12px); animation: cardIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation-delay: var(--delay, 0ms); } @keyframes cardIn { to { opacity: 1; transform: translateY(0); } } /* --------------------------------------------------------- Dashboard Stat Cards --------------------------------------------------------- */ .stat-card { position: relative; overflow: hidden; } .stat-card.tint-primary { background: linear-gradient(135deg, rgba(79,70,229,0.12), rgba(124,58,237,0.06)), var(--bg-surface); } .stat-card.tint-success { background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(52,211,153,0.06)), var(--bg-surface); } .stat-card.tint-warning { background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(251,191,36,0.06)), var(--bg-surface); } .stat-card.tint-danger { background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(248,113,113,0.06)), var(--bg-surface); } .stat-card.tint-info { background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(56,189,248,0.06)), var(--bg-surface); } .stat-icon-badge { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.35rem; } .stat-icon-badge.bg-primary-grad { background: var(--gradient-primary); box-shadow: 0 8px 20px rgba(79,70,229,0.35); } .stat-icon-badge.bg-success-grad { background: var(--gradient-success); box-shadow: 0 8px 20px rgba(16,185,129,0.35); } .stat-icon-badge.bg-warning-grad { background: var(--gradient-warning); box-shadow: 0 8px 20px rgba(245,158,11,0.35); } .stat-icon-badge.bg-danger-grad { background: var(--gradient-danger); box-shadow: 0 8px 20px rgba(239,68,68,0.35); } .stat-icon-badge.bg-info-grad { background: var(--gradient-info); box-shadow: 0 8px 20px rgba(14,165,233,0.35); } .stat-number { font-size: 1.9rem; font-weight: 700; line-height: 1.1; } .stat-trend { font-size: 0.8rem; font-weight: 600; } .stat-trend.up { color: var(--accent-success); } .stat-trend.down { color: var(--accent-danger); } .stat-label { font-size: 0.85rem; color: var(--text-secondary); } /* --------------------------------------------------------- Skeleton loader --------------------------------------------------------- */ .skeleton { background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: 10px; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* --------------------------------------------------------- Tables --------------------------------------------------------- */ .table-glass-wrapper { background: var(--bg-surface); backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--border-glass); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-soft); } .table-glass { margin-bottom: 0; width: 100%; } .table-glass thead th { background: var(--table-header-tint); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; font-weight: 700; border: none; padding: 0.9rem 1rem; } .table-glass tbody td { padding: 0.85rem 1rem; border-color: var(--border-glass); color: var(--text-primary); vertical-align: middle; } .table-glass tbody tr { transition: background 0.2s ease; } .table-glass tbody tr:hover { background: var(--table-row-hover); } .table-glass tbody tr:nth-child(even) { background: var(--table-zebra); } /* --------------------------------------------------------- Buttons --------------------------------------------------------- */ .btn-glow-primary { background: var(--gradient-primary); color: #fff; border: none; border-radius: 12px; padding: 0.6rem 1.4rem; font-weight: 600; box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn-glow-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(79, 70, 229, 0.45); color: #fff; } .btn-outline-glow { background: transparent; border: 1.5px solid var(--accent-primary); color: var(--accent-primary); border-radius: 12px; padding: 0.55rem 1.35rem; font-weight: 600; transition: background 0.2s ease, transform 0.2s ease; } .btn-outline-glow:hover { background: rgba(79, 70, 229, 0.1); color: var(--accent-primary); transform: translateY(-2px); } /* --------------------------------------------------------- Navbar / Sidebar --------------------------------------------------------- */ .app-navbar { background: var(--bg-gradient); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-glass); } .app-sidebar { background: var(--bg-surface); backdrop-filter: blur(20px) saturate(180%); border-right: 1px solid var(--border-glass); min-height: 100vh; } .app-sidebar .nav-link { color: var(--text-secondary); border-radius: 12px; padding: 0.65rem 1rem; margin: 0.15rem 0.6rem; font-weight: 500; display: flex; align-items: center; gap: 0.7rem; transition: background 0.2s ease, color 0.2s ease; } .app-sidebar .nav-link:hover { background: var(--table-row-hover); color: var(--text-primary); } .app-sidebar .nav-link.active { background: var(--gradient-primary); color: #fff; box-shadow: 0 6px 16px rgba(79, 70, 229, 0.3); } /* --------------------------------------------------------- Auth pages (login/signup/forgot password) --------------------------------------------------------- */ .auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .auth-card { width: 100%; max-width: 420px; padding: 2.5rem 2rem; } .auth-logo { width: 64px; height: 64px; object-fit: contain; margin-bottom: 0.75rem; } .form-control-glass { background: var(--bg-surface-solid); border: 1.5px solid var(--border-glass); border-radius: 12px; padding: 0.65rem 1rem; color: var(--text-primary); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-control-glass:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12); outline: none; color: var(--text-primary); background: var(--bg-surface-solid); } /* Responsive */ @media (max-width: 991.98px) { .app-sidebar { position: fixed; z-index: 1040; left: -260px; width: 260px; transition: left 0.3s ease; } .app-sidebar.open { left: 0; } }