/* ════════════════════════════════════════════════════════════════ 1) VALEX DESIGN TOKENS – LIGHT THEME (default) ════════════════════════════════════════════════════════════════ */ :root { --primary: #6259ca; --primary-hover: #4f47b8; --primary-light: #f0effc; --secondary: #6c757d; --success: #28a745; --danger: #dc3545; --warning: #ffc107; --info: #17a2b8; /* Background colors */ --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-body: #e4e4e4; --bg-card: #ffffff; /* Text colors */ --text-primary: #212529; --text-secondary: #6c757d; --text-muted: #adb5bd; /* Border colors */ --border-color: #dee2e6; --border-radius: 0.5rem; --border-radius-lg: 0.75rem; /* Shadows */ --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; } /* ════════════════════════════════════════════════════════════════ 2) DARK THEME overrides – activated by .dark-theme on ════════════════════════════════════════════════════════════════ */ body.dark-theme { --primary: #6259ca; --primary-hover: #7b72e0; --primary-light: #2a2540; /* Background colors */ --bg-primary: #1a1d29; --bg-secondary: #252936; --bg-body: #0f1116; --bg-card: #1a1d29; /* Text colors */ --text-primary: #e8ecf1; --text-secondary: #adb5bd; --text-muted: #6c757d; /* Border colors */ --border-color: #2d3142; } /* ════════════════════════════════════════════════════════════════ 3) GENERIC STYLES (use tokens above) ════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-body); color: var(--text-primary); padding: var(--spacing-md); transition: background-color 0.3s ease, color 0.3s ease; } /* ───────── INTERACTIVE MOUSE LIGHT (updated) ───────── */ /* ───────── INTERACTIVE MOUSE HALO (compact + professional) ───────── */ /*body::after {*/ /* content: "";*/ /* position: fixed;*/ /* inset: 0;*/ /* pointer-events: none;*/ /* z-index: -1;*/ /* !* smaller 600 px radius & softer colour pair *!*/ /* background: radial-gradient(*/ /* 350px at var(--mouseX, 50%) var(--mouseY, 50%),*/ /* rgba(0, 140, 255, .28) 0%, !* azure *! rgba(86, 100, 210, .24) 40%, !* muted indigo *! transparent 70%*/ /* );*/ /* transition: background-position .15s linear;*/ /* mix-blend-mode: multiply; !* LIGHT theme blend *!*/ /*}*/ /* vivid additive blend only when dark mode is active */ body.dark-theme::after { mix-blend-mode: screen; } @media (prefers-reduced-motion: reduce) { body::after { display: none } } /* ───────── TAXI‑THEMED HIGHLIGHT & ANIMATIONS ───────── */ @keyframes routeSpin { 0% { stroke-dashoffset: 1800; } 100% { stroke-dashoffset: 0; } } @keyframes cardArrive { from { transform: translateY(40px) scale(.97); opacity: .0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* ── VALEX LOGIN CARD CONTAINER ───────────────────── */ .login-card { position: relative; width: 100%; max-width: 1000px; display: flex; flex-wrap: wrap; background: var(--bg-card); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: fadeInUp 0.6s ease-out; border: 1px solid var(--border-color); } .pane-left, .pane-right { flex: 1 1 400px; padding: var(--spacing-xl); } .pane-left { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(135deg, var(--primary-light) 0%, rgba(98, 89, 202, 0.1) 100%); position: relative; } body.dark-theme .pane-left { background: linear-gradient(135deg, var(--primary-light) 0%, rgba(98, 89, 202, 0.15) 100%); } .welcome { width: 100%; } h2, h5 { margin: 0; color: var(--text-primary); } h2 { font-size: 2rem; font-weight: 700; margin-bottom: var(--spacing-sm); letter-spacing: -0.02em; } h5 { font-size: 1rem; font-weight: 400; color: var(--text-secondary); margin-top: var(--spacing-sm); } /* logos */ .brand-logo { width: clamp(180px, 24vw, 260px); max-width: 100%; height: auto; margin-bottom: var(--spacing-xl); transition: transform 0.3s ease; } .brand-logo:hover { transform: scale(1.05); } .triden-logo { width: clamp(120px, 18vw, 180px); max-width: 100%; height: auto; margin: var(--spacing-xl) auto 0; opacity: 0.8; } .pane-right { display: flex; flex-direction: column; justify-content: center; background: var(--bg-primary); } .form-group { margin-bottom: var(--spacing-lg); } .form-label { display: block; margin-bottom: var(--spacing-xs); font-size: 0.875rem; font-weight: 500; color: var(--text-primary); } .form-label .required { color: var(--danger); margin-left: 0.125rem; } /* inputs */ .form-control { width: 100%; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--border-radius); height: 2.75rem; color: var(--text-primary); padding: 0.625rem 1rem; font-size: 0.9375rem; transition: all 0.2s ease; } body.dark-theme .form-control { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); } .form-control::placeholder { color: var(--text-muted); } .form-control:focus { background: var(--bg-primary); border-color: var(--primary); outline: none; box-shadow: 0 0 0 0.2rem rgba(98, 89, 202, 0.15); } body.dark-theme .form-control:focus { background: var(--bg-secondary); } .form-control.is-invalid { border-color: var(--danger); padding-right: 2.5rem; background-repeat: no-repeat; background-position: right calc(0.375em + 0.625rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .form-control.is-invalid:focus { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15); } .password-wrapper .form-control.is-invalid { padding-right: 3rem; } body.dark-theme .form-control.is-invalid { background-color: var(--bg-secondary); background-repeat: no-repeat; background-position: right calc(0.375em + 0.625rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } body.dark-theme .form-control.is-invalid:focus { background-color: var(--bg-secondary); } /* password toggle */ .password-wrapper { position: relative; } .password-wrapper .form-control { padding-right: 3rem; } .password-toggle { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--text-muted); font-size: 1.125rem; user-select: none; } .password-toggle:hover { color: var(--text-primary); } .invalid-feedback { display: block; width: 100%; margin-top: var(--spacing-xs); font-size: 0.875rem; color: var(--danger); } /* button */ .btn.btn-primary { background: var(--primary) !important; border-color: var(--primary) !important; border-radius: var(--border-radius); color: #ffffff !important; height: 2.75rem; font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.02em; width: 100%; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: var(--spacing-xs); } .btn.btn-primary:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(98, 89, 202, 0.3); } .btn.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(98, 89, 202, 0.2); } .btn.btn-primary:focus, .btn-check:active+.btn.btn-primary:focus, .btn-check:checked+.btn.btn-primary:focus, .btn.btn-primary.active:focus, .btn.btn-primary:active:focus, .show>.btn.btn-primary.dropdown-toggle:focus { outline: none; box-shadow: none !important; } /* footer */ .copyright { font-size: 0.8125rem; margin-top: var(--spacing-xl); color: var(--text-secondary); text-align: center; transition: color 0.3s ease; font-weight: 400; } .copyright a { color: var(--primary); text-decoration: none; font-weight: 500; transition: color 0.2s ease; } .copyright a:hover { color: var(--primary-hover); text-decoration: underline; } /* theme toggle button */ .theme-toggle { position: fixed; top: var(--spacing-md); right: var(--spacing-md); z-index: 1000; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 50%; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.25rem; transition: all 0.2s ease; box-shadow: var(--shadow); } .theme-toggle:hover { transform: scale(1.1); box-shadow: var(--shadow-lg); } body.dark-theme img.triden-logo { display: none; } body.dark-theme img.triden-logo.triden-logo-white { display: block; } img.triden-logo.triden-logo-white { display: none; } .fe { font-family: 'feather' !important; speak-as: none; font-style: normal; display: inline-block; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fe-eye-off:before { content: "\e95c"; } .dark-theme .password-toggle:hover { color: #e8ecf1; } body.dark-theme .password-wrapper .password-toggle { color: #adb5bd; } body.dark-theme .password-wrapper .password-toggle:hover { color: #e8ecf1; } .fe-eye:before { content: "\e95b"; } .password-toggle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } .forgot-password { text-align: right; margin-top: calc(var(--spacing-xs) * -1); margin-bottom: 15px; display:none; } .forgot-password a { color: var(--primary); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: color 0.2s ease; } .forgot-password a:hover { color: var(--primary-hover); text-decoration: underline; } /* responsive stack */ @media (max-width: 768px) { .login-card { flex-direction: column; } .pane-left, .pane-right { flex: 1 1 100%; padding: var(--spacing-lg); } .pane-left { padding-bottom: var(--spacing-md); } h2 { font-size: 1.75rem; } .brand-logo { margin-bottom: var(--spacing-lg); } } /* disable motion if user prefers */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }