css

static/custom.css

@@ -0,0 +1,163 @@
+/* ----------------- */
+/* 🌞 Base Light Theme */
+/* ----------------- */
+body {
+    background-color: #f4f6f8;
+    font-family: 'Inter', 'Segoe UI', sans-serif;
+    font-size: 16px;
+    color: #212529;
+    margin: 0;
+    padding: 0;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.container {
+    max-width: 1200px;
+    margin: auto;
+    padding: 2em;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6,
+p, li, label, span {
+    color: #1e2b3a;
+    margin-bottom: 1em;
+    font-weight: 500;
+}
+
+/* Cards */
+.card {
+    background: linear-gradient(to bottom right, #ffffff, #f9fbfd);
+    border-radius: 14px;
+    padding: 2em;
+    box-shadow: 0 6px 16px rgba(0,0,0,0.05);
+    margin-bottom: 2em;
+    animation: fadeInUp 0.4s ease forwards;
+}
+
+/* Inputs */
+input[type="text"], select, textarea {
+    width: 100%;
+    padding: 0.75em 1em;
+    border: 1px solid #ced4da;
+    border-radius: 10px;
+    background-color: #ffffff;
+    font-size: 1rem;
+    transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.2s;
+}
+
+input:focus, textarea:focus, select:focus {
+    border-color: #007bff;
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
+    transform: scale(1.01);
+}
+
+/* Buttons */
+button, .btn {
+    background: linear-gradient(to right, #0d6efd, #0b5ed7);
+    border: none;
+    color: #ffffff;
+    padding: 0.75em 1.5em;
+    border-radius: 10px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s ease, transform 0.1s ease;
+}
+
+button:hover, .btn:hover {
+    background: linear-gradient(to right, #0b5ed7, #0a53be);
+}
+
+button:active, .btn:active {
+    transform: scale(0.96);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset;
+}
+
+/* Navigation (Light Mode) */
+.navbar,
+.nav-tabs,
+.nav-link,
+.nav-item {
+    background-color: #ffffff;
+    color: #212529;
+    border-color: #dee2e6;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.nav-link.active {
+    background-color: #e9ecef;
+    color: #000;
+}
+
+
+/* ----------------- */
+/* ✨ Animations */
+/* ----------------- */
+
+/* Global transition for everything */
+body, body * {
+    transition:
+        background-color 0.3s ease,
+        color 0.3s ease,
+        border-color 0.3s ease,
+        box-shadow 0.3s ease,
+        transform 0.2s ease;
+}
+
+/* Fade-in for cards */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Nav hover underline */
+.nav-link {
+    position: relative;
+}
+
+.nav-link::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    width: 0%;
+    background-color: currentColor;
+    transition: width 0.3s ease;
+}
+
+.nav-link:hover::after {
+    width: 100%;
+}
+
+/* Modal / panel zoom-in (if you use them) */
+.modal, .panel, .popup {
+    opacity: 0;
+    transform: scale(0.96);
+    animation: zoomIn 0.3s ease forwards;
+}
+
+@keyframes zoomIn {
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* Tab transition */
+.tab-pane {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.tab-pane.active {
+    opacity: 1;
+}