/* ── Auth-card pane ────────────────────────────────────────────── Centered white card on the dark hero from shared.css. Used by login.html, signup.html, signup-verify.html. Pattern:

…

Cooperates with bg-reveal.{js,css}: the overlay film is hidden on auth-card pages (the card itself provides text contrast — no need to dim the bg image), but [data-bg-reveal-content] still fades in at t=1.0s so the reveal beat is preserved. */ body.auth-card-page { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Hebrew", "Assistant", system-ui, sans-serif; color: #1e1e22; font-size: 17px; line-height: 1.4; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; } /* Bg-reveal cooperation: kill the dim film on auth-card pages. Card + below-card together still respond to [data-bg-reveal-content] for the fade-in beat. */ body.auth-card-page .bg-reveal-overlay { display: none !important; } body.auth-card-page main { width: 100%; max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; } .auth-card { width: 100%; /* Frosted-glass card — matches legacy login.css .login-box: 95% white opacity + backdrop-filter blur lets the hero photo bleed through subtly behind the form. */ background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px); border-radius: 20px; padding: 44px 40px 36px; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px rgba(0,0,0,0.28), 0 4px 12px rgba(0,0,0,0.18); display: flex; flex-direction: column; gap: 0; } @media (max-width: 480px) { body.auth-card-page { padding: 16px; } .auth-card { padding: 36px 28px 28px; border-radius: 18px; } } /* ── In-card components — match the existing token system ──────── */ .auth-card .brand { display: flex; align-items: center; gap: 8px; margin: 0 0 28px; color: #1e1e22; } .auth-card .brand svg { color: #2da696; } .auth-card .brand-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .auth-card .greeting { font-size: 34px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 6px; color: #1e1e22; } .auth-card .tagline { font-size: 15px; color: #6e6e73; font-weight: 400; margin: 0 0 28px; } .auth-card .field-label { display: block; font-size: 13px; font-weight: 500; color: #6e6e73; margin: 18px 0 6px; letter-spacing: 0.01em; } .auth-card .field-label:first-of-type { margin-top: 0; } .auth-card .text-input { width: 100%; border: none; border-bottom: 0.5px solid rgba(60, 60, 67, 0.12); background: transparent; font: inherit; font-size: 18px; font-weight: 400; color: #1e1e22; padding: 6px 0 12px; outline: none; transition: border-color 180ms ease; /* Email/password/tel are LTR-by-content — their glyphs ALWAYS read left-to-right. text-align:end anchors them to the line's end so they sit beside the Hebrew label in RTL, and the left edge in LTR. */ direction: ltr; text-align: end; } .auth-card .text-input::placeholder { color: #c7c7cc; font-weight: 300; } .auth-card .text-input:focus { border-bottom-color: #1e1e22; } .auth-card .field-hint { font-size: 13px; color: #a1a1a6; margin-top: 8px; line-height: 1.45; } .auth-card .btn-primary { display: block; width: 100%; background: #1e1e22; color: #fff; border: none; border-radius: 999px; font: inherit; font-size: 17px; font-weight: 600; padding: 14px 24px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 160ms ease, background 160ms ease; margin-top: 28px; } .auth-card .btn-primary:active { opacity: 0.85; } .auth-card .btn-primary:disabled { opacity: 0.45; cursor: default; } .auth-card .btn-primary .spinner { display: inline-block; width: 16px; height: 16px; border: 1.5px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: auth-card-spin 800ms linear infinite; vertical-align: middle; margin-inline-start: 8px; } @keyframes auth-card-spin { to { transform: rotate(360deg); } } .auth-card .link-row { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; align-items: center; } .auth-card .text-link { background: none; border: 0; padding: 6px 8px; color: #2da696; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; } .auth-card .text-link:hover { color: #26907f; text-decoration: underline; } .auth-card .text-link.muted { color: #6e6e73; } .auth-card .text-link.muted:hover { color: #1e1e22; } .auth-card .banner { display: none; padding: 12px 14px; border-radius: 12px; font-size: 14px; margin-top: 16px; line-height: 1.45; } .auth-card .banner.visible { display: block; } .auth-card .banner.error { background: rgba(215,0,21,0.06); color: #d70015; } .auth-card .banner.info { background: rgba(45,166,150,0.08); color: #26907f; } /* ── Below-card link (footer-equivalent on dark bg) ──────────── */ .below-card { margin-top: 28px; text-align: center; font-size: 13px; } .below-card a { color: rgba(255,255,255,0.78); text-decoration: none; padding: 8px 12px; border-radius: 8px; transition: color 160ms ease, background 160ms ease; font-weight: 500; } .below-card a:hover { color: #fff; background: rgba(255,255,255,0.08); text-decoration: none; }