/* * DealWorthIt auth pages (login / register / forgot) — split-panel redesign. * Scoped .auth-* classes, token-driven (themes/tokens.css). Also lightly restyles * the Metronic form vocabulary INSIDE .auth-form-side so the register form (which * keeps its FormValidation / password-meter hooks) matches the new look without * changing any JS-bound markup. White-label safe (only auth pages use these). */ /* Full-bleed split: the panel BACKGROUNDS always reach the viewport edges (no gutters at any width). The CONTENT columns inside each panel are capped and anchor to the panel seam, so on large screens / zoomed out the brand copy and the form stay composed together in the middle while the green and light surfaces keep growing outward. Content never scales with the viewport. */ /* minmax(0,…) on both tracks: a bare 1fr keeps an `auto` minimum, which lets the form column blow past the viewport on narrow screens instead of shrinking. The single-column + padding overrides live at the end of this file so they win over the base .auth-form-side rule. flex-shrink:0 is load-bearing: Metronic makes a column flex container, so this grid is a flex item and would otherwise be SHRUNK to the body's height (100vh). Any form taller than the viewport — register, or a short window with devtools open — then spills out below panels frozen at 100vh, showing the body background under the brand panel. Refusing to shrink lets the grid take its full content height so both panels run the length of the page. */ .auth-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); min-height:100vh; flex-shrink:0; } /* Legacy Metronic auth pages (register_trial / reset / twofactor) have no full-bleed color panels — they keep a centered canvas cap on their outer flex row so content doesn't drift apart on ultrawide screens. */ .auth-legacy-cap{ width:100%; max-width: var(--dwi-page-auth, 1440px); margin-inline:auto; } /* ── Brand panel ── Background bleeds to the left viewport edge; the content column is capped at 560px and right-anchored (toward the seam) so it stays adjacent to the form at any width. Below the cap this is identical to a padded panel. */ .auth-brand{ position:relative; background:linear-gradient(150deg, var(--dwi-color-primary-strong) 0%, var(--dwi-color-primary) 55%, var(--dwi-color-primary-strong) 100%); color:#fff; padding:48px 54px; display:flex; flex-direction:column; align-items:flex-end; overflow:hidden; } .auth-logo, .auth-foot{ width:100%; max-width:560px; } /* Dotted texture over the whole panel + one soft disc off the top-right. */ .auth-brand::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1.4px); background-size:26px 26px; pointer-events:none; } .auth-brand::after{ content:""; position:absolute; width:640px; height:640px; border-radius:50%; background:rgba(255,255,255,.045); top:-200px; right:-260px; pointer-events:none; } .auth-logo{ display:flex; align-items:center; gap:11px; position:relative; z-index:1; } .auth-logo img{ width:32px; height:32px; } .auth-wm{ font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#fff; } .auth-brand-body{ margin:auto 0; position:relative; z-index:1; width:100%; max-width:560px; } .auth-brand-body h2, .auth-lead{ max-width:440px; } .auth-brand-body h2{ font-size:34px; font-weight:700; letter-spacing:-.02em; line-height:1.18; margin:0; color:#fff; } .auth-lead{ font-size:14px; line-height:1.6; color:rgba(255,255,255,.72); margin-top:14px; } /* Value props read as a hairline-ruled table: claim on the left, the number that backs it right-aligned in mono. Rules run edge to edge of the measure. */ .auth-props{ margin-top:30px; display:flex; flex-direction:column; max-width:440px; } .auth-prop{ display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid rgba(255,255,255,.14); } .auth-prop:last-child{ border-bottom:1px solid rgba(255,255,255,.14); } .auth-prop .ck{ width:18px; height:18px; flex:none; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; } .auth-prop .ck svg{ width:9px; height:9px; stroke:#fff; fill:none; stroke-width:3.4; } .auth-prop .pt{ font-size:13.5px; font-weight:500; color:rgba(255,255,255,.92); } .auth-prop .n{ margin-left:auto; font-family: var(--dwi-font-mono); font-size:11px; color:rgba(255,255,255,.5); } .auth-foot{ position:relative; z-index:1; font-size:11.5px; color:rgba(255,255,255,.45); } /* ── Form side ── Background bleeds to the right viewport edge. The card keeps its fixed 430px measure; from 1200px up it anchors toward the seam (next to the brand copy) instead of drifting to the middle of an ever-growing panel. */ .auth-form-side{ display:flex; flex-direction:column; padding:38px 44px; background: var(--dwi-color-surface); min-height:100vh; } /* The "already have an account?" line rides the top-right corner of the pane, out of the form's way; the card itself centers in the leftover space. */ .auth-alt{ flex:none; display:flex; justify-content:flex-end; align-items:center; gap:9px; font-size:12.5px; color: var(--dwi-color-muted); } .auth-alt a{ color: var(--dwi-color-primary); font-weight:600; text-decoration:none; } .auth-alt a:hover{ text-decoration:underline; } .auth-card{ width:100%; max-width:376px; margin:auto; padding:30px 0; } .auth-head{ margin-bottom:2px; } .auth-head h1{ font-size:24px; font-weight:600; color: var(--dwi-color-text); letter-spacing:-.02em; } .auth-helper{ font-size:13px; color: var(--dwi-color-muted); margin:6px 0 0; line-height:1.55; } /* First field after the heading block carries the gap the .auth-gbtn would otherwise provide on pages with no social/OR row (forgot password). */ .auth-head + .auth-field{ margin-top:22px; } /* Google / secondary button (clean + Metronic) */ .auth-gbtn, .auth-form-side .btn-light-primary{ width:100%; display:inline-flex !important; align-items:center; justify-content:center; gap:10px; height:44px; margin-top:22px; border:1px solid var(--dwi-color-line) !important; border-radius:10px !important; background: var(--dwi-color-surface) !important; font-family:inherit; font-size:13.5px; font-weight:600; color: var(--dwi-color-text) !important; cursor:pointer; transition: all .15s; text-decoration:none; } .auth-gbtn:hover, .auth-form-side .btn-light-primary:hover{ border-color: var(--dwi-color-muted-soft) !important; background: var(--dwi-color-rail) !important; } .auth-gbtn img, .auth-gbtn svg, .auth-form-side .btn-light-primary img{ width:16px; height:16px; margin:0; } /* OR divider */ .auth-or{ display:flex; align-items:center; gap:12px; margin:18px 0; color: var(--dwi-color-muted-soft); font-size:10.5px; font-weight:600; letter-spacing:.1em; } .auth-or::before, .auth-or::after{ content:""; height:1px; flex:1; background: var(--dwi-color-line-soft); } /* Fields — clean markup (login / forgot) */ .auth-field{ margin-bottom:14px; } .auth-field > label{ display:block; font-size:12px; font-weight:600; color: var(--dwi-color-text-secondary); margin-bottom:6px; } .auth-field .opt{ color: var(--dwi-color-muted-soft); font-weight:400; font-size:12px; } .auth-ip{ position:relative; } .auth-ip input{ width:100%; height:42px; border:1px solid var(--dwi-color-line); border-radius:10px; background: var(--dwi-color-surface); font-family:inherit; font-size:13.5px; color: var(--dwi-color-text); padding:0 13px; outline:none; transition: all .15s; } .auth-ip:has(.auth-eye) input{ padding-right:42px; } .auth-ip input::placeholder{ color: var(--dwi-color-muted-soft); } .auth-ip input:focus{ border-color: var(--dwi-color-primary); box-shadow:0 0 0 3px var(--dwi-color-primary-soft); } .auth-eye{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:30px; height:30px; border:none; background:none; cursor:pointer; display:grid; place-items:center; border-radius:7px; } .auth-eye:hover{ background: var(--dwi-color-line-soft); } .auth-eye svg{ width:17px; height:17px; stroke: var(--dwi-color-muted-soft); fill:none; stroke-width:2; } /* Fields — Metronic vocabulary (register), restyled */ .auth-form-side .form-label{ font-size:13px !important; font-weight:600 !important; color: var(--dwi-color-text-secondary) !important; margin-bottom:7px !important; } .auth-form-side .form-control{ height:46px; border:1px solid var(--dwi-color-line) !important; border-radius:11px !important; background: var(--dwi-color-surface) !important; font-size:14.5px; color: var(--dwi-color-text) !important; } .auth-form-side .form-control:focus{ border-color: var(--dwi-color-primary) !important; box-shadow:0 0 0 3px var(--dwi-color-primary-soft) !important; } .auth-form-side .link-primary{ color: var(--dwi-color-primary) !important; } .auth-form-side .form-check-input:checked{ background-color: var(--dwi-color-primary) !important; border-color: var(--dwi-color-primary) !important; } /* Register's terms row: Metronic check markup, mockup proportions. */ .auth-form-side .auth-terms{ display:flex; align-items:flex-start; gap:9px; font-size:12px; color: var(--dwi-color-muted); line-height:1.5; cursor:pointer; } .auth-form-side .auth-terms .form-check-input{ margin:1px 0 0; width:16px; height:16px; border-radius:5px; flex:none; } .auth-form-side .auth-terms a{ font-weight:600; text-decoration:none; } .auth-form-side .auth-terms a:hover{ text-decoration:underline; } /* Submit (clean + Metronic) */ .auth-submit, .auth-form-side .theme-btn{ width:100%; min-height:44px; border:none !important; border-radius:10px !important; background: var(--dwi-color-primary) !important; color:#fff !important; font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition: all .15s; } .auth-submit:hover, .auth-form-side .theme-btn:hover{ background: var(--dwi-color-primary-strong) !important; } .auth-submit:disabled{ background: var(--dwi-color-primary-soft) !important; cursor:not-allowed; } a.auth-submit{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; } /* Login options */ .auth-login-opts{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 20px; gap:12px; flex-wrap:wrap; } .auth-remember{ display:flex; align-items:center; gap:8px; font-size:12.5px; color: var(--dwi-color-muted); cursor:pointer; user-select:none; } /* Custom checkbox: the real input stays in the DOM (name="rememberme" is a backend contract) but is visually replaced by .auth-box. */ .auth-remember input{ position:absolute; opacity:0; pointer-events:none; } .auth-box{ width:16px; height:16px; flex:none; border-radius:5px; border:1.5px solid var(--dwi-color-muted-soft); background: var(--dwi-color-surface); display:grid; place-items:center; transition: all .15s; } .auth-box svg{ width:9px; height:9px; stroke:#fff; fill:none; stroke-width:3.4; opacity:0; transition: opacity .12s; } .auth-remember input:checked + .auth-box, .auth-terms input:checked + .auth-box{ background: var(--dwi-color-primary); border-color: var(--dwi-color-primary); } .auth-remember input:checked + .auth-box svg, .auth-terms input:checked + .auth-box svg{ opacity:1; } .auth-remember input:focus-visible + .auth-box, .auth-terms input:focus-visible + .auth-box{ box-shadow:0 0 0 3px var(--dwi-color-primary-soft); } .auth-forgot{ font-size:12.5px; font-weight:600; color: var(--dwi-color-primary); text-decoration:none; } .auth-forgot:hover{ text-decoration:underline; } .auth-back{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color: var(--dwi-color-muted); text-decoration:none; margin-top:16px; } .auth-back:hover{ color: var(--dwi-color-text); } .auth-back svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.4; } .auth-footnote{ text-align:center; font-size:11.5px; color: var(--dwi-color-muted-soft); margin-top:14px; } .auth-footnote .sep{ margin:0 6px; } /* Lock-icon reassurance under the sign-in button. */ .auth-secnote{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:11px; color: var(--dwi-color-muted-soft); margin-top:16px; } .auth-secnote svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; } .auth-hint{ font-size:12px; color: var(--dwi-color-muted-soft); margin-top:8px; } .auth-center{ text-align:center; } /* Status screens (activation result) */ .auth-status{ text-align:center; } .auth-status-badge{ width:64px; height:64px; border-radius:50%; background: var(--dwi-color-primary-soft); display:grid; place-items:center; margin:0 auto 22px; } .auth-status-badge svg{ width:30px; height:30px; stroke: var(--dwi-color-primary); fill:none; stroke-width:2; } .auth-status-badge.is-warn{ background: var(--dwi-color-warning-soft); } .auth-status-badge.is-warn svg{ stroke: var(--dwi-color-warning); } .auth-status h1{ font-size:24px; font-weight:700; color: var(--dwi-color-text); letter-spacing:-.02em; } .auth-status p{ font-size:14.5px; color: var(--dwi-color-muted); margin:10px 0 26px; } /* ── Narrow screens ── Brand panel drops away and the form takes the full width. Declared last so these padding/column values beat the base rules above at equal specificity. */ @media (max-width:880px){ .auth-split{ grid-template-columns:minmax(0,1fr); } .auth-brand{ display:none !important; } .auth-form-side{ padding:28px 22px; } .auth-card{ max-width:376px; padding:20px 0; } }