/* ── RESMAN REGISTER — 2026 SaaS UI ───────────── Module accent vars (--r-accent / --r-accent-soft / --r-accent-glow) are emitted by includes/module_palette.php via emit_module_palette_css_vars() in the so :root defaults and per-[data-module] overrides stay in a single registry (modules/{key}/module.php → palette → CSS vars). ───────────────────────────────────────────── */ :root { --r-bg-page: #f5f6f8; --r-bg-card: #ffffff; --r-bg-input: #ffffff; --r-bg-muted: #f9fafb; --r-text: #0f172a; --r-text-muted: #64748b; --r-text-faint: #94a3b8; --r-border: rgba(15, 23, 42, .10); --r-border-soft: rgba(15, 23, 42, .06); --r-border-hover: rgba(15, 23, 42, .20); --r-radius-sm: 10px; --r-radius: 12px; --r-radius-lg: 18px; --r-ease: cubic-bezier(.22, 1, .36, 1); } *, *::before, *::after { box-sizing: border-box; } * { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } body { min-height: 100vh; min-height: 100dvh; background: var(--r-bg-page) !important; padding: 2rem 1.25rem; overflow-x: hidden; -webkit-font-smoothing: antialiased; } .logo-container { text-align: center; margin-bottom: 1.25rem; } .logo-container img { max-width: 140px; height: auto; display: block; margin: 0 auto; } /* Module-aware logo: full Resman SVG — R circle retints per module accent, "esman" wordmark inherits text color (currentColor) for dark-mode support. */ .auth-logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--r-text); transition: transform .25s var(--r-ease); } .auth-logo:hover { color: var(--r-text); text-decoration: none; transform: translateY(-1px); } .auth-logo-icon { width: 160px; height: auto; display: block; filter: drop-shadow(0 4px 12px var(--r-accent-glow)); transition: filter .25s var(--r-ease); } /* ── CARD ─────────────────────────────── */ .register-container { width: 100%; max-width: 560px; margin: 0 auto; } .register-card { background: var(--r-bg-card); border-radius: var(--r-radius-lg); border: 1px solid var(--r-border-soft); overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 36px rgba(15, 23, 42, .07); transition: border-color .25s var(--r-ease); } .register-form { padding: 2rem 1.75rem; } /* ── HEADER ───────────────────────────── */ .register-title { text-align: center; margin-bottom: 1.5rem; } .register-title h1 { font-size: 1.5rem; font-weight: 700; color: var(--r-text); margin: 0 0 .25rem; letter-spacing: -.025em; } .register-title p { font-size: .875rem; color: var(--r-text-muted); margin: 0; line-height: 1.5; } /* ── STEP INDICATOR ───────────────────── */ .step-indicator { display: flex; justify-content: center; align-items: center; margin-bottom: 1.75rem; gap: .75rem; } .step { display: flex; align-items: center; gap: .55rem; } .step-circle { width: 32px; height: 32px; border-radius: 50%; background: var(--r-bg-muted); border: 1.5px solid var(--r-border); color: var(--r-text-muted); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8125rem; transition: all .25s var(--r-ease); } .step.active .step-circle { background: var(--r-accent); border-color: var(--r-accent); color: #fff; box-shadow: 0 6px 16px -4px var(--r-accent-glow); } .step.completed .step-circle { background: var(--r-accent-soft); border-color: var(--r-accent); color: var(--r-accent); } .step-label { font-size: .8125rem; font-weight: 600; color: var(--r-text-muted); } .step.active .step-label { color: var(--r-accent); } .step.completed .step-label { color: var(--r-accent); } .step-divider { width: 32px; height: 2px; background: var(--r-border); border-radius: 1px; } .step.completed + .step-divider { background: var(--r-accent); } /* ── FORM STEPS ───────────────────────── */ .form-step { display: none; } .form-step.active { display: block; } .section-title { font-size: 1.0625rem; font-weight: 700; color: var(--r-text); margin-bottom: .375rem; display: flex; align-items: center; gap: .5rem; letter-spacing: -.015em; } .section-title i { color: var(--r-accent); } .section-subtitle { font-size: .8125rem; color: var(--r-text-muted); margin-bottom: 1.25rem; line-height: 1.5; } /* ── GOOGLE BUTTON ────────────────────── */ .register-form .btn-google-modern { display: flex; align-items: center; justify-content: center; gap: .625rem; width: 100%; height: 46px !important; padding: 0 1rem; border: 1.5px solid var(--r-border) !important; border-radius: var(--r-radius) !important; background: var(--r-bg-card) !important; color: var(--r-text); font-size: .875rem; font-weight: 600; text-decoration: none; transition: background .2s var(--r-ease), border-color .2s var(--r-ease), box-shadow .2s var(--r-ease); } .register-form .btn-google-modern:hover { background: var(--r-bg-muted) !important; border-color: var(--r-border-hover) !important; box-shadow: 0 2px 8px rgba(15, 23, 42, .06); color: var(--r-text); } .register-form .btn-google-modern img { flex-shrink: 0; width: 18px; height: 18px; } /* ── DIVIDER ─────────────────────────── */ .form-divider-text { display: flex; align-items: center; gap: .75rem; font-size: .6875rem; font-weight: 500; color: var(--r-text-faint); text-transform: uppercase; letter-spacing: .08em; margin: 1rem 0; } .form-divider-text::before, .form-divider-text::after { content: ''; flex: 1; height: 1px; background: var(--r-border-soft); } /* ── MESSAGES / ALERTS ────────────────── */ .register-message { margin-bottom: 1rem; min-height: 0; } .register-message .register-alert { margin: 0; border-radius: var(--r-radius); } .register-message-error, .alert-danger { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; padding: .75rem 1rem; border-radius: var(--r-radius); font-size: .8125rem; } .alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; padding: .75rem 1rem; border-radius: var(--r-radius); font-size: .8125rem; } .alert-warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: .75rem 1rem; border-radius: var(--r-radius); font-size: .8125rem; } .alert-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; padding: .75rem 1rem; border-radius: var(--r-radius); font-size: .8125rem; } .section-divider { border: 0; border-top: 1px solid var(--r-border-soft); margin: 1.75rem 0; } /* ── FORM CONTROLS ────────────────────── */ .register-form .form-group { margin-bottom: .875rem; } .register-form .form-group label { display: block; font-size: .8125rem; font-weight: 600; color: var(--r-text); margin-bottom: .35rem; letter-spacing: .01em; } .register-form .form-control, .register-form select.form-control { box-sizing: border-box; width: 100%; max-width: 100%; height: 46px !important; min-height: 46px !important; padding: 0 .875rem !important; font-size: .9375rem !important; border: 1.5px solid var(--r-border) !important; border-radius: var(--r-radius) !important; transition: border-color .2s var(--r-ease), box-shadow .2s var(--r-ease); background: var(--r-bg-input) !important; color: var(--r-text); } .register-form .form-control::placeholder { color: #b0b8c9; } .register-form .form-control:hover { border-color: var(--r-border-hover) !important; } .register-form .form-control:focus { outline: none; border-color: var(--r-accent) !important; box-shadow: 0 0 0 3px var(--r-accent-soft) !important; } .register-form .form-control[readonly] { background: var(--r-bg-muted) !important; cursor: not-allowed; } /* Email available → green */ .register-form .form-group.email-available .form-control { border-color: #10b981 !important; background: rgba(16, 185, 129, .03) !important; } .register-form .form-group.email-available .form-control:focus { border-color: #059669 !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, .12) !important; } /* 2-col layout */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } .form-row .form-group { margin-bottom: .875rem; min-width: 0; } .form-row .form-group .form-control { height: 46px !important; min-height: 46px !important; } .form-row .form-group .select2-container .select2-selection--single { height: 46px !important; min-height: 46px !important; } /* Phone + currency pair: currency's NGN flag + code + caret needs more breathing room than a phone number, so bias the row 3fr : 2fr. */ .form-row--phone-currency { grid-template-columns: 3fr 2fr; } /* ── BUTTONS ──────────────────────────── */ .register-form .btn-primary-modern { height: 46px !important; padding: 0 1.5rem; background: var(--r-accent) !important; color: #fff !important; border: none !important; border-radius: var(--r-radius) !important; font-size: .9375rem; font-weight: 600; cursor: pointer; transition: transform .2s var(--r-ease), box-shadow .2s var(--r-ease), background .2s; box-shadow: 0 6px 16px -4px var(--r-accent-glow); } .register-form .btn-primary-modern:hover { background: var(--r-accent-dark) !important; transform: translateY(-2px); box-shadow: 0 12px 24px -4px var(--r-accent-glow); } .register-form .btn-primary-modern:active { transform: translateY(0); } .register-form .btn-primary-modern:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .btn-secondary-modern { height: 46px; padding: 0 1.5rem; background: var(--r-bg-card); color: var(--r-text); border: 1.5px solid var(--r-border); border-radius: var(--r-radius); font-size: .9375rem; font-weight: 600; cursor: pointer; transition: all .2s var(--r-ease); } .btn-secondary-modern:hover { border-color: var(--r-border-hover); background: var(--r-bg-muted); } .step-buttons { display: flex; gap: .75rem; margin-top: 1.75rem; } .step-buttons .btn-primary-modern { flex: 2; } .step-buttons .btn-secondary-modern { flex: 1; min-width: 92px; } /* ── SELECT2 ──────────────────────────── */ .register-form .select2-container--default .select2-selection--single { height: 46px !important; min-height: 46px !important; border: 1.5px solid var(--r-border) !important; border-radius: var(--r-radius) !important; background: var(--r-bg-input) !important; box-sizing: border-box; } .register-form .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; padding-left: .875rem; padding-right: .875rem; font-size: .9375rem; color: var(--r-text); } .register-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; } .register-form .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--r-accent) !important; box-shadow: 0 0 0 3px var(--r-accent-soft) !important; } .select2-dropdown { border: 1.5px solid var(--r-border); border-radius: var(--r-radius); box-shadow: 0 12px 32px rgba(0, 0, 0, .10); background: var(--r-bg-card); } .select2-search--dropdown .select2-search__field { border: 1.5px solid var(--r-border); border-radius: 8px; padding: .5rem; background: var(--r-bg-input); color: var(--r-text); } .select2-results__option { color: var(--r-text); } .select2-results__option--highlighted[aria-selected] { background: var(--r-accent) !important; } /* ── SIGN-IN LINK ─────────────────────── */ .signin-link { text-align: center; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--r-border-soft); font-size: .8125rem; color: var(--r-text-muted); } .signin-link a { color: var(--r-accent); text-decoration: none; font-weight: 600; } .signin-link a:hover { text-decoration: underline; } /* ── MODULE CARDS (business-type selector) ── */ .module-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .625rem; margin-bottom: .25rem; } .module-card { position: relative; display: flex; flex-direction: row; align-items: center; gap: .75rem; padding: .875rem 1rem; border: 1.5px solid var(--r-border); border-radius: var(--r-radius); cursor: pointer; transition: border-color .18s var(--r-ease), background .18s var(--r-ease), box-shadow .18s var(--r-ease); background: var(--r-bg-card); text-align: left; min-height: 64px; } .module-card:hover:not(.coming-soon) { border-color: var(--r-border-hover); box-shadow: 0 2px 8px rgba(15, 23, 42, .06); } .module-card.selected { border-color: var(--mod-accent, var(--r-accent)); background: var(--mod-accent-soft, var(--r-accent-soft)); box-shadow: 0 0 0 1px var(--mod-accent, var(--r-accent)) inset; } .module-card.coming-soon { opacity: .55; cursor: not-allowed; } .module-card-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--r-bg-muted); flex-shrink: 0; font-size: 1rem; color: var(--r-text-muted); transition: background .18s, color .18s; } .module-card.selected .module-card-icon { background: var(--mod-accent, var(--r-accent)); color: #fff; } .module-card-body { display: flex; flex-direction: column; min-width: 0; } .module-card-name { font-size: .875rem; font-weight: 600; color: var(--r-text); line-height: 1.2; } .module-card-desc { font-size: .6875rem; color: var(--r-text-muted); line-height: 1.35; margin-top: .15rem; } .module-card-badge { position: absolute; top: -7px; right: -6px; background: #f59e0b; color: #fff; font-size: .55rem; font-weight: 700; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } @media (max-width: 480px) { .module-card-grid { grid-template-columns: 1fr 1fr; gap: .5rem; } .module-card { padding: .75rem .75rem; min-height: 60px; gap: .55rem; } .module-card-icon { width: 34px; height: 34px; font-size: .9rem; } .module-card-desc { display: none; } } /* ── REFERRAL GROUP ────────────────────── */ .referral-group { border: 1.5px dashed var(--r-border); background: var(--r-bg-muted); border-radius: var(--r-radius); padding: .75rem .875rem; margin-bottom: .875rem; transition: border-color .2s var(--r-ease), background .2s var(--r-ease); } .referral-group label { font-size: .8125rem; font-weight: 600; color: var(--r-text); margin-bottom: .35rem; display: flex; align-items: center; gap: .4rem; } .referral-group label .ref-optional { font-weight: 400; color: var(--r-text-faint); } .referral-group label i.fa-gift { color: var(--r-accent); font-size: .875rem; } .referral-input-wrap { position: relative; } .referral-input-wrap .form-control { padding-right: 2.5rem !important; text-transform: uppercase; letter-spacing: .05em; } .referral-check { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); font-size: .9rem; display: none; } .referral-hint { display: block; margin-top: .35rem; color: var(--r-text-faint); font-size: .7rem; } .referral-group.is-valid { border-color: #10b981; background: rgba(16, 185, 129, .06); } .referral-group.is-valid .referral-hint { color: #10b981; } .referral-group.is-invalid { border-color: #fca5a5; background: rgba(239, 68, 68, .05); } .referral-group.is-invalid .referral-hint { color: #ef4444; } .ref-welcome-banner { display: none; background: var(--r-accent-soft); border: 1.5px solid var(--r-accent); border-radius: var(--r-radius); padding: .75rem 1rem; margin-bottom: 1rem; font-size: .8125rem; color: var(--r-accent-dark); text-align: center; } .ref-welcome-banner i.fa-gift { color: var(--r-accent); margin-right: .375rem; } .ref-welcome-banner .ref-welcome-name { font-size: .75rem; color: var(--r-text-muted); margin-top: .15rem; display: block; } /* ── LOGO UPLOAD ───────────────────────── */ .company-logo-form-group .company-logo-label { display: block; margin-bottom: .35rem; font-size: .8125rem; font-weight: 600; color: var(--r-text); } .company-logo-block { margin-top: 0; } .company-logo-preview { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; background: var(--r-bg-muted); border: 1.5px dashed var(--r-border); border-radius: var(--r-radius); transition: border-color .18s, background .18s, box-shadow .18s; width: 100%; min-height: 64px; } .company-logo-preview:hover { border-color: var(--r-accent); background: var(--r-accent-soft); } .company-logo-preview.has-logo { border-style: solid; border-color: var(--r-border); background: var(--r-bg-card); } .company-logo-tap { cursor: pointer; margin: 0; display: flex; flex-direction: row; align-items: center; gap: 12px; flex: 1; min-width: 0; } .company-logo-img-wrap { width: 44px; height: 44px; min-width: 44px; border-radius: 10px; background: var(--r-bg-card); border: 1px solid var(--r-border-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .company-logo-preview.has-logo .company-logo-img-wrap { border-color: var(--r-accent); background: var(--r-bg-muted); } .company-logo-img { width: 100%; height: 100%; object-fit: contain; display: block; } .company-logo-placeholder { color: var(--r-text-faint); font-size: 18px; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: color .18s; } .company-logo-preview:hover .company-logo-placeholder { color: var(--r-accent); } .company-logo-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; text-align: left; } .company-logo-text { font-size: .875rem; color: var(--r-text); font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .company-logo-hint { font-size: .7rem; color: var(--r-text-muted); margin-top: 2px; letter-spacing: .005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .company-logo-actions { display: flex; align-items: center; flex-shrink: 0; } .company-logo-browse { margin: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; font-size: .75rem; font-weight: 600; color: var(--r-accent); background: var(--r-bg-card); border: 1px solid var(--r-accent); border-radius: 8px; transition: background .15s, color .15s; white-space: nowrap; } .company-logo-browse:hover { background: var(--r-accent); color: #fff; } .company-logo-remove { font-size: .75rem; color: var(--r-text-muted); background: none; border: 1px solid var(--r-border); border-radius: 8px; cursor: pointer; padding: 6px 12px; font-weight: 600; transition: color .15s, border-color .15s, background .15s; white-space: nowrap; } .company-logo-remove:hover { color: #dc2626; border-color: #dc2626; background: rgba(220, 38, 38, .06); } .company-logo-file-input { position: absolute; width: 0; height: 0; opacity: 0; overflow: hidden; } /* ── CURRENCY SELECT (select2) ─────────── */ .currency-selected, .currency-option { display: inline-flex; align-items: center; gap: .55rem; } .currency-sym { font-weight: 700; font-size: 1.05em; min-width: 1.5em; color: var(--r-accent); display: inline-flex; align-items: center; justify-content: center; } .currency-option .currency-sym { margin-right: .25rem; } .select2-results__option--highlighted .currency-sym { color: inherit; } .currency-selected { font-weight: 600; } /* ── BREAKPOINTS ───────────────────────── */ @media (min-width: 1200px) { .register-container { max-width: 580px; } .register-form { padding: 2.25rem 2rem; } } @media (max-width: 768px) { body { padding: 1.25rem 1rem; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; } .register-container { width: 100%; max-width: min(540px, 96%); padding: 0; } .register-form { padding: 1.5rem 1.25rem; } .form-group { min-width: 0; } .form-row { min-width: 0; } .register-form .form-control, .register-form select.form-control { min-width: 0; height: 44px !important; min-height: 44px !important; font-size: 16px !important; /* prevents iOS zoom */ } .register-form .btn-google-modern, .register-form .btn-primary-modern, .btn-secondary-modern { height: 44px !important; } .select2-container { width: 100% !important; max-width: 100% !important; } .step-label { display: none; } .step-divider { width: 22px; } } @media (max-width: 540px) { .form-row { grid-template-columns: 1fr; gap: 0; } .form-row .form-group { width: 100%; } } @media (max-width: 480px) { body { padding: 1rem .75rem; padding-left: max(.75rem, env(safe-area-inset-left)); padding-right: max(.75rem, env(safe-area-inset-right)); } .register-form { padding: 1.25rem 1rem; } } /* ── DARK MODE — tokens match css/pages/index.css so register/login feel identical ── */ html[data-theme="dark"] { --r-bg-page: #050507; --r-bg-card: #0a0a0d; --r-bg-input: rgba(255, 255, 255, .03); --r-bg-muted: rgba(255, 255, 255, .04); --r-text: #e8eaed; --r-text-muted: #9aa0a6; --r-text-faint: #6b7280; --r-border: rgba(255, 255, 255, .10); --r-border-soft: rgba(255, 255, 255, .05); --r-border-hover: rgba(255, 255, 255, .20); } html[data-theme="dark"] body, html[data-theme="dark"]:root body { background: var(--r-bg-page) !important; background-color: var(--r-bg-page) !important; } html[data-theme="dark"] .register-card { background: var(--r-bg-card); border-color: var(--r-border-soft); box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 8px 28px rgba(0, 0, 0, .4); } html[data-theme="dark"] .register-form .form-control::placeholder { color: #4b5563; } html[data-theme="dark"] .currency-sym { color: var(--r-text); } html[data-theme="dark"] .register-message-error, html[data-theme="dark"] .alert-danger { background: rgba(239, 68, 68, .12); color: #fca5a5; border-color: rgba(239, 68, 68, .25); } html[data-theme="dark"] .alert-success { background: rgba(16, 185, 129, .12); color: #6ee7b7; border-color: rgba(16, 185, 129, .25); } html[data-theme="dark"] .alert-warning { background: rgba(245, 158, 11, .12); color: #fcd34d; border-color: rgba(245, 158, 11, .25); } html[data-theme="dark"] .alert-info { background: rgba(59, 130, 246, .12); color: #93c5fd; border-color: rgba(59, 130, 246, .25); } html[data-theme="dark"] .module-card.selected { background: rgba(var(--r-accent-rgb), .12); } html[data-theme="dark"] .ref-welcome-banner { background: rgba(var(--r-accent-rgb), .10); border-color: rgba(var(--r-accent-rgb), .55); color: #f3f4f6; } html[data-theme="dark"] .referral-group.is-valid { background: rgba(16, 185, 129, .08); border-color: rgba(16, 185, 129, .55); } html[data-theme="dark"] .referral-group.is-invalid { background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .55); }