/* * Login modal + shared login form - the owner's Dialog pattern (title row * with the close button, subtitle, form, tinted footer band with the one * primary action and the "Don't have an account?" line), built from the * site's existing components. The shell lives in * auth/partials/login-modal.blade.php; the form content it shares with * the standalone /login page is auth/partials/login-form.blade.php. * Loaded site-wide from web.layouts.header since the modal can open from * any page's nav. * * The fields are the standard flow-form components, untouched: * .ipflow-field / .form-control / .password-field-wrap / .ipflow- * checkbox-row / .ipflow-field-error (flow-forms.css, web.css), which * flow-forms.css applies to .login-form the same way it does to * .ipflow-shell. Also reused: .btn.btn-primary.btn-md (web.css) and * .ipflow-dialog-close (flow-forms.css, the design system's inline * icon-only Close). Everything here is scoped to .login-form-* / * .login-modal-* and touches no shared rule. * * --login-pad is the horizontal padding of whatever box the form sits in * (the dialog, or the standalone page's card) - the footer band uses it * to run edge to edge of that box. */ /* ---- Dialog shell ---- */ .login-modal-dialog { --login-pad: var(--space-5, 24px); position: relative; border: none; background: var(--surface, #fff); border-radius: var(--radius-xl, 16px); box-shadow: var(--elevation-3, 0 8px 16px rgba(68, 85, 91, 0.18)); padding: var(--login-pad); width: 440px; max-width: calc(100vw - 2 * var(--space-4, 16px)); max-height: calc(100vh - 2 * var(--space-6, 32px)); overflow-y: auto; margin: auto; color: var(--ink, #44555b); } .login-modal-dialog::backdrop { /* surface-inverse (#333333) at 60% - the token is opaque, so the opacity is applied here rather than baked into a second token. */ background: rgba(51, 51, 51, 0.6); } @media (max-width: 767px) { .login-modal-dialog { width: calc(100vw - 2 * var(--space-4, 16px)); max-height: calc(100vh - 2 * var(--space-4, 16px)); } } /* The standalone /login page has no dialog around the form - it draws the same card itself so the footer band has a box to belong to. */ .login-form-stack--card { --login-pad: var(--space-5, 24px); padding: var(--login-pad); background: var(--surface, #fff); border: 1px solid var(--border, #dedede); border-radius: var(--radius-xl, 16px); } /* ---- Vertical rhythm ---- */ .login-form-stack { display: flex; flex-direction: column; gap: var(--space-5, 24px); } .login-form { display: flex; flex-direction: column; gap: var(--space-4, 16px); } /* .ipflow-field brings its own bottom margin for plain stacked forms; the gap above already spaces these. */ .login-form .ipflow-field { margin-bottom: 0; } /* The standard field box. Every flow-form page gets this from Bootstrap 3's .form-control (they load bootstrap3.min.css in their own ), but the modal renders on every page, and most pages - the homepage included - don't load Bootstrap at all, so .form-control is an unstyled class there and the inputs fell back to bare browser defaults. These are Bootstrap's own .form-control values, restated here so the modal's fields look exactly like the login page's; flow-forms.css then applies the same border/radius/focus rules it applies to .ipflow-shell fields. */ .login-form .form-control { display: block; width: 100%; box-sizing: border-box; height: 34px; padding: 6px 12px; font-family: inherit; font-size: 14px; line-height: 1.42857143; color: var(--ink, #44555b); background: var(--surface, #fff); background-image: none; border: 1px solid var(--border, #dedede); border-radius: var(--radius-md, 8px); box-shadow: none; } .login-form .form-control::placeholder { color: #999; opacity: 1; } .login-form-status { margin: 0; } /* ---- Title row + subtitle ---- */ .login-form-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); } /* h3 scale (22/28/500); font-family deliberately inherits web.css's h1-h4 rule so this heading matches every other heading on the live site. */ .login-form-title { margin: 0; font-size: var(--h3-size, 22px); line-height: var(--h3-line-height, 28px); font-weight: var(--h3-weight, 500); color: var(--ink, #44555b); } /* Programmatic focus target when the modal opens - same treatment as .ipflow-heading[tabindex="-1"]:focus in flow-forms.css. */ .login-form-title[tabindex="-1"]:focus { outline: none; } .login-form-subtitle { margin: 0; color: var(--ink, #44555b); } /* ---- Remember me / Forgot password ---- */ .login-form-options { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-1, 4px) var(--space-3, 12px); } /* ---- Footer band: Log in (Primary) + "Don't have an account?" ---- */ .login-form-footer { display: flex; flex-direction: column; align-items: center; gap: var(--space-3, 12px); margin: var(--space-2, 8px) calc(-1 * var(--login-pad, 0px)) calc(-1 * var(--login-pad, 0px)); padding: var(--space-5, 24px) var(--login-pad, var(--space-5, 24px)); background: var(--surface-100, #f2f2f2); border-radius: 0 0 var(--radius-xl, 16px) var(--radius-xl, 16px); } /* web.css's base .btn adds a 10px vertical margin; the band's own padding/gap spaces this button. */ .login-form-submit { position: relative; margin: 0; } .login-form-footer-note { margin: 0; text-align: center; } .login-form-spinner { display: none; width: 14px; height: 14px; margin-right: var(--space-2, 8px); border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: login-modal-spin .6s linear infinite; } .login-form-submit.is-loading .login-form-spinner { display: inline-block; } @media (prefers-reduced-motion: reduce) { .login-form-spinner { animation: none; } } @keyframes login-modal-spin { to { transform: rotate(360deg); } }