/** * ---------------------------------------------------------------- * Enterprise-level Pure CSS Registration Styles * ---------------------------------------------------------------- * Identity_Color_Scheme applied throughout: * - Background gradient: deep dark with subtle purple undertone * - Primary accent: var(--primary, #D4A574) warm gold * - Hover accent: var(--primary-hover, #C4956A) darkened gold * - Muted accent: var(--primary-muted, rgba(212, 165, 116, 0.15)) * - Card glow: rgba(212, 165, 116, 0.08) * ---------------------------------------------------------------- */ /** Reset — normalize box model across all elements */ * { margin: 0; padding: 0; box-sizing: border-box; } /** * Body — full viewport centered layout with Identity_Color_Scheme * auth gradient background */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; /** Auth page background — deep dark with subtle purple undertone */ background: linear-gradient(135deg, #1a1a2e 0%, #2a1f3d 50%, #0d0d1a 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; } /** * Registration card — white surface with warm gold glow shadow * @see Requirement 10.5 — subtle glow using --primary at low opacity */ .register-card { background: #ffffff; border-radius: 16px; /** Subtle warm gold glow */ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(212, 165, 116, 0.08); padding: 3rem 2.5rem; width: 100%; max-width: 500px; position: relative; } /** Registration header — centered title and subtitle */ .register-header { text-align: center; margin-bottom: 2.5rem; } .register-header h2 { color: #1a202c; font-size: 1.875rem; font-weight: 700; margin: 0 0 0.75rem 0; line-height: 1.2; } .register-header p { color: #718096; font-size: 0.875rem; margin: 0; } /** Alert messages — error display for validation failures */ .message { padding: 0.875rem 1rem; border-radius: 8px; margin-bottom: 1.5rem; font-size: 0.875rem; font-weight: 500; } /** Danger alert — red background for validation errors */ .message-error { background-color: #fed7d7; color: #c53030; border: 1px solid #feb2b2; } /** Form group — vertical spacing between form fields */ .field-wrapper { margin-bottom: 1.5rem; } /** * Input field — styled text input with Identity_Color_Scheme * focus state using var(--primary) accent * @see Requirement 4.6 — input focus border uses --primary accent */ .input-field { width: 100%; padding: 0.875rem 1rem; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 1rem; line-height: 1.5; color: #2d3748; background-color: #ffffff; transition: all 0.2s ease; } /** * Input focus state — warm gold border with muted gold glow * Uses var() with hardcoded fallbacks per spec requirements */ .input-field:focus { outline: none; border-color: var(--primary, #D4A574); box-shadow: 0 0 0 3px var(--primary-muted, rgba(212, 165, 116, 0.15)); } /** Input placeholder — muted gray text */ .input-field::placeholder { color: #a0aec0; } /** Input error state — red border for validation failures */ .input-field.has-error { border-color: #e53e3e; } /** Validation feedback — red error text below inputs */ .invalid-feedback { color: #e53e3e; font-size: 0.875rem; margin-top: 0.5rem; font-weight: 500; } /** Checkbox group — horizontal flex layout with gap */ .checkbox-item { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 1rem; } /** * Checkbox input — warm gold accent color matching * Identity_Color_Scheme primary */ .checkbox-item-input { width: 1rem; height: 1rem; margin-top: 0.25rem; accent-color: var(--primary, #D4A574); } /** Checkbox label — muted text with proper line height */ .checkbox-item-label { font-size: 0.875rem; color: #4a5568; line-height: 1.5; } /** Checkbox label links — warm gold accent color */ .checkbox-item-label a { color: var(--primary, #D4A574); text-decoration: none; transition: color 0.2s ease; } .checkbox-item-label a:hover { color: var(--primary-hover, #C4956A); text-decoration: underline; } /** * Submit button — Identity_Color_Scheme primary accent * @see Requirement 4.8 — submit button uses --primary background * with --primary-hover on hover */ .button-register { width: 100%; padding: 0.875rem 1rem; background: var(--primary, #D4A574); color: #ffffff; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } /** * Submit button hover — darkened gold with lift effect * and warm gold shadow */ .button-register:hover { background: var(--primary-hover, #C4956A); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(212, 165, 116, 0.4); } /** Footer section — centered text below form with top border */ .register-footer { text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; } /** * Footer link — warm gold accent matching Identity_Color_Scheme * with hover transition to darkened gold */ .register-footer a { color: var(--primary, #D4A574); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: color 0.2s ease; } .register-footer a:hover { color: var(--primary-hover, #C4956A); text-decoration: underline; } /** * Responsive — compact padding on small screens * @see Requirement 9 — mobile responsive design */ @media (max-width: 480px) { body { padding: 1rem 0.5rem; } .register-card { padding: 2rem 1.5rem; } } 


/* ==========================================================================
   Account Type Card Selector
   Identity_Color_Scheme — warm gold accent (#D4A574)
   ========================================================================== */

.account-type-section {
    margin-bottom: 2rem;
}

.account-type-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
    text-align: center;
}

.account-type-error {
    color: #e53e3e;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    text-align: center;
}

/* 2-column grid; 5th card (agency) spans both columns */
.account-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Make agency span both columns so it sits centred at the bottom */
.account-type-card[data-type="agency"] {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
    width: 100%;
}

.account-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    text-align: center;
}

.account-type-card:hover {
    border-color: var(--primary, #D4A574);
    background: var(--primary-muted, rgba(212, 165, 116, 0.06));
    transform: translateY(-1px);
}

.account-type-card.selected {
    border-color: var(--primary, #D4A574);
    background: var(--primary-muted, rgba(212, 165, 116, 0.12));
    box-shadow: 0 0 0 3px var(--primary-muted, rgba(212, 165, 116, 0.25));
}

.account-type-icon {
    font-size: 1.75rem;
    line-height: 1;
}

.account-type-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1a202c;
}

.account-type-desc {
    font-size: 0.75rem;
    color: #718096;
    line-height: 1.3;
}

/* Responsive — stack to single column on very small screens */
@media (max-width: 400px) {
    .account-type-grid {
        grid-template-columns: 1fr;
    }
    .account-type-card[data-type="agency"] {
        grid-column: 1;
        max-width: 100%;
    }
}