/* wwwroot/css/login.css — link from App.razor : Brand colours (from the Hurley's wordmark): orange #ef8903 (primary action, accents) grey #53585a (wordmark tagline / secondary text, links) cream #fdeacd → #f7c377 (brand panel fade) */ .login-shell { display: flex; min-height: 100vh; font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; background: #f8fafb; } /* ---- Brand panel (left) ---- */ .login-brand { position: relative; width: 44%; box-sizing: border-box; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; /* white fading to the brand orange towards the bottom */ background: linear-gradient(180deg, #ffffff 0%, #fffaf3 46%, #fdeacd 78%, #f7c377 100%); border-right: 1px solid #f0e3d2; } /* the wordmark sits directly on the light panel — no plate, no recolouring */ .login-brand > img { display: block; align-self: flex-start; width: 249px; height: 60px; } /* 415×100 @ 0.6 */ .login-brand-hero { display: flex; flex-direction: column; gap: 20px; } .login-brand-rule { width: 56px; height: 4px; border-radius: 2px; background: #ef8903; } .login-brand-hero h1 { margin: 0; color: #1b1c20; font-size: 38px; font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; } .login-brand-hero p { margin: 0; max-width: 340px; color: #53585a; font-size: 16px; line-height: 1.55; } .login-brand-foot { color: rgba(27, 28, 32, 0.5); font-size: 13px; } /* ---- Form pane (right) ---- */ .login-pane { flex: 1; display: flex; align-items: center; justify-content: center; } .login-pane-inner { width: 400px; display: flex; flex-direction: column; gap: 28px; } .login-header h3 { margin: 0 0 8px; font-size: 28px; font-weight: 700; color: #1b1c20; } .login-header p { margin: 0; font-size: 15px; color: #53585a; } .login-form { display: flex; flex-direction: column; gap: 20px; } .login-field { display: flex; flex-direction: column; gap: 8px; } .login-field > label { font-size: 13px; font-weight: 600; color: #45494f; } .login-input { box-sizing: border-box; width: 100%; height: 52px; padding: 0 16px; font-family: inherit; font-size: 15px; color: #1b1c20; background: #fff; border: 1px solid #dbe0e6; border-radius: 10px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .login-input:focus { border-color: #ef8903; box-shadow: 0 0 0 3px rgba(239, 137, 3, 0.20); } .login-row { display: flex; align-items: center; justify-content: space-between; } .login-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #45494f; cursor: pointer; } .login-check input { width: 17px; height: 17px; margin: 0; accent-color: #ef8903; } .login-link { font-size: 14px; font-weight: 600; color: #53585a; text-decoration: none; } .login-link:hover { color: #ef8903; text-decoration: underline; } .login-submit { height: 52px; font-family: inherit; font-size: 16px; font-weight: 600; color: #fff; background: #ef8903; border: none; border-radius: 10px; cursor: pointer; transition: background 0.15s; } .login-submit:hover { background: #d47702; } .login-submit:active { background: #b56502; } .login-footer { display: flex; justify-content: center; gap: 6px; font-size: 14px; color: #53585a; border-top: 1px solid #e3eaf2; padding-top: 20px; } /* validation text from Blazor's .text-danger */ .login-field .text-danger { font-size: 13px; color: #91080a; } /* ---- Alerts (status messages) ---- */ .login-alert { padding: 14px 16px; border-radius: 10px; border: 1px solid; font-size: 14px; line-height: 1.5; color: #1b1c20; } .login-alert b, .login-alert strong { font-weight: 700; } .login-alert a { color: inherit; font-weight: 600; } .login-alert p { margin: 0 0 8px; } .login-alert p:last-child { margin-bottom: 0; } .login-alert-success { background: #eef7f0; border-color: #bfe0c8; color: #0f5223; } .login-alert-danger { background: #fdf0ef; border-color: #f0c4c1; color: #91080a; } .login-alert-warning { background: #fdf6e9; border-color: #f0dcb4; color: #7a5203; } .login-alert-neutral { background: #f2f5f8; border-color: #dbe0e6; color: #45494f; } /* ---- Action buttons (rows of primary / outline / danger; anchors or buttons) ---- */ .login-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .login-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: 10px; font-family: inherit; font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .login-btn-primary { color: #fff; background: #ef8903; } .login-btn-primary:hover { background: #d47702; } .login-btn-outline { color: #45494f; background: transparent; border-color: #dbe0e6; } .login-btn-outline:hover { color: #ef8903; border-color: #ef8903; } .login-btn-danger { color: #fff; background: #d03b3b; } .login-btn-danger:hover { background: #b32f2f; } /* ---- Authenticator enrolment pieces ---- */ .login-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 20px; } .login-steps > li { color: #45494f; font-size: 14px; line-height: 1.55; } .login-steps > li > p { margin: 0 0 10px; } .login-steps > li > p:last-child { margin-bottom: 0; } .login-qr { display: inline-block; padding: 10px; margin-bottom: 10px; background: #fff; border: 1px solid #dbe0e6; border-radius: 10px; } .login-qr img { display: block; } .login-key { display: inline-block; padding: 8px 12px; font-family: Consolas, 'SF Mono', Menlo, monospace; font-size: 14px; color: #1b1c20; background: #f2f5f8; border: 1px solid #dbe0e6; border-radius: 8px; } .login-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; padding: 16px; background: #f2f5f8; border: 1px solid #dbe0e6; border-radius: 10px; font-family: Consolas, 'SF Mono', Menlo, monospace; font-size: 15px; color: #1b1c20; } /* plain body text on account pages */ .login-text { margin: 0; font-size: 14px; line-height: 1.55; color: #45494f; } .login-text a { color: #53585a; font-weight: 600; } .login-text a:hover { color: #ef8903; } /* ---- Dark variant ---- */ @media (prefers-color-scheme: dark) { .login-shell { background: #17181c; } /* panel stays light so the wordmark keeps its own colours */ .login-brand { background: linear-gradient(180deg, #f6f7f9 0%, #f6efe6 46%, #f2ddbe 78%, #e8b164 100%); border-right-color: #2b2d33; } .login-header h3 { color: #f8fafb; } .login-header p { color: #9aa2ad; } .login-field > label { color: #c6ccd4; } .login-input { color: #f8fafb; background: #212329; border-color: #3a3d44; } .login-input:focus { border-color: #ef8903; box-shadow: 0 0 0 3px rgba(239, 137, 3, 0.28); } .login-check { color: #c6ccd4; } .login-link { color: #f5a53d; } .login-link:hover { color: #ffc178; } .login-submit:hover { background: #f79b21; } .login-submit:active { background: #d47702; } .login-footer { color: #9aa2ad; border-top-color: #2b2d33; } .login-field .text-danger { color: #ffb4aa; } .login-alert-success { background: #17241a; border-color: #2c4a34; color: #9fd4ac; } .login-alert-danger { background: #2a1a19; border-color: #55302e; color: #ffb4aa; } .login-alert-warning { background: #292115; border-color: #55452a; color: #f0ce8e; } .login-alert-neutral { background: #212329; border-color: #3a3d44; color: #c6ccd4; } .login-btn-outline { color: #c6ccd4; border-color: #3a3d44; } .login-btn-outline:hover { color: #f5a53d; border-color: #f5a53d; } .login-steps > li { color: #c6ccd4; } /* QR stays on white so scanners always read it */ .login-qr { background: #fff; border-color: #3a3d44; } .login-key { color: #f8fafb; background: #212329; border-color: #3a3d44; } .login-codes { color: #f8fafb; background: #212329; border-color: #3a3d44; } .login-text { color: #9aa2ad; } .login-text a { color: #f5a53d; } .login-text a:hover { color: #ffc178; } } /* ---- Responsive ---- */ /* hidden by default; the breakpoint below reveals it (must precede the media query, or its equal-specificity display:none would win over the mobile display:block) */ .login-pane-logo { display: none; } @media (max-width: 900px) { .login-brand { display: none; } .login-pane { padding: 32px 24px; } .login-pane-inner { width: 100%; max-width: 400px; } /* wordmark moves into the form pane when the brand panel is hidden */ .login-pane-logo { display: block; } .login-pane-logo img { display: block; width: 208px; height: 50px; } }