/* MaxVapor — auth pages (login, logout, registration form, registration complete). Single CSS file shared by all four templates so the .mv-auth-card shell stays identical and only the body content varies. Pulls eyebrow + slab-headline vocabulary from edit_device.css and the focal-input centered-card shape from add_device.css, then drops the page into a full-viewport gradient because these pages render WITHOUT the dashboard shell (no sidebar, no top navbar). Built on mv-tokens.css. Scoped under .mv-auth to keep Material Dashboard's globals from leaking in. Native inputs get the explicit reset pattern from edit_heatprofile.css so MD's invisible-input rules don't blank our fields. */ .mv-auth, .mv-auth * { box-sizing: border-box; } /* ── Full-viewport page shell ─────────────────────────── */ .mv-auth { /* Anchor to the viewport so the card centers regardless of the surrounding markup the legacy MD include leaves behind. */ position: fixed; inset: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; font-family: var(--mv-font-body); color: var(--mv-fg1); letter-spacing: -0.005em; /* Subtle two-stop gradient using the design tokens — replaces the hero photos the MD-era pages relied on. The brand tint at the top gives the page a hint of warmth without dominating. */ background: radial-gradient(60% 40% at 50% 0%, rgba(76,175,80,.07) 0%, rgba(76,175,80,0) 70%), linear-gradient(180deg, var(--mv-bg) 0%, var(--mv-bg-2) 100%); } .mv-auth[data-theme="dark"] { background: radial-gradient(60% 40% at 50% 0%, rgba(76,175,80,.10) 0%, rgba(76,175,80,0) 70%), linear-gradient(180deg, var(--mv-bg) 0%, var(--mv-bg-2) 100%); } .mv-auth a { color: var(--mv-brand); text-decoration: none; } .mv-auth a:hover { text-decoration: underline; } /* ── Card shell (shared across all four pages) ────────── */ .mv-auth .mv-auth-card { width: 100%; max-width: 420px; background: var(--mv-surface); border: 1px solid var(--mv-divider); border-radius: var(--mv-r-card); box-shadow: var(--mv-shadow-card-lg); padding: 32px 28px 28px; margin: 0 auto; } /* ── Brand / wordmark stripe at the top of every card ──── */ .mv-auth .mv-auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 22px; } .mv-auth .mv-auth-brand .mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--mv-brand) 0%, var(--mv-brand-600) 100%); box-shadow: var(--mv-shadow-success); } .mv-auth .mv-auth-brand .mark .material-icons { font-size: 30px; } .mv-auth .mv-auth-brand .wordmark { font-family: var(--mv-font-slab); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--mv-fg1); line-height: 1; } .mv-auth .mv-auth-brand .product { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mv-fg3); font-weight: 600; } /* ── Page-specific headline (under the brand stripe) ──── */ .mv-auth .mv-auth-head { text-align: center; margin-bottom: 22px; } .mv-auth .mv-auth-head .eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mv-brand-700); font-weight: 700; margin-bottom: 4px; } .mv-auth .mv-auth-head h1 { font-family: var(--mv-font-slab); font-size: 22px; line-height: 1.2; font-weight: 700; margin: 0; letter-spacing: -0.01em; color: var(--mv-fg1); } .mv-auth .mv-auth-head p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--mv-fg2); } /* ── Field stack ──────────────────────────────────────── */ .mv-auth .mv-fields { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; } .mv-auth .mv-field { display: flex; flex-direction: column; gap: 6px; } .mv-auth .mv-field .lbl { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mv-fg2); font-weight: 600; } .mv-auth .mv-field .hint { font-size: 12px; color: var(--mv-fg3); margin-top: 2px; line-height: 1.45; } .mv-auth .mv-field .hint ul { margin: 4px 0 0; padding-left: 18px; } /* Native inputs: explicit reset to defeat Material Dashboard's invisible-input rules (it relies on JS to make .bmd-form-group inputs visible). Pattern borrowed from edit_heatprofile.css. */ .mv-auth input[type="text"], .mv-auth input[type="email"], .mv-auth input[type="password"], .mv-auth input[type="username"] { position: static; opacity: 1; visibility: visible; pointer-events: auto; z-index: auto; -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; width: 100%; display: block; background: var(--mv-surface-2); border: 1px solid var(--mv-divider-2); border-radius: var(--mv-r-btn); color: var(--mv-fg1); padding: 12px 14px; font-family: var(--mv-font-body); font-size: 14.5px; font-weight: 500; line-height: 1.3; letter-spacing: 0; margin: 0; height: auto; transition: border-color .15s, box-shadow .15s, background .15s; } .mv-auth input[type="text"]::placeholder, .mv-auth input[type="email"]::placeholder, .mv-auth input[type="password"]::placeholder, .mv-auth input[type="username"]::placeholder { color: var(--mv-fg3); opacity: 1; } .mv-auth input[type="text"]:focus, .mv-auth input[type="email"]:focus, .mv-auth input[type="password"]:focus, .mv-auth input[type="username"]:focus { outline: none; border-color: var(--mv-brand); box-shadow: 0 0 0 3px rgba(76,175,80,.16); background: var(--mv-surface); } /* ── Errors (tinted danger pill above the form) ───────── */ .mv-auth .mv-errors { background: rgba(244,67,54,.10); border: 1px solid rgba(244,67,54,.30); color: var(--mv-danger); border-radius: var(--mv-r-btn); padding: 10px 14px; font-size: 13px; line-height: 1.45; margin-bottom: 16px; display: flex; align-items: flex-start; gap: 10px; } .mv-auth .mv-errors .material-icons { font-size: 18px; flex: 0 0 auto; margin-top: 1px; } .mv-auth .mv-errors ul { margin: 0; padding: 0; list-style: none; } .mv-auth .mv-errors li + li { margin-top: 2px; } .mv-auth .mv-errors strong { font-weight: 600; } /* Per-field errors (registration form) — small red caption under the input. */ .mv-auth .mv-field-errors { margin: 4px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--mv-danger); font-weight: 500; } .mv-auth .mv-field-errors li + li { margin-top: 2px; } /* ── Buttons ──────────────────────────────────────────── */ .mv-auth .mv-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .mv-auth .mv-btn { border: none; cursor: pointer; font-family: var(--mv-font-body); display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--mv-r-btn); padding: 13px 22px; font-size: 14.5px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; transition: transform .08s, box-shadow .15s, background .15s, filter .15s, color .15s, border-color .15s; width: 100%; } .mv-auth .mv-btn-primary { color: #fff; background: linear-gradient(180deg, var(--mv-brand) 0%, var(--mv-brand-600) 100%); box-shadow: var(--mv-shadow-success); } .mv-auth .mv-btn-primary:hover { filter: brightness(1.04); text-decoration: none; color: #fff; } .mv-auth .mv-btn-primary:active { transform: translateY(1px); } .mv-auth .mv-btn-ghost { background: transparent; color: var(--mv-fg2); border: 1px solid var(--mv-divider-2); } .mv-auth .mv-btn-ghost:hover { color: var(--mv-fg1); border-color: var(--mv-fg3); text-decoration: none; } /* ── Secondary inline links (forgot pw, sign-in cross-link) ───── */ .mv-auth .mv-auth-meta { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--mv-divider); text-align: center; font-size: 13px; color: var(--mv-fg2); display: flex; flex-direction: column; gap: 6px; } .mv-auth .mv-auth-meta a { font-weight: 600; color: var(--mv-brand-700); } .mv-auth .mv-auth-meta .muted { color: var(--mv-fg3); } /* ── Registration-complete icon glyph ─────────────────── */ .mv-auth .mv-auth-glyph { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: rgba(0,188,212,.12); color: var(--mv-info); border: 1px solid rgba(0,188,212,.22); } .mv-auth .mv-auth-glyph .material-icons { font-size: 32px; } /* ── Footer (small legal links under the card) ────────── */ .mv-auth .mv-auth-footer { margin-top: 22px; text-align: center; font-size: 12px; color: var(--mv-fg3); } .mv-auth .mv-auth-footer a { color: var(--mv-fg2); margin: 0 6px; } .mv-auth .mv-auth-footer a:hover { color: var(--mv-fg1); } /* ── Narrower viewports ───────────────────────────────── */ @media (max-width: 480px) { .mv-auth { padding: 16px 12px; } .mv-auth .mv-auth-card { padding: 24px 20px 22px; } .mv-auth .mv-auth-brand .mark { width: 48px; height: 48px; border-radius: 14px; } .mv-auth .mv-auth-brand .mark .material-icons { font-size: 26px; } .mv-auth .mv-auth-head h1 { font-size: 20px; } }