/* ============================================================ main.css — Custom styles layered on top of Bootstrap 5.3 Themes are controlled via data-bs-theme on the element. ============================================================ */ /* --- Dark theme overrides --- */ [data-bs-theme="dark"] { --bs-body-bg: #0d1117; } [data-bs-theme="dark"] body { background-color: var(--bs-body-bg); } /* Slightly lighter card background so cards stand out on dark page bg */ [data-bs-theme="dark"] .card { background-color: #161b22 !important; } /* --- Brand accent --- */ :root { --brand-primary: #0d6efd; } /* --- Hero section --- */ .hero-section { background: radial-gradient(ellipse at top center, rgba(13, 110, 253, 0.08) 0%, transparent 70%); min-height: 60vh; display: flex; align-items: center; } /* --- Navbar --- */ .navbar { backdrop-filter: blur(8px); } /* --- Form controls dark override --- */ .form-control:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15); } /* --- Utility spacing --- */ .py-lg-7 { padding-top: 5rem !important; padding-bottom: 5rem !important; } /* --- Card hover lift on dashboard --- */ .card:not([class*="opacity"]):hover { transform: translateY(-2px); transition: transform 0.15s ease; }