/* CareerDoc — auth pages (sign in / create account / verify / reset). Dark, glassmorphic card over the ambient tetrahedra background (bg.js). */ /* site.css locks scrolling for the scroll-film page — these pages are ordinary, they need to scroll if the card is ever taller than the viewport. */ html { overflow-x: hidden !important; overflow-y: auto !important; } html, body { height: auto; min-height: 100%; } .auth-page { box-sizing: border-box; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 60px 20px 28px; overflow-x: hidden; font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink, #e8eef6); } /* nothing inside the card may push past its edge */ .auth-card, .auth-card * { min-width: 0; max-width: 100%; box-sizing: border-box; } .auth-page input, .auth-page button, .auth-page textarea { box-sizing: border-box; } /* kill the browser's own password reveal / autofill-key icons */ .auth-input::-ms-reveal, .auth-input::-ms-clear { display: none; } .auth-input::-webkit-credentials-auto-fill-button, .auth-input::-webkit-strong-password-auto-fill-button, .auth-input::-webkit-contacts-auto-fill-button { visibility: hidden; display: none !important; pointer-events: none; position: absolute; right: 0; } .auth-topbar { position: fixed; left: 22px; top: 20px; z-index: 6; display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: #e8eef6; text-decoration: none; } .auth-topbar svg { width: 22px; height: 22px; } .auth-topbar span { color: #7fd4ff; } .auth-card { position: relative; z-index: 2; width: min(420px, 100%); display: flex; flex-direction: column; padding: clamp(20px, 3vw, 30px) clamp(22px, 3.5vw, 32px); background: rgba(7, 11, 19, .62); -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25); border: 1px solid rgba(159, 196, 232, .18); border-radius: 22px; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05); animation: auth-in .5s cubic-bezier(.2, .7, .2, 1) both; } @keyframes auth-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .auth-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; font-weight: 650; font-size: 15px; } .auth-brand svg { width: 22px; height: 22px; } .auth-brand b { font-weight: 700; } .auth-brand span { color: #33bcf8; } .auth-tabs { display: flex; gap: 4px; padding: 3px; margin-bottom: 14px; background: rgba(159, 196, 232, .06); border: 1px solid rgba(159, 196, 232, .1); border-radius: 11px; } .auth-tab { flex: 1; text-align: center; padding: 7px 10px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-dim, #9fb0c4); transition: background .15s ease, color .15s ease; } .auth-tab.active { background: rgba(51, 188, 248, .16); color: #eef4fc; } .auth-headline { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: #f4f8fd; font-family: 'Instrument Sans', 'Inter', sans-serif; } .auth-subhead { margin: 5px 0 15px; font-size: 13px; line-height: 1.5; color: var(--ink-dim, #9fb0c4); } .auth-subhead strong { color: #cdd8e6; font-weight: 600; } .auth-back-link { display: inline-block; margin-bottom: 12px; font-size: 12.5px; color: var(--ink-dim, #9fb0c4); cursor: pointer; } .auth-back-link:hover { color: #33bcf8; } .auth-field { margin-bottom: 10px; } .auth-field-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; } .auth-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink-faint, #6b7f96); } .auth-forgot { font-size: 11.5px; color: var(--ink-dim, #9fb0c4); cursor: pointer; } .auth-forgot:hover { color: #33bcf8; } .auth-input { box-sizing: border-box; display: block; width: 100%; padding: 9px 12px; font: inherit; font-size: 13.5px; color: #eef4fc; background: rgba(255, 255, 255, .04); border: 1px solid rgba(159, 196, 232, .2); border-radius: 10px; outline: none; transition: border-color .15s ease, background .15s ease; } .auth-pw { position: relative; width: 100%; } .auth-input::placeholder { color: rgba(159, 196, 232, .4); } .auth-input:focus { border-color: #33bcf8; background: rgba(51, 188, 248, .06); } .auth-pw .auth-input { padding-right: 58px; } .auth-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-dim, #9fb0c4); padding: 4px 8px; border-radius: 6px; } .auth-eye:hover { color: #33bcf8; } .auth-remember { display: flex; align-items: center; gap: 9px; margin: 2px 0 12px; cursor: pointer; user-select: none; } .auth-check { width: 16px; height: 16px; border-radius: 5px; border: 1px solid rgba(159, 196, 232, .35); display: grid; place-items: center; flex: none; transition: background .15s ease, border-color .15s ease; } .auth-check.checked { background: #33bcf8; border-color: #33bcf8; } .auth-check.checked::after { content: ""; width: 5px; height: 9px; border: solid #04121e; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); } .auth-remember-label { font-size: 13px; color: var(--ink-dim, #9fb0c4); } .auth-submit { width: 100%; margin-top: 4px; padding: 11px 16px; font: inherit; font-size: 14px; font-weight: 650; color: #04121e; background: #33bcf8; border: 0; border-radius: 999px; cursor: pointer; transition: filter .15s ease, transform .06s ease; } .auth-submit:hover { filter: brightness(1.06); } .auth-submit:active { transform: translateY(1px); } .auth-submit:disabled { opacity: .55; cursor: default; } .auth-msg { min-height: 0; margin-top: 10px; font-size: 12.5px; line-height: 1.45; } .auth-msg:empty { margin-top: 0; } .auth-msg.err { color: #ff9b9b; } .auth-msg.ok { color: #7fe0b0; } .auth-foot { margin-top: 13px; font-size: 12.5px; color: var(--ink-dim, #9fb0c4); text-align: center; } .auth-foot-action { color: #33bcf8; cursor: pointer; font-weight: 600; } /* OTP digit boxes */ .auth-otp { display: flex; gap: 8px; margin: 4px 0 6px; } .auth-otp input { flex: 1; min-width: 0; aspect-ratio: 1; text-align: center; font-size: 20px; font-weight: 700; color: #eef4fc; background: rgba(255, 255, 255, .04); border: 1px solid rgba(159, 196, 232, .22); border-radius: 12px; outline: none; transition: border-color .15s ease, background .15s ease; } .auth-otp input:focus { border-color: #33bcf8; background: rgba(51, 188, 248, .08); } .auth-otp input.err { border-color: #ff6b6b; } .auth-resend { margin-top: 14px; text-align: center; } .auth-resend button { background: none; border: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: #33bcf8; cursor: pointer; } .auth-resend button:disabled { color: var(--ink-faint, #6b7f96); cursor: default; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Passive agreement line under the Create-account button */ .auth-terms { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--ink-faint, #6b7f96); text-align: center; } .auth-terms a { color: #33bcf8; } .auth-terms a:hover { text-decoration: underline; } @media (max-width: 480px) { .auth-card { border-radius: 18px; } .auth-otp { gap: 6px; } }