/* ============================================================================ Platinur — Auth / signed-out pages Covers: control-plane login.html, forgot_password.html, reset_password.html, and app-plane base.html/index.html (register → verify → provisioning → ready). These are the pages a signed-out visitor sees moving from the marketing site (platinur.com) into the product, so they carry the portal design system: system typography, warm paper neutrals, near-black ink, compact controls, and the product blue accent. Every selector here is scoped under `.auth-page` (the class every one of these templates already carries) or lives inside it (.auth-nav, .login-card, .ap-status, ...). None of these class names are used by the logged-in portal SPA (apps/control-plane/app/templates/index.html) — this file is loaded ONLY on the standalone auth/signup pages and must stay that way. Do not add these classes to the portal, and do not fold this file's rules into refresh-tokens.css / refresh-base.css / refresh-views.css, which remain exclusively portal-owned and must render unchanged. ============================================================================ */ .auth-page { /* the marketing site's day-arc tokens — scoped here so they never leak into (or fight with) the portal's own --ink/--surface/... tokens. */ --morning-hi: #F9FBFB; --morning: #F3F6F7; --a-ink: #101A20; --a-ink-soft: #47565E; --a-ink-faint: #798890; --a-light: #E9EEF0; --acc: #64B7F2; --acc-deep: #1E5FAF; --a-err: #C1443B; --a-err-soft: rgba(193, 68, 59, 0.08); --a-err-border:rgba(193, 68, 59, 0.24); --a-ok: #1BAF7A; --serif: "Newsreader", Georgia, serif; --sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; --mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace; min-height: 100vh; background: #fff; font-family: var(--sans); font-size: 15.5px; color: var(--a-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .auth-page :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } .auth-page a { color: inherit; } /* ---------------- wordmark, mirrors the marketing .nav ---------------- */ .auth-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 2; } .auth-nav .frame { display: flex; align-items: center; height: 84px; padding: 0 32px; } .auth-wordmark { font-family: var(--sans); font-weight: 700; font-size: 19px; letter-spacing: -0.025em; color: var(--a-ink); text-decoration: none; } /* ---------------- shell + card ---------------- */ .auth-shell { position: static; min-height: 100vh; box-sizing: border-box; display: grid; place-items: center; padding: 118px 24px 64px; } .login-card { position: relative; width: 100%; max-width: 420px; background: #FFFFFF; border: 1px solid #E2E6E7; border-radius: 16px; box-shadow: 0 24px 60px -34px rgba(16, 26, 32, 0.28); padding: 40px 38px 34px; display: block; overflow: hidden; } /* the old top-left in-card brand mark is superseded by .auth-nav */ .login-brand { display: none; } .kick { display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--a-ink-faint); margin: 0 0 10px; } .login-form { width: 100%; margin-top: 0; position: relative; z-index: 1; } .login-form h1 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 500; font-size: 27px; line-height: 1.14; letter-spacing: -0.012em; color: var(--a-ink); margin: 0; } .login-form .sub { font-family: var(--sans); font-size: 14.5px; color: var(--a-ink-soft); line-height: 1.55; margin: 8px 0 26px; } .login-form label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .login-form label span:first-child { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--a-ink-faint); } .login-form input { border: 1px solid rgba(16, 26, 32, .16); border-radius: 7px; padding: 11px 13px; font-family: var(--sans); font-size: 14.5px; color: var(--a-ink); background: var(--morning-hi); outline: none; width: 100%; min-height: 42px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .login-form input::placeholder { color: var(--a-ink-faint); } .login-form input:focus { border-color: var(--acc); background: #fff; box-shadow: 0 0 0 3px rgba(100, 183, 242, .18); } .login-form .flash-banner { width: 100%; margin: 0 0 18px; } .login-continue { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; margin-top: 8px; box-sizing: border-box; font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1; color: var(--morning-hi); background: var(--a-ink); border: 0; border-radius: 4px; text-decoration: none; cursor: pointer; transition: background .18s ease, transform .18s ease; } .login-continue:hover { background: #000; } .login-continue:active { transform: translateY(1px); } .login-continue[disabled] { opacity: .5; cursor: not-allowed; } .login-alt { text-align: center; font-family: var(--sans); font-size: 13px; color: var(--a-ink-faint); margin-top: 24px; } .login-alt a { color: var(--acc-deep); font-weight: 500; text-decoration: none; border-bottom: 1px solid transparent; } .login-alt a:hover { border-bottom-color: currentColor; } .flash-banner { width: 100%; margin: 0 0 18px; padding: 11px 14px; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--acc-deep); background: rgba(100, 183, 242, .10); border: 1px solid rgba(100, 183, 242, .28); border-radius: 8px; } .flash-banner.flash-error { color: var(--a-err); background: var(--a-err-soft); border-color: var(--a-err-border); } /* a quiet sky-blue glow instead of the portal's multicolor aurora */ .login-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; pointer-events: none; background: radial-gradient(120% 100% at 50% 130%, rgba(100, 183, 242, .14), transparent 70%); } @media (max-width: 480px) { .auth-nav .frame { padding: 0 20px; } .auth-shell { padding: 92px 16px 48px; } .login-card { padding: 32px 24px 28px; border-radius: 14px; } } /* ========================================================================= app-plane status screens (Check your email / Creating your workspace / Your workspace is ready) — same card, centered content column. ========================================================================= */ .ap-status { display: flex; flex-direction: column; align-items: center; text-align: center; } .ap-status h1 { text-align: center; } .ap-status .kick { text-align: center; } .ap-status .sub { text-align: center; margin: 8px 0 22px; max-width: 300px; } .ap-status .login-continue { margin-top: 6px; text-decoration: none; } .ap-status-note { text-align: center; font-family: var(--sans); font-size: 12.5px; color: var(--a-ink-faint); line-height: 1.55; margin: 20px 0 0; max-width: 320px; } .ap-status-icon { width: 46px; height: 46px; margin-bottom: 20px; display: grid; place-items: center; } .ap-status-icon-ok { border-radius: 50%; background: rgba(27, 175, 122, .12); } .ap-status-icon-ok svg { width: 24px; height: 24px; fill: none; stroke: var(--a-ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .ap-status-icon-mail { border-radius: 50%; background: rgba(100, 183, 242, .16); } .ap-status-icon-mail svg { width: 22px; height: 22px; fill: none; stroke: var(--acc-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ap-status .flash-banner { text-align: center; } .ap-progress { width: 200px; max-width: 100%; height: 4px; border-radius: 999px; background: rgba(16, 26, 32, .08); overflow: hidden; margin: 4px 0 0; } .ap-progress-bar { height: 100%; width: 40%; border-radius: 999px; background: var(--acc-deep); animation: ap-indet 1.2s ease-in-out infinite; } @keyframes ap-indet { 0% { margin-left: -42%; } 100% { margin-left: 102%; } } /* ========================================================================= app-plane register form — subdomain preview + live password-match hint ========================================================================= */ .ap-subdomain { margin: -6px 0 12px; font-family: var(--sans); font-size: 12.5px; color: var(--a-ink-faint); } .ap-subdomain strong { color: var(--a-ink); font-weight: 600; } .ap-subdomain-status { font-weight: 600; margin-left: 8px; } .ap-subdomain-status.ok { color: var(--a-ok); } .ap-subdomain-status.bad { color: var(--a-err); } .auth-form input.is-ok { border-color: var(--a-ok) !important; box-shadow: 0 0 0 3px rgba(27, 175, 122, .14) !important; } .auth-form input.is-bad { border-color: var(--a-err) !important; box-shadow: 0 0 0 3px rgba(193, 68, 59, .12) !important; } .ap-pwmatch { margin: -6px 0 12px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; } .ap-pwmatch.bad { color: var(--a-err); } /* ========================================================================= Product auth system — shared by registration, verification, provisioning, login, password recovery, and workspace-ready screens. ========================================================================= */ .auth-page-product { background: #fff; color: var(--ink); font-family: var(--font-sans); } .auth-page-product :focus-visible { outline-color: var(--accent); } .auth-page-product .auth-nav .frame { height: 76px; padding: 0 30px; } .auth-page-product .auth-wordmark { color: var(--ink); font-family: var(--font-sans); font-size: 16px; font-weight: var(--weight-bold); letter-spacing: -0.02em; } .auth-page-product .login-fade { display: none; } .auth-page-product:not(.auth-page-register) .auth-shell { padding: 112px 20px 48px; place-items: start center; } .auth-page-product:not(.auth-page-register) .login-card { max-width: 460px; padding: 42px 42px 36px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .auth-page-product:not(.auth-page-register) .kick { color: var(--ink-3); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); } .auth-page-product:not(.auth-page-register) .login-form h1 { color: var(--ink); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); font-weight: var(--weight-bold); letter-spacing: -0.025em; text-align: center; } .auth-page-product:not(.auth-page-register) .login-form .sub { margin: 8px 0 26px; color: var(--muted); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.55; text-align: center; } .auth-page-product:not(.auth-page-register) .login-form > .kick { text-align: center; } .auth-page-product:not(.auth-page-register) .login-form label { gap: 7px; margin-bottom: 16px; } .auth-page-product:not(.auth-page-register) .login-form label span:first-child { color: var(--ink-2); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0; text-transform: none; } .auth-page-product:not(.auth-page-register) .login-form input { min-height: 42px; padding: 10px 12px; color: var(--ink); background: var(--card); border-color: var(--hairline); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-sm); } .auth-page-product:not(.auth-page-register) .login-form input::placeholder { color: var(--ink-3); } .auth-page-product:not(.auth-page-register) .login-form input:focus { background: var(--surface); border-color: var(--border-strong); box-shadow: none; } .auth-page-product .login-form input:focus-visible { outline: none; } .auth-page-product:not(.auth-page-register) .login-continue { min-height: 42px; margin-top: 4px; padding: 11px 14px; color: #fff; background: var(--pill-dark); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold); } .auth-page-product:not(.auth-page-register) .login-continue:hover { background: #0b0b0b; filter: none; } .auth-page-product:not(.auth-page-register) .login-alt { margin-top: 20px; color: var(--ink-3); font-family: var(--font-sans); font-size: var(--text-xs); } .auth-page-product:not(.auth-page-register) .login-alt a { color: var(--accent-strong); } .auth-page-product .flash-banner { padding: 0; color: var(--accent-strong); background: transparent; border: 0; border-radius: 0; font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.5; text-align: center; } .auth-page-product .flash-banner.flash-error { color: var(--red); background: transparent; border: 0; } .auth-page-product .auth-info-card { width: 100%; margin: 22px 0 0; padding: 13px 15px; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-tint); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.5; text-align: center; } .auth-page-product:not(.auth-page-register) .ap-status .sub { max-width: 350px; } .auth-page-product:not(.auth-page-register) .ap-status-note { color: var(--ink-3); font-family: var(--font-sans); font-size: var(--text-xs); } .auth-page-product .ap-status-icon { width: 44px; height: 44px; margin-bottom: 20px; } .auth-page-product .ap-status-icon-mail { background: var(--accent-soft); } .auth-page-product .ap-status-icon-mail svg { stroke: var(--accent-strong); } .auth-page-product .ap-status-icon-ok { background: var(--green-soft); } .auth-page-product .ap-status-icon-ok svg { stroke: var(--green-text); } .auth-page-product .ap-progress { height: 5px; background: var(--surface-muted); border: 1px solid var(--hairline); } .auth-page-product .ap-progress-bar { background: var(--accent); } @media (prefers-reduced-motion: reduce) { .ap-progress-bar { width: 100%; animation: none; } } .locked-status-icon { border-radius: var(--radius-pill); background: var(--amber-soft); } .locked-status-icon svg { width: 21px; height: 21px; fill: none; stroke: var(--amber-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Registration keeps the shared system but uses the wider two-column shell. */ .auth-page-register .auth-shell { padding: 100px 26px 40px; place-items: start center; } .auth-page-register .login-card { max-width: 1080px; padding: 0; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; } .auth-page-register .login-form { width: 100%; } .auth-page-register .login-fade { display: none; } .registration-layout { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.35fr); min-height: 650px; } .registration-intro { display: flex; flex-direction: column; padding: 48px 42px; background: var(--surface-muted); border-right: 1px solid var(--hairline); } .auth-page-register .kick { color: var(--ink-3); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); } .registration-intro h1 { margin: 0; max-width: 13ch; color: var(--ink); font-family: var(--font-display); font-size: clamp(28px, 3vw, 38px); line-height: 1.08; font-weight: var(--weight-display); letter-spacing: -0.035em; } .registration-intro .sub { max-width: 37ch; margin: 18px 0 34px; color: var(--muted); font-size: var(--text-base); line-height: 1.55; } .registration-summary { display: grid; gap: 18px; margin-top: 4px; } .registration-summary div { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px; color: var(--muted-strong); font-size: var(--text-sm); } .registration-summary strong { display: grid; place-items: center; width: 27px; height: 27px; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-tint); border-radius: var(--radius-pill); font-size: 11px; font-weight: var(--weight-semibold); } .registration-note { margin: auto 0 0; padding-top: 34px; color: var(--ink-3); font-size: var(--text-xs); line-height: 1.55; border-top: 1px solid var(--hairline); } .registration-form-panel { padding: 46px 48px 34px; } .registration-heading h2 { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: -0.02em; } .registration-heading p { margin: 6px 0 25px; color: var(--ink-3); font-size: var(--text-sm); } .registration-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; } .auth-page-register .login-form label { color: var(--ink-2); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-medium); } .auth-page-register .login-form label span:first-child { color: var(--ink-2); font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: 0; text-transform: none; } .auth-page-register .login-form input:not([type="radio"]) { min-height: 40px; padding: 9px 11px; color: var(--ink); background: var(--card); border-color: var(--hairline); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-sm); } .auth-page-register .login-form input:not([type="radio"]):focus { background: var(--surface); border-color: var(--border-strong); box-shadow: none; outline: none; } .auth-page-register .login-form input::placeholder { color: var(--ink-3); } .auth-page-register .ap-subdomain, .auth-page-register .ap-pwmatch { color: var(--ink-3); font-family: var(--font-sans); font-size: var(--text-xs); } .auth-page-register .login-continue { min-height: 42px; margin-top: 2px; padding: 11px 14px; color: #fff; background: var(--pill-dark); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold); } .auth-page-register .login-continue:hover { background: #0b0b0b; filter: none; } .registration-consent { margin: 11px 0 0; text-align: center; color: var(--ink-3); font-size: 11px; line-height: 1.45; } .auth-page-register .login-alt { margin: 18px 0 0; color: var(--ink-3); font-family: var(--font-sans); font-size: var(--text-xs); } @media (max-width: 820px) { .registration-layout { grid-template-columns: 1fr; } .registration-intro { padding: 34px 32px; border-right: 0; border-bottom: 1px solid var(--hairline); } .registration-intro h1 { max-width: 18ch; } .registration-summary { display: none; } .registration-note { margin-top: 20px; padding-top: 20px; } .registration-form-panel { padding: 34px 32px; } } @media (max-width: 600px) { .auth-page-product:not(.auth-page-register) .auth-shell { padding: 88px 16px 32px; } .auth-page-product:not(.auth-page-register) .login-card { padding: 32px 24px 28px; } .auth-page-register .auth-shell { padding: 76px 12px 20px; } .auth-page-register .auth-nav .frame { padding: 0 18px; } .auth-page-register .login-card { border-radius: var(--radius); } .registration-intro, .registration-form-panel { padding: 28px 22px; } .registration-fields { grid-template-columns: 1fr; } } /* ========================================================================= app.platinur.com workspace locator ========================================================================= */ .workspace-login h1, .workspace-results h1 { text-align: center; } .workspace-login .sub, .workspace-results .sub { text-align: center; } .workspace-login-notice { margin: 0 0 24px !important; } .auth-page-workspaces .login-card { max-width: 560px !important; } .workspace-results .sub strong { color: var(--ink-2); font-weight: var(--weight-semibold); } .workspace-search { margin: 4px 0 18px !important; } .workspace-list { display: grid; gap: 10px; } .workspace-option { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 68px; padding: 14px 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm); text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .workspace-option:hover { background: var(--surface-muted); border-color: var(--border-strong); transform: translateY(-1px); } .workspace-option-copy { display: grid; min-width: 0; gap: 3px; } .workspace-option-copy strong { overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; } .workspace-option-copy span { overflow: hidden; color: var(--ink-3); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; } .workspace-option-meta { flex: 0 0 auto; color: var(--muted); font-size: var(--text-xs); white-space: nowrap; } .workspace-option-meta span { margin-left: 6px; color: var(--accent-strong); } .workspace-empty-filter { margin: 20px 0 0; color: var(--ink-3); font-size: var(--text-sm); text-align: center; } @media (max-width: 600px) { .workspace-option { align-items: flex-start; flex-direction: column; gap: 8px; } .workspace-option-meta { width: 100%; display: flex; justify-content: space-between; } }