login & sign up page design

static/css/custom-login.css

@@ -0,0 +1,101 @@
+/* Root theme tokens */
+:root{
+  --bg-start: #f8f9ff;
+  --bg-end: #eef5ff;
+  --card-bg: rgba(255,255,255,0.9);
+  --accent: #0d6efd;
+  --muted: #6c757d;
+  --glass: rgba(255,255,255,0.65);
+}
+
+/* Full-viewport subtle gradient */
+
+.entrance-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - 48px);
+}
+
+
+.login-bg {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  background: linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%);
+  padding: 40px 16px;
+}
+
+/* Card */
+.entrance-card {
+  background: var(--card-bg);
+  border-radius: 14px;
+  overflow: hidden;
+  box-shadow: 0 8px 28px rgba(20,30,50,0.08);
+  border: 1px solid rgba(13,110,253,0.06);
+  transition: transform .18s ease, box-shadow .18s ease;
+}
+.entrance-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 18px 50px rgba(20,30,50,0.12);
+}
+
+/* Brand/logo */
+.brand .logo {
+  border-radius: 10px;
+  box-shadow: 0 6px 18px rgba(13,110,253,0.12), inset 0 -6px 18px rgba(255,255,255,0.06);
+}
+.brand { margin-bottom: .25rem; }
+
+/* Header text */
+.card-header .h5 {
+  color: #0b1726;
+  letter-spacing: -0.2px;
+}
+.card-header p {
+  color: var(--muted);
+}
+
+/* Inputs: subtle rounded */
+.form-compact .form-control {
+  border-radius: 10px;
+  padding: 0.8rem 0.9rem;
+  border: 1px solid rgba(15,23,42,0.06);
+  box-shadow: none;
+}
+.form-compact .form-control:focus {
+  border-color: var(--accent);
+  box-shadow: 0 6px 20px rgba(13,110,253,0.08);
+  outline: none;
+}
+
+/* Primary button - bigger, more modern */
+.btn-primary.btn-lg {
+  background: linear-gradient(180deg, var(--accent) 0%, #0b5ed7 100%);
+  border: none;
+  border-radius: 10px;
+  padding: 0.75rem 1rem;
+  font-weight: 600;
+  box-shadow: 0 8px 30px rgba(13,110,253,0.12);
+}
+.btn-primary.btn-lg:active, .btn-primary.btn-lg:focus {
+  transform: translateY(1px);
+  box-shadow: 0 6px 18px rgba(13,110,253,0.10);
+}
+
+/* Muted link style */
+.link-muted {
+  color: var(--muted);
+  text-decoration: none;
+}
+.link-muted:hover { text-decoration: underline; color: var(--accent); }
+
+/* Footer small text */
+.card-footer .small { color: var(--muted); }
+
+/* Responsive tweaks */
+@media (max-width: 480px) {
+  .entrance-card { margin: 0 8px; }
+  .brand .logo { width: 48px; height: 48px; }
+  .btn-primary.btn-lg { font-size: 0.95rem; padding: 0.68rem 0.85rem; }
+}

static/css/custom.css

@@ -0,0 +1,59 @@
+/* Custom visual tweaks to modernize the site */
+:root{
+  --brand:#6f42c1;
+  --brand-dark:#59329a;
+  --muted:#6c757d;
+}
+
+body{
+  background: linear-gradient(180deg,#f7f9fb 0%, #ffffff 60%);
+  color: #212529;
+}
+
+.navbar-brand{
+  font-weight:700;
+  letter-spacing:0.4px;
+}
+
+.navbar .nav-link{
+  margin-right: .6rem;
+}
+
+.container.my-5{
+  max-width:1100px;
+}
+
+/* Card styling for entrance/login */
+.entrance-container{
+  padding-top:40px;
+  padding-bottom:40px;
+}
+
+.entrance-card{
+  border-radius:12px;
+  overflow:hidden;
+}
+
+.entrance-card .card-header{
+  background: linear-gradient(90deg,var(--brand),var(--brand-dark));
+  color: white;
+}
+
+.entrance-card .card-body{
+  background: white;
+}
+
+.btn-primary{
+  background: var(--brand);
+  border-color: var(--brand-dark);
+}
+
+.footer{
+  font-size:0.95rem;
+}
+
+/* Responsive tweaks */
+@media (max-width:576px){
+  .container.my-5{ padding-left:1rem; padding-right:1rem; }
+  .navbar-brand{ font-size:1rem; }
+}