/* ============================================================================ NerdBerry — unified sign-in This page is public and is served to staff, customers and vendors, so it cannot use the admin asset pipeline. It consumes the design tokens directly and defines a fallback for every one it uses, so the page still renders correctly if `nerdberry_ui` is ever switched off or removed. The dark theme is applied to by an inline script before first paint, not to , because there is no signed-in user whose preference we could have resolved server-side. ========================================================================= */ /* This page is standalone — it does not load NerdBerry's reset or Bootstrap, so nothing has set border-box for us. Without it, `width: 100%` on a padded, bordered input resolves 26px wider than the buttons beside it. */ .nb-auth, .nb-auth *, .nb-auth *::before, .nb-auth *::after { box-sizing: border-box; } .nb-auth { /* Fallbacks mirror the token defaults; if tokens.css loaded, it wins. */ --a-bg: var(--nb-surface-app, #f7f8fa); --a-card: var(--nb-surface-raised, #ffffff); --a-text: var(--nb-text-primary, #111827); --a-muted: var(--nb-text-muted, #6b7280); --a-border: var(--nb-border-default, #e4e7ec); --a-border-subtle: var(--nb-border-subtle, #eef1f4); --a-accent: var(--nb-accent, #9c2bc0); --a-accent-hover: var(--nb-accent-hover, #82219e); /* Link text is a separate token from the button surface. The accent is mixed to sit under white button labels, which makes it far too dark to read AS text on the card in dark mode (2.9:1). */ --a-link: var(--nb-text-link, #82219e); --a-on-accent: var(--nb-text-on-brand, #ffffff); --a-danger-bg: var(--nb-danger-bg, #fef3f2); --a-danger-text: var(--nb-danger-text, #b42318); --a-danger-border: var(--nb-danger-border, #fecdca); --a-hover: var(--nb-surface-hover, #f5f6f8); --a-radius: var(--nb-radius-lg, 12px); margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-text); font-family: var(--nb-font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } html.nb-theme-dark .nb-auth { --a-bg: #0d1117; --a-card: #151b24; --a-text: #e6edf5; --a-muted: #8494a8; --a-border: #2a3543; --a-border-subtle: #212a36; --a-accent: #a736cc; --a-accent-hover: #b241d9; --a-link: #e2aaf8; --a-hover: #1e2631; --a-danger-bg: rgba(240, 68, 56, 0.14); --a-danger-text: #fda29b; --a-danger-border: rgba(240, 68, 56, 0.32); } /* --- Shell --------------------------------------------------------------- */ .nb-auth-shell { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 32px 16px; } .nb-auth-card { width: 100%; max-width: 400px; background: var(--a-card); border: 1px solid var(--a-border-subtle); border-radius: var(--a-radius); padding: 32px; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04); } html.nb-theme-dark .nb-auth-card { box-shadow: none; } .nb-auth-brand { margin-bottom: 28px; text-align: center; } /* Markup comes from NerdBerry's get_dark_company_logo(), which emits an wrapping an , or a text logo (.logo-text) when no file is configured. */ .nb-auth-brand .logo { display: inline-block; max-width: 100%; } .nb-auth-brand img { max-height: 44px; max-width: 100%; height: auto; } .nb-auth-brand .logo-text { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--a-text); text-decoration: none; } .nb-auth-footnote { margin: 24px 0 0; font-size: 12px; color: var(--a-muted); } /* --- Type ---------------------------------------------------------------- */ .nb-auth-title { margin: 0 0 6px; font-size: 21px; font-weight: 650; letter-spacing: -0.015em; } .nb-auth-subtitle { margin: 0 0 24px; font-size: 14px; color: var(--a-muted); } .nb-auth-identity { font-weight: 600; color: var(--a-text); word-break: break-all; } .nb-auth-identity-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; padding: 9px 12px; font-size: 14px; background: var(--a-hover); border: 1px solid var(--a-border-subtle); border-radius: var(--nb-radius-md, 8px); } .nb-auth-change { flex: none; font-size: 13px; font-weight: 600; color: var(--a-link); text-decoration: none; } .nb-auth-change:hover { text-decoration: underline; } .nb-auth-realm-badge { margin: -10px 0 20px; font-size: 13px; color: var(--a-muted); } /* --- Fields -------------------------------------------------------------- */ .nb-auth-form { margin: 0; } .nb-auth-field { margin-bottom: 18px; } .nb-auth-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; } .nb-auth-field input[type="email"], .nb-auth-field input[type="password"], .nb-auth-field input[type="text"] { display: block; width: 100%; height: 42px; padding: 0 12px; font: inherit; font-size: 15px; color: var(--a-text); background: var(--a-card); border: 1px solid var(--a-border); border-radius: var(--nb-radius-md, 8px); outline: none; transition: border-color .12s ease, box-shadow .12s ease; } .nb-auth-field input:focus { border-color: var(--a-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-accent) 22%, transparent); } .nb-auth-field.has-error input { border-color: var(--a-danger-border); } .nb-auth-error { margin: 6px 0 0; font-size: 13px; color: var(--a-danger-text); } /* Reveal control sits inside the field, so the field keeps its full width. */ .nb-auth-password-wrap { position: relative; } .nb-auth-password-wrap input { padding-right: 44px; } .nb-auth-reveal { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; background: none; border: 0; border-radius: 6px; cursor: pointer; opacity: .6; } .nb-auth-reveal:hover { opacity: 1; background: var(--a-hover); } .nb-auth-reveal::before { content: ""; display: block; width: 18px; height: 18px; margin: 0 auto; background: currentColor; -webkit-mask: var(--eye) center / contain no-repeat; mask: var(--eye) center / contain no-repeat; --eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } .nb-auth-reveal.is-shown::before { --eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.9 17.9A10.1 10.1 0 0 1 12 19c-6.4 0-10-7-10-7a18.5 18.5 0 0 1 5.1-5.9m3.2-1A10.1 10.1 0 0 1 12 5c6.4 0 10 7 10 7a18.5 18.5 0 0 1-2.2 3.2M1 1l22 22'/%3E%3C/svg%3E"); } /* --- Row: remember / forgot ---------------------------------------------- */ .nb-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; font-size: 13px; } .nb-auth-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; cursor: pointer; } .nb-auth-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--a-accent); } .nb-auth-forgot { font-weight: 600; color: var(--a-link); text-decoration: none; } .nb-auth-forgot:hover { text-decoration: underline; } /* --- Submit -------------------------------------------------------------- */ .nb-auth-submit { display: block; width: 100%; height: 42px; font: inherit; font-size: 15px; font-weight: 600; color: var(--a-on-accent); background: var(--a-accent); border: 1px solid var(--a-accent); border-radius: var(--nb-radius-md, 8px); cursor: pointer; transition: background-color .12s ease; } .nb-auth-submit:hover { background: var(--a-accent-hover); border-color: var(--a-accent-hover); } .nb-auth-submit:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; } /* --- Chooser ------------------------------------------------------------- */ .nb-auth-realms { margin: 0 0 18px; padding: 0; list-style: none; } .nb-auth-realms li + li { margin-top: 8px; } .nb-auth-realm { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; font: inherit; text-align: left; color: var(--a-text); background: var(--a-card); border: 1px solid var(--a-border); border-radius: var(--nb-radius-md, 8px); cursor: pointer; transition: border-color .12s ease, background-color .12s ease; } .nb-auth-realm:hover { background: var(--a-hover); border-color: var(--a-accent); } .nb-auth-realm:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; } .nb-auth-realm-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } .nb-auth-realm-name { font-weight: 600; font-size: 14px; } .nb-auth-realm-desc { font-size: 12.5px; color: var(--a-muted); } .nb-auth-realm-icon { flex: none; width: 34px; height: 34px; border-radius: 8px; background: color-mix(in srgb, var(--a-accent) 12%, transparent); -webkit-mask: none; position: relative; } .nb-auth-realm-icon::before { content: ""; position: absolute; inset: 8px; background: var(--a-accent); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; } .nb-auth-realm-icon[data-realm="staff"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); } .nb-auth-realm-icon[data-realm="client"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M9 9h1m4 0h1M9 13h1m4 0h1M9 17h1m4 0h1'/%3E%3C/svg%3E"); } .nb-auth-realm-icon[data-realm="vendor"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18l-1 11H4L3 9z'/%3E%3Cpath d='M8 9V6a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); } .nb-auth-realm-chevron { flex: none; width: 16px; height: 16px; background: var(--a-muted); -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E"); } [dir="rtl"] .nb-auth-realm-chevron { transform: scaleX(-1); } .nb-auth-alt { margin: 0; text-align: center; font-size: 13px; } .nb-auth-alt a { font-weight: 600; color: var(--a-link); text-decoration: none; } .nb-auth-alt a:hover { text-decoration: underline; } /* --- Alerts -------------------------------------------------------------- */ .nb-auth-alert { margin-bottom: 20px; padding: 11px 13px; font-size: 13.5px; border: 1px solid transparent; border-radius: var(--nb-radius-md, 8px); } .nb-auth-alert-danger { color: var(--a-danger-text); background: var(--a-danger-bg); border-color: var(--a-danger-border); } .nb-auth-alert-success, .nb-auth-alert-info, .nb-auth-alert-warning { color: var(--a-text); background: var(--a-hover); border-color: var(--a-border-subtle); } .nb-auth-recaptcha { margin-bottom: 18px; } @media (max-width: 480px) { .nb-auth-card { padding: 24px 20px; } }