/* ============================================================ auth.css — shared styling for the Login / SignUp / Book-a-Demo pages (rendered through Views/Shared/_AuthLayout.cshtml). Everything here is namespaced under "auth-" / ".auth-shell" on purpose: these pages render their own standalone document (Layout = "_AuthLayout"), so this file only ever applies inside that document. It intentionally does NOT touch the existing .ki-login2-* rules in site.css, which SignUp still relies on until it is migrated to this same layout. ============================================================ */ .auth-shell { --auth-ink: #111827; --auth-ink-soft: #374151; --auth-amber: var(--ki-primary, #d97706); --auth-amber-deep: var(--ki-primary-dark, #b45309); --auth-amber-tint: #FEF6EA; --auth-amber-wash: #FFFBF5; --auth-amber-line: #F5DFBD; --auth-grey-500: #6B7280; --auth-grey-400: #9CA3AF; --auth-grey-300: #D1D5DB; --auth-line: #EAEBEE; --auth-white: #FFFFFF; --auth-radius-sm: 10px; --auth-maxw: 1180px; min-height: 100vh; font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--auth-ink); background: var(--auth-white); } .auth-shell h1, .auth-shell h2, .auth-shell h3, .auth-shell h4 { font-family: 'Poppins', system-ui, sans-serif; line-height: 1.14; letter-spacing: -0.02em; } .auth-shell a { text-decoration: none; color: inherit; } /* ── top nav ─────────────────────────────────────────────── */ .auth-nav { background: rgba(255,255,255,0.95); border-bottom: 1px solid var(--auth-line); } .auth-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; max-width: 1450px; margin: 0 auto; padding: 0 24px; } .auth-nav-inner-logo-only { justify-content: flex-start; padding-left: 12px; } .auth-logo { display: flex; flex-direction: column; line-height: 1; } .auth-logo .auth-mark { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -0.02em; color: var(--auth-ink); } .auth-logo .auth-mark span { color: var(--auth-amber); } .auth-logo .auth-by { font-family: 'Poppins', sans-serif; font-size: 10px; letter-spacing: 0.02em; color: var(--auth-grey-400); margin-top: 2px; } .auth-nav-right { display: flex; align-items: center; gap: 20px; font-size: 14px; } .auth-nav-right a { color: var(--auth-grey-500); font-weight: 500; transition: color .2s; } .auth-nav-right a:hover { color: var(--auth-amber-deep); } .auth-nav-cta { background: var(--auth-amber); color: var(--auth-white) !important; padding: 9px 18px; border-radius: var(--auth-radius-sm); font-weight: 600 !important; box-shadow: 0 6px 16px rgba(217,119,6,0.22); transition: background .2s, transform .2s; } .auth-nav-cta:hover { background: var(--auth-amber-deep); transform: translateY(-1px); } /* ── split layout ────────────────────────────────────────── */ .auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 68px); } .auth-panel { padding: 24px 56px; display: flex; flex-direction: column; justify-content: center; } .auth-split-left { background: linear-gradient(160deg, var(--auth-amber-wash) 0%, var(--auth-white) 100%); border-right: 1px solid var(--auth-line); padding-top: 24px; /* was inheriting 60px from .auth-panel */ justify-content: flex-start; /* was inheriting center — content now sits near the top instead of mid-panel */ } .auth-split-right { background: var(--auth-white); } /* ── brand panel content ─────────────────────────────────── */ .auth-bp-tag { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--auth-amber); margin-bottom: 16px; } .auth-bp-heading { font-size: 34px; font-weight: 700; margin-bottom: 16px; line-height: 1.18; } .auth-accent { color: var(--auth-amber); } .auth-bp-sub { font-size: 17px; color: var(--auth-grey-500); margin-bottom: 36px; line-height: 1.55; max-width: 400px; } .auth-proof-list { list-style: none; margin: 0; padding: 0; } .auth-proof-list li { display: flex; gap: 11px; align-items: center; font-size: 15px; color: var(--auth-ink-soft); margin-bottom: 14px; } .auth-pl-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--auth-amber-tint); color: var(--auth-amber-deep); display: grid; place-items: center; font-size: 13px; font-weight: 700; flex-shrink: 0; } .auth-pl-text { color: var(--auth-amber); font-weight: 600; } .auth-pl-text.auth-cursor::after { content: "|"; color: var(--auth-amber); margin-left: 2px; animation: auth-cursor-blink .8s step-end infinite; } @keyframes auth-cursor-blink { 50% { opacity: 0; } } .auth-divider { height: 1px; background: var(--auth-line); margin: 32px 0; } .auth-testimonial { background: var(--auth-white); border: 1px solid var(--auth-amber-line); border-radius: 12px; padding: 20px 22px; } .auth-t-text { font-size: 14px; color: var(--auth-ink-soft); line-height: 1.6; font-style: italic; margin-bottom: 12px; } .auth-t-by { font-size: 12.5px; font-weight: 600; color: var(--auth-ink); font-family: 'Poppins', sans-serif; } .auth-t-role { font-size: 11.5px; color: var(--auth-grey-500); } /* ── form panel ───────────────────────────────────────────── */ .auth-form-panel { max-width: 420px; width: 100%; margin: 0 auto; } .auth-mobile-logo { text-align: center; margin-bottom: 24px; } .auth-fp-title { font-size: 26px; font-weight: 700; margin-bottom: 6px; } .auth-fp-sub { font-size: 15px; color: var(--auth-grey-500); margin-bottom: 28px; } .auth-fp-sub a { color: var(--auth-amber-deep); font-weight: 600; } .auth-alert-spacing { margin-bottom: 20px; } .auth-field { margin-bottom: 18px; } .auth-field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--auth-ink); margin-bottom: 7px; } .auth-field-label-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; } .auth-field-label-row label { margin-bottom: 0; } .auth-field input, .auth-field select { width: 100%; font-family: 'Inter', sans-serif; font-size: 14.5px; padding: 13px 15px; border: 1.5px solid var(--auth-line); border-radius: var(--auth-radius-sm); outline: none; transition: border-color .2s, box-shadow .2s; color: var(--auth-ink); background: var(--auth-white); } .auth-field input:focus, .auth-field select:focus { border-color: var(--auth-amber); box-shadow: 0 0 0 3px rgba(217,119,6,0.10); } .auth-field input::placeholder { color: var(--auth-grey-400); } .auth-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* ── plan badge (SignUp) ──────────────────────────────────── */ .auth-plan-badge { display: flex; align-items: center; gap: 10px; background: var(--auth-amber-tint); border: 1px solid var(--auth-amber-line); border-radius: 10px; padding: 12px 15px; margin-bottom: 22px; } .auth-plan-badge .auth-pb-ico { font-size: 18px; } .auth-plan-badge .auth-pb-t { font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--auth-ink); } .auth-plan-badge .auth-pb-s { font-size: 12px; color: var(--auth-grey-500); } .auth-plan-badge .auth-pb-change { margin-left: auto; font-size: 12px; color: var(--auth-amber-deep); font-weight: 600; cursor: pointer; } /* ── step indicator (SignUp) ─────────────────────────────────── */ .auth-steps { display: flex; align-items: center; margin-bottom: 28px; } .auth-step-item { display: flex; align-items: center; gap: 8px; } .auth-step-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--auth-line); display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: 'Poppins', sans-serif; color: var(--auth-grey-400); transition: all .3s; flex-shrink: 0; } .auth-step-dot.done { background: var(--auth-amber); border-color: var(--auth-amber); color: #fff; } .auth-step-dot.active { border-color: var(--auth-amber); color: var(--auth-amber-deep); } .auth-step-label { font-size: 12px; font-weight: 600; color: var(--auth-grey-400); font-family: 'Poppins', sans-serif; white-space: nowrap; } .auth-step-label.active { color: var(--auth-amber-deep); } .auth-step-line { flex: 1; height: 1.5px; background: var(--auth-line); margin: 0 10px; min-width: 24px; } .auth-step-line.done { background: var(--auth-amber); } .auth-field-relative { position: relative; } .auth-field-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--auth-grey-500); cursor: pointer; padding: 0; } .auth-input-group { display: flex; gap: 8px; align-items: stretch; } .auth-input-group input { flex: 1; min-width: 0; } .auth-inline-link { font-weight: 600; font-size: 13px; color: var(--auth-amber-deep); background: none; border: 0; padding: 0; cursor: pointer; } .auth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; padding: 13px 20px; border-radius: var(--auth-radius-sm); cursor: pointer; border: 0; transition: transform .2s, background .2s, box-shadow .2s; white-space: nowrap; } .auth-btn-primary { background: var(--auth-amber); color: var(--auth-white); box-shadow: 0 8px 22px rgba(217,119,6,0.26); } .auth-btn-primary:hover { background: var(--auth-amber-deep); transform: translateY(-2px); } .auth-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; } .auth-btn-block { width: 100%; } .auth-btn-google { background: var(--auth-white); color: var(--auth-ink); border: 1.5px solid var(--auth-line); font-size: 14.5px; } .auth-btn-google:disabled { color: var(--auth-grey-400); cursor: not-allowed; } .auth-or-row { display: flex; align-items: center; gap: 12px; margin: 20px 0; } .auth-or-row::before, .auth-or-row::after { content: ""; flex: 1; height: 1px; background: var(--auth-line); } .auth-or-row span { font-size: 13px; color: var(--auth-grey-400); white-space: nowrap; } .auth-legal { font-size: 12.5px; color: var(--auth-grey-400); line-height: 1.5; } .auth-legal a { color: var(--auth-amber-deep); } .auth-switch-link { text-align: center; margin-top: 24px; font-size: 14px; color: var(--auth-grey-500); } .auth-switch-link a { color: var(--auth-amber-deep); font-weight: 600; cursor: pointer; } .auth-field textarea { width: 100%; font-family: 'Inter', sans-serif; font-size: 14.5px; padding: 13px 15px; border: 1.5px solid var(--auth-line); border-radius: var(--auth-radius-sm); outline: none; resize: none; transition: border-color .2s, box-shadow .2s; color: var(--auth-ink); background: var(--auth-white); } .auth-field textarea:focus { border-color: var(--auth-amber); box-shadow: 0 0 0 3px rgba(217,119,6,0.10); } /* ── time-slot picker (Book a Demo) ──────────────────────────── */ .auth-time-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; } .auth-slot { background: var(--auth-white); border: 1.5px solid var(--auth-line); border-radius: 9px; padding: 10px 8px; text-align: center; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--auth-ink-soft); transition: border-color .2s, background .2s, color .2s; } .auth-slot:hover { border-color: var(--auth-amber); color: var(--auth-amber-deep); } .auth-slot.picked { background: var(--auth-amber); border-color: var(--auth-amber); color: #fff; font-weight: 600; } /* ── confirmation screen (Book a Demo) ────────────────────────── */ .auth-confirm { text-align: center; padding: 20px 0; } .auth-confirm .auth-c-ico { font-size: 48px; margin-bottom: 16px; } .auth-confirm h2 { font-size: 24px; font-weight: 700; margin-bottom: 10px; } .auth-confirm p { font-size: 15.5px; color: var(--auth-grey-500); max-width: 360px; margin: 0 auto 22px; } .auth-confirm .auth-c-detail { background: var(--auth-amber-wash); border: 1px solid var(--auth-amber-line); border-radius: 12px; padding: 18px 22px; text-align: left; margin-bottom: 22px; } .auth-confirm .auth-cd-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; } .auth-confirm .auth-cd-row:last-child { margin-bottom: 0; } .auth-confirm .auth-cd-l { color: var(--auth-grey-500); } .auth-confirm .auth-cd-v { font-weight: 600; color: var(--auth-ink); font-family: 'Poppins', sans-serif; } @media (max-width: 900px) { .auth-time-slots { grid-template-columns: repeat(2, 1fr); } } /* ── footer ───────────────────────────────────────────────── */ .auth-mini-footer { padding: 20px 24px; border-top: 1px solid var(--auth-line); text-align: center; font-size: 13px; color: var(--auth-grey-400); } .auth-mini-footer a { color: var(--auth-grey-500); } .auth-mini-footer a:hover { color: var(--auth-amber-deep); } /* ── responsive ───────────────────────────────────────────── */ @media (max-width: 900px) { .auth-split { grid-template-columns: 1fr; } .auth-split-left { display: none; } .auth-panel { padding: 40px 28px; } .auth-form-panel { max-width: 100%; } } @media (prefers-reduced-motion: reduce) { .auth-shell * { transition: none !important; animation: none !important; } }