/* ═══════════════════════════════════════════════════════════════════ login.css — GPSFleetmatic IoT | Dark + Light Theme Place at: assets/css/login.css Theme is driven by [data-theme="light"] on . Default (no attribute / data-theme="dark") = dark industrial. ═══════════════════════════════════════════════════════════════════ */ /* ── CSS Variables — Dark (default) ─────────────────────────────── */ :root { --bg: #090b0e; --surface: #0f1218; --surface-2: #151920; --border: rgba(255, 255, 255, 0.07); --border-amber: rgba(218, 155, 38, 0.35); --amber: #da9b26; --amber-bright: #f0b030; --amber-soft: rgba(218, 155, 38, 0.11); --amber-glow: rgba(218, 155, 38, 0.22); --red: #e05252; --green: #47ab73; --blue: #4a9eda; --text: #e4e7ef; --text-dim: #636b7a; --text-muted: #323846; --font-ui: 'Syne', 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --radius-card: 18px; --radius-input: 10px; --radius-btn: 10px; --transition: 0.2s ease; } /* ── CSS Variables — Light override ─────────────────────────────── */ [data-theme="light"] { --bg: #eef0f5; --surface: #ffffff; --surface-2: #f4f6fb; --border: rgba(0, 0, 0, 0.08); --border-amber: rgba(176, 120, 20, 0.3); --amber: #b07818; --amber-bright: #c98c1a; --amber-soft: rgba(176, 120, 20, 0.1); --amber-glow: rgba(176, 120, 20, 0.18); --red: #c0392b; --green: #1e8449; --blue: #2471a3; --text: #1a1f2e; --text-dim: #4b5568; --text-muted: #9ca3af; } /* ── Theme transition — smooth colour changes on toggle ─────────── */ /* Applied to elements that change colour between themes. NOT on html/body to avoid animating the page background on load. */ .auth-card, .auth-header, .auth-footer, .auth-body, .field-input, .otp-box, .auth-alert, .status-bar, .panel-label__bar, .check-box, .theme-toggle__track, .theme-toggle__thumb { transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease; } body { transition: background-color 0.35s ease, color 0.35s ease; } /* ── Base Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font-ui); background-color: var(--bg); color: var(--text); min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow-x: hidden; position: relative; } /* ── Background Decorations ─────────────────────────────────────── */ .bg-grid { position: fixed; inset: 0; background-image: linear-gradient(rgba(218, 155, 38, 0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(218, 155, 38, 0.028) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; z-index: 0; transition: background-image 0.35s ease; } [data-theme="light"] .bg-grid { background-image: linear-gradient(rgba(176, 120, 20, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(176, 120, 20, 0.055) 1px, transparent 1px); } .bg-glow { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; transition: background 0.35s ease; } .bg-glow--top { width: 550px; height: 550px; background: radial-gradient(circle, rgba(218, 155, 38, 0.055) 0%, transparent 68%); top: -200px; right: -180px; animation: glowPulse 7s ease-in-out infinite; } .bg-glow--bottom { width: 400px; height: 400px; background: radial-gradient(circle, rgba(74, 158, 218, 0.04) 0%, transparent 68%); bottom: -150px; left: -120px; animation: glowPulse 9s ease-in-out infinite reverse; } [data-theme="light"] .bg-glow--top { background: radial-gradient(circle, rgba(176, 120, 20, 0.07) 0%, transparent 68%); } [data-theme="light"] .bg-glow--bottom { background: radial-gradient(circle, rgba(41, 128, 185, 0.05) 0%, transparent 68%); } @keyframes glowPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.6; } } /* ── Page Center ────────────────────────────────────────────────── */ .page-center { position: relative; z-index: 10; width: 100%; max-width: 470px; padding: 0 18px 32px; } /* ── Status Bar ─────────────────────────────────────────────────── */ .status-bar { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.09em; color: var(--text-dim); margin-bottom: 16px; padding: 0 2px; } .status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); flex-shrink: 0; animation: statusBlink 2.8s ease-in-out infinite; } @keyframes statusBlink { 0%, 85%, 100% { opacity: 1; } 42% { opacity: 0.25; } } .status-label { text-transform: uppercase; } .status-date { font-size: 10px; color: var(--text-muted); } /* ── Theme Toggle Button ────────────────────────────────────────── */ .theme-toggle { display: flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; padding: 2px 0; outline: none; line-height: 1; } .theme-toggle:focus-visible { outline: 2px solid var(--amber); border-radius: 20px; } /* Track (pill) */ .theme-toggle__track { position: relative; width: 40px; height: 22px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; flex-shrink: 0; } [data-theme="light"] .theme-toggle__track { background: rgba(176, 120, 20, 0.12); border-color: rgba(176, 120, 20, 0.28); } /* Thumb (circle that slides) */ .theme-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--amber); border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; /* Slide right in light mode */ transform: translateX(0); transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); } [data-theme="light"] .theme-toggle__thumb { transform: translateX(18px); } /* Icons inside the thumb */ .theme-toggle__icon { position: absolute; font-size: 7px; color: #0f1218; line-height: 1; transition: opacity 0.2s ease, transform 0.2s ease; } /* Dark mode: moon visible, sun hidden */ .theme-toggle__icon--dark { opacity: 1; transform: scale(1); } .theme-toggle__icon--light { opacity: 0; transform: scale(0.4); } /* Light mode: sun visible, moon hidden */ [data-theme="light"] .theme-toggle__icon--dark { opacity: 0; transform: scale(0.4); } [data-theme="light"] .theme-toggle__icon--light { opacity: 1; transform: scale(1); } /* Label text ("Light" / "Dark") */ .theme-toggle__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); user-select: none; transition: color 0.2s ease; } /* ── Auth Card ──────────────────────────────────────────────────── */ .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 0 0 1px rgba(218, 155, 38, 0.04), 0 24px 56px rgba(0, 0, 0, 0.55), 0 0 90px rgba(218, 155, 38, 0.028); animation: cardReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } [data-theme="light"] .auth-card { box-shadow: 0 0 0 1px rgba(176, 120, 20, 0.05), 0 16px 40px rgba(0, 0, 0, 0.1), 0 0 60px rgba(176, 120, 20, 0.04); } @keyframes cardReveal { from { opacity: 0; transform: translateY(26px) scale(0.975); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── Card Header ────────────────────────────────────────────────── */ .auth-header { display: flex; align-items: center; gap: 18px; padding: 28px 34px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .auth-header__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--amber-soft); border: 1px solid rgba(218, 155, 38, 0.22); flex-shrink: 0; color: var(--amber); font-size: 22px; } [data-theme="light"] .auth-header__icon { border-color: rgba(176, 120, 20, 0.2); } .auth-header__title { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); line-height: 1.2; } .auth-header__sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-top: 4px; letter-spacing: 0.04em; text-transform: uppercase; } /* ── Panel Label ────────────────────────────────────────────────── */ .panel-label { display: flex; align-items: center; gap: 12px; padding: 18px 34px 0; } .panel-label__text { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .panel-label__bar { flex: 1; height: 1px; background: var(--border); } /* ── Auth Body ──────────────────────────────────────────────────── */ .auth-body { padding: 24px 34px 32px; } /* ── Panel Transitions ──────────────────────────────────────────── */ .auth-panel { display: none; } .auth-panel.active { display: block; animation: panelSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both; } .auth-panel.slide-back.active { animation-name: panelSlideInBack; } @keyframes panelSlideIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } } @keyframes panelSlideInBack { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } } /* ── Alert ──────────────────────────────────────────────────────── */ .auth-alert { display: none; align-items: flex-start; gap: 10px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; padding: 12px 15px; border-radius: var(--radius-input); margin-bottom: 20px; animation: alertIn 0.22s ease both; } .auth-alert.show { display: flex; } .auth-alert i { flex-shrink: 0; margin-top: 2px; font-size: 13px; } /* Dark alerts */ .auth-alert--danger { background: rgba(224, 82, 82, 0.1); border: 1px solid rgba(224, 82, 82, 0.22); color: #f08888; } .auth-alert--success { background: rgba(71, 171, 115, 0.1); border: 1px solid rgba(71, 171, 115, 0.22); color: #6fcf97; } .auth-alert--info { background: rgba(218, 155, 38, 0.1); border: 1px solid rgba(218, 155, 38, 0.22); color: var(--amber-bright); } /* Light alerts — richer contrast */ [data-theme="light"] .auth-alert--danger { background: rgba(192, 57, 43, 0.08); border-color: rgba(192, 57, 43, 0.25); color: #a93226; } [data-theme="light"] .auth-alert--success { background: rgba(30, 132, 73, 0.08); border-color: rgba(30, 132, 73, 0.25); color: #1a7a40; } [data-theme="light"] .auth-alert--info { background: rgba(176, 120, 20, 0.08); border-color: rgba(176, 120, 20, 0.25); color: var(--amber); } @keyframes alertIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ── Field Group ────────────────────────────────────────────────── */ .field-group { margin-bottom: 18px; } .field-label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; } .field-wrap { position: relative; } .field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-muted); font-size: 14px; transition: color var(--transition); display: flex; align-items: center; } .field-wrap:focus-within .field-icon { color: var(--amber); } .field-input { display: block; width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-input); padding: 13px 14px 13px 42px; font-family: var(--font-mono); font-size: 13px; color: var(--text); outline: none; transition: border-color var(--transition), box-shadow var(--transition), background-color 0.35s ease, color 0.35s ease; -webkit-appearance: none; appearance: none; } .field-input::placeholder { color: var(--text-muted); } .field-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); } .field-input--pw { padding-right: 44px; } /* Password show/hide toggle */ .pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 6px; display: flex; align-items: center; font-size: 14px; transition: color var(--transition); line-height: 1; } .pw-toggle:hover, .pw-toggle:focus { color: var(--amber); outline: none; } /* ── Checkbox Row ───────────────────────────────────────────────── */ .field-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 12px; } .check-label { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); cursor: pointer; user-select: none; line-height: 1; } .check-box { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); cursor: pointer; position: relative; flex-shrink: 0; transition: border-color var(--transition), background var(--transition); } .check-box:checked { background: var(--amber); border-color: var(--amber); } .check-box:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: 2px solid #ffffff; border-top: none; border-left: none; transform: rotate(45deg); } .check-box:focus-visible { box-shadow: 0 0 0 3px var(--amber-soft); outline: none; } /* ── Link Button ────────────────────────────────────────────────── */ .link-btn { background: none; border: none; font-family: var(--font-mono); font-size: 12px; color: var(--amber); cursor: pointer; padding: 0; letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-amber); transition: color var(--transition), text-decoration-color var(--transition); white-space: nowrap; } .link-btn:hover, .link-btn:focus { color: var(--text); text-decoration-color: var(--border); outline: none; } /* ── Submit Button ──────────────────────────────────────────────── */ .btn-submit { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 14px; background: var(--amber); color: #0a0c0e; border: none; border-radius: var(--radius-btn); font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; position: relative; overflow: hidden; transition: background var(--transition), transform 0.12s, box-shadow var(--transition); } .btn-submit::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, transparent 55%); pointer-events: none; } .btn-submit:hover:not(:disabled) { background: var(--amber-bright); box-shadow: 0 6px 28px var(--amber-glow); transform: translateY(-1px); } .btn-submit:active:not(:disabled) { transform: translateY(1px); box-shadow: none; } .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } .btn-submit__icon { font-size: 14px; } .btn-submit__spinner { border-color: rgba(0, 0, 0, 0.2); border-top-color: #0a0c0e; } /* ── Panel Actions ──────────────────────────────────────────────── */ .panel-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; gap: 12px; } /* ── OTP Note ───────────────────────────────────────────────────── */ .otp-note { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim); line-height: 1.75; text-align: center; margin-bottom: 26px; } .otp-note strong { color: var(--amber); font-weight: 400; } /* ── OTP Input Boxes ────────────────────────────────────────────── */ .otp-inputs { display: flex; gap: 12px; justify-content: center; margin-bottom: 26px; } .otp-box { width: 62px; height: 68px; text-align: center; font-family: var(--font-mono); font-size: 28px; font-weight: 500; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; color: var(--text); outline: none; transition: border-color var(--transition), box-shadow var(--transition), color 0.35s ease, background-color 0.35s ease; caret-color: var(--amber); padding: 0; -moz-appearance: textfield; } .otp-box::-webkit-outer-spin-button, .otp-box::-webkit-inner-spin-button { -webkit-appearance: none; } .otp-box:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); } .otp-box.is-filled { border-color: var(--border-amber); color: var(--amber); } /* ── Card Footer ────────────────────────────────────────────────── */ .auth-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 34px; background: var(--surface-2); border-top: 1px solid var(--border); } .auth-footer__badge { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); letter-spacing: 0.06em; } .auth-footer__badge i { color: var(--green); font-size: 12px; } .auth-footer__version { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.07em; } /* ── Password Strength Meter (reset_password.php) ───────────────── */ .pw-strength { display: flex; align-items: center; gap: 10px; } .pw-strength__bar { flex: 1; height: 4px; background: var(--border); border-radius: 4px; overflow: hidden; } .pw-strength__fill { height: 100%; border-radius: 4px; width: 0; transition: width 0.3s ease, background 0.3s ease; } .pw-strength__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; min-width: 60px; text-align: right; } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 500px) { .auth-header, .auth-body, .auth-footer { padding-left: 22px; padding-right: 22px; } .panel-label { padding-left: 22px; padding-right: 22px; } .auth-header { padding-top: 22px; padding-bottom: 22px; } .otp-box { width: 52px; height: 58px; font-size: 24px; } .otp-inputs { gap: 8px; } }