/* ── AUTH PAGES & CLIENT PORTAL ───────────────────────────────────── Centered auth card (login / sign-up / forgot password), the client dashboard, and the form-autosave indicator. Styled to match the site's dark navy + teal design system. ──────────────────────────────────────────────────────────────────── */ /* AUTH-GATED PAGES -------------------------------------------------- Pages with (e.g. Get Started) keep their main content hidden until auth.js confirms a signed-in user and adds .auth-ok. Not signed in → auth.js redirects to login.html before this ever shows. */ body[data-require-auth]:not(.auth-ok) .gs-main { display: none; } /* AUTH SHELL -------------------------------------------------------- */ .auth-wrap { min-height: calc(100vh - 64px); display: flex; align-items: flex-start; justify-content: center; padding: 56px 24px 72px; background: radial-gradient(900px 420px at 50% -10%, rgba(var(--teal-rgb), .10), transparent 70%), var(--bg); } .auth-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 36px 34px 30px; } .auth-card-wide { max-width: 480px; } .auth-brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 22px; } .auth-brand .logo-mark { width: 34px; height: 34px; } .auth-brand-text { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 14px; color: #fff; letter-spacing: -.2px; } .auth-head { text-align: center; margin-bottom: 24px; } .auth-head h1 { font-size: 25px; font-weight: 800; color: #fff; letter-spacing: -.4px; margin-bottom: 6px; } .auth-head p { font-size: 14px; color: var(--muted); line-height: 1.5; } /* Reuse .form-group from components.css; tighten spacing here */ .auth-card .form-group { margin-bottom: 16px; } .auth-card label { font-size: 13.5px; } .auth-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 18px; flex-wrap: wrap; } .auth-remember { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; } .auth-remember input { width: 15px; height: 15px; accent-color: var(--teal); cursor: pointer; } .auth-link { font-size: 13px; color: var(--teal); font-weight: 600; } .auth-link:hover { color: var(--teal-light); } .auth-submit { width: 100%; justify-content: center; margin-top: 4px; } .auth-alt { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); } .auth-alt a { font-weight: 600; } /* Messages */ .auth-error { display: none; background: #3a1a1a; border: 1px solid #7f1d1d; border-left: 4px solid #f87171; color: #fca5a5; font-size: 13.5px; line-height: 1.5; padding: 11px 14px; border-radius: var(--radius-md); margin-bottom: 18px; } .auth-notice { display: none; background: #1a3a2a; border: 1px solid #14532d; border-left: 4px solid #4ade80; color: #86efac; font-size: 13.5px; line-height: 1.5; padding: 11px 14px; border-radius: var(--radius-md); margin-bottom: 18px; } /* Password field with show/hide toggle */ .auth-password-wrap { position: relative; } .auth-password-wrap input { padding-right: 64px; } .auth-pw-toggle { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); background: none; border: none; color: var(--teal); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 6px; } .auth-pw-toggle:hover { color: var(--teal-light); } .auth-hint { font-size: 12px; color: var(--muted); margin-top: 5px; } .auth-secure-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 22px; } .auth-secure-note svg { flex-shrink: 0; margin-top: 1px; color: var(--teal); } /* CLIENT DASHBOARD -------------------------------------------------- */ .portal-wrap { max-width: 860px; margin: 0 auto; padding: 44px 24px 72px; } .portal-greeting { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; } .portal-avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--teal); color: #fff; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .portal-greeting h1 { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.5px; } .portal-greeting p { font-size: 14px; color: var(--muted); } .portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; } .portal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px 22px 20px; } .portal-card h3 { font-size: 16px; color: #fff; margin-bottom: 6px; } .portal-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; } .portal-card .btn { width: 100%; justify-content: center; } .portal-card-full { grid-column: 1 / -1; } .portal-draft-when { font-size: 12px; color: var(--teal-light); margin-bottom: 12px; } /* "What you're applying for": saved draft summary inside the portal card */ .portal-draft-summary-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--teal); margin: 4px 0 10px; } .portal-draft-summary { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; padding: 14px 16px; background: var(--teal-bg); border: 1px solid var(--teal); border-radius: var(--radius-lg); } .portal-draft-reg { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 600; color: #fff; } .portal-draft-reg-price { color: var(--teal-light); font-weight: 700; white-space: nowrap; } .portal-draft-detail { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #cfe9e4; padding-left: 18px; } .portal-draft-detail strong { color: #fff; font-weight: 600; text-align: right; word-break: break-word; } .portal-draft-detail.muted strong { font-style: italic; color: var(--muted); font-weight: 500; } /* Submitted (locked, read-only) application card */ .portal-submitted-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .portal-submitted-head h3 { margin: 0; } .portal-submitted-badge { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--teal-light); background: rgba(var(--teal-rgb), .15); border: 1px solid var(--teal); border-radius: 999px; padding: 4px 12px; white-space: nowrap; } .portal-submitted-ref { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--teal-light); } .portal-submitted-status { margin-top: 8px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.8); } .portal-submitted-status .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-light); margin-right: 8px; vertical-align: middle; } .portal-submitted-status .status-value { color: var(--teal-light); font-weight: 700; } @media (max-width: 600px) { .portal-grid { grid-template-columns: 1fr; } .auth-card { padding: 30px 22px 26px; } } /* FORM AUTOSAVE INDICATOR ------------------------------------------- */ .autosave-pill { position: fixed; bottom: 18px; right: 18px; z-index: 120; display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--teal); color: var(--text); font-size: 12.5px; font-weight: 600; padding: 9px 14px; border-radius: 999px; box-shadow: var(--shadow); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; } .autosave-pill.show { opacity: 1; transform: translateY(0); } .autosave-pill .autosave-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-light); flex-shrink: 0; } /* "Progress restored" banner inside the form (spans the form grid) */ .autosave-banner { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--teal-bg); border: 1px solid var(--teal); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 22px; font-size: 13.5px; color: #d0f0ec; } .autosave-banner strong { color: #fff; } .autosave-banner .autosave-banner-actions { margin-left: auto; display: flex; gap: 10px; } .autosave-banner button { background: none; border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: var(--radius); cursor: pointer; } .autosave-banner button:hover { border-color: #fff; } /* VIEW APPLICATION MODAL CONTENT ---------------------------------- */ .va-section { margin-bottom: 18px; } .va-section-title { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--teal-light, var(--teal)); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.08); } .va-row, .va-reg { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 14px; } .va-row span { color: rgba(255,255,255,.6); flex-shrink: 0; } .va-row strong { color: #fff; font-weight: 600; text-align: right; word-break: break-word; } .va-reg { font-weight: 600; color: #fff; } .va-reg-price { color: var(--teal-light, var(--teal)); }