/* main/static/main/css/signup.css */ /* Global CSS variables (e.g., var(--primary), var(--neutral-100), etc.) and base styles (body, .card, .btn, .form-control, .alert) are expected to be available from base.css. */ /* SIGNUP PAGE SPECIFIC BODY BACKGROUND: If the background image is ONLY for the signup page (and login page), and different from the global body background, add a class to the tag in signup.html (e.g., ) and style it here (or ensure it's styled in login.css if they share a common auth CSS). The rule body.auth-page-bg from login.css will apply if the class is the same. */ body.signup-page-bg { /* Add this class to in login.html if needed */ background-image: url("../img/signup.bfcb0702c827.jpg") !important; /* Keep !important if overriding a more general body bg */ background-size: cover !important; background-repeat: no-repeat !important; background-attachment: fixed !important; background-position: 50% 50% !important; /* height: 100vh !important; */ /* min-height is usually better from base.css */ } body.signup-page-bg::before { content: ""; position: fixed; /* Or absolute if body is the positioning context */ left: 0; right: 0; top: 0; bottom: 0; z-index: -1; /* Place it behind the content */ background-image: inherit; /* Inherit from the body's background-image */ background-size: cover; background-repeat: no-repeat; background-attachment: fixed; /* Important for fixed backgrounds */ background-position: 50% 50%; /* Apply filters here */ filter: blur(3px) brightness(0.7); /* Adjust blur and brightness values */ /* -webkit-filter: blur(3px) brightness(0.7); */ /* For older Safari */ /* Optional: Add a subtle overlay color for more dimming */ /* background-color: rgba(0, 0, 0, 0.2); */ /* Example: 20% black overlay */ /* If using overlay, you might want 'background-blend-mode: overlay;' or 'multiply;' but this can get complex with fixed attachments. A simpler approach for overlay is another pseudo-element or just rely on brightness. */ } .signup-container { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 120px); /* Adjust 120px based on your header/footer size */ padding: var(--space-6) 0; /* Using spacing variable */ } .signup-container .row { width: 100%; } /* SIGNUP CARD SPECIFIC STYLES: Similar to login-card, leveraging base .card styles and overriding for specifics. */ .signup-card { /* This class should be on the

element */ background-color: rgba(255, 255, 255, 0.75) !important; /* Semi-transparent white */ backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); box-shadow: var(--shadow-lg) !important; /* More prominent shadow */ border: none !important; border-radius: var(--radius-lg); max-width: 480px; /* Slightly wider for signup potentially */ margin: 0 auto; } .signup-card .card-header { background-color: var(--primary) !important; color: var(--accent-gold) !important; font-weight: var(--font-weight-semibold); text-align: center; padding: var(--space-4); border-bottom: none; border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); } .signup-card .card-header h3 { /* If h3 is used inside */ margin: 0; font-size: var(--text-xl); } .signup-card .card-body { color: var(--neutral-800) !important; padding: var(--space-5) var(--space-6); } /* Input field styling within the signup card */ .signup-card .form-group label { font-weight: var(--font-weight-medium); color: var(--neutral-700); margin-bottom: var(--space-2); font-size: var(--text-sm); } .signup-card .form-control { /* Inputs within the signup card */ border-radius: var(--radius-sm); padding: var(--space-3); border: 1px solid var(--neutral-300); background-color: rgba(255,255,255,0.8); } .signup-card .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,105,217,0.15); background-color: white; } .signup-card .form-text.text-muted { color: var(--neutral-600) !important; font-size: var(--text-xs); } .signup-card .card-footer { background-color: rgba(245, 245, 245, 0.6); border-top: 1px solid rgba(0, 0, 0, 0.05); padding: var(--space-4); border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); } /* Links in footer */ .signup-card .card-footer a { color: var(--primary); text-decoration: none; font-weight: var(--font-weight-medium); } .signup-card .card-footer a:hover { color: var(--primary-dark); text-decoration: underline; } .contact-support { /* Shared style, potentially move to base.css if used on more pages */ display: block; text-align: center; margin-top: var(--space-3); font-size: var(--text-xs); color: var(--neutral-600); } .contact-support a { color: var(--primary) !important; text-decoration: none; transition: color 0.3s ease; font-weight: var(--font-weight-medium); } .contact-support a:hover { color: var(--primary-dark) !important; text-decoration: underline; } /* ALERT STYLING (Inherited from login.css if loaded together or from base.css if defined there): The alert styles (.alert, .alert-success etc.) are identical to those in login.css. If login.css and signup.css are always loaded on their respective pages only, duplicating these alert rules is okay. Alternatively, if you have a common "auth.css" or if these alert styles are intended to be global, they should be moved to base.css. For now, I'll assume they are specific or acceptably duplicated. They've already been refactored in the login.css response to use variables. If copying from that response: */ .alert { text-align: center !important; border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: var(--space-4); font-weight: var(--font-weight-medium); border-width: 0 0 0 4px; /* Left border only */ border-style: solid; font-size: var(--text-sm); } .alert-success { background-color: rgba(var(--success-rgb), 0.1); /* Define --success-rgb in :root */ border-left-color: var(--success); color: var(--success-text, darken(var(--success), 25%)); /* Define --success-text in :root */ } .alert-danger { background-color: rgba(var(--danger-rgb), 0.1); /* Define --danger-rgb in :root */ border-left-color: var(--error); color: var(--danger-text, darken(var(--error), 25%)); /* Define --danger-text in :root */ } .alert-warning { background-color: rgba(var(--warning-rgb), 0.1); /* Define --warning-rgb in :root */ border-left-color: var(--warning); color: var(--warning-text, darken(var(--warning), 25%)); /* Define --warning-text in :root */ } .alert-info { background-color: rgba(var(--info-rgb), 0.1); /* Define --info-rgb in :root */ border-left-color: var(--primary); color: var(--info-text, darken(var(--primary), 25%)); /* Define --info-text in :root */ } .text-danger { /* Scoped to signup card for safety */ .signup-card & { text-align: center; display: block; font-size: var(--text-xs); margin-top: var(--space-1); color: var(--error) !important; } } .alert.invalid-credentials, .signup-card .alert.invalid-credentials { /* More specific selector for alerts */ color: var(--error) !important; font-weight: var(--font-weight-semibold) !important; background-color: rgba(var(--danger-rgb), 0.15); border-left-color: var(--error); animation: shake 0.5s; /* Keep shake animation */ } /* Buttons within the signup card */ .signup-card .btn-block, .signup-card .btn-primary { display: block; width: 100%; padding: var(--space-3); font-size: var(--text-md); font-weight: var(--font-weight-semibold); /* Other .btn-primary styles will be inherited from base.css */ } /* Keyframes for shake animation (if not already in login.css and loaded) */ @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } } /* Commented out old, very general .container and .card styles as they should be handled by base.css or more specific selectors */ /* .container { ... } .card { ... } .social_icon span { ... } .social_icon span:hover { ... } .card-header h3 { ... } .social_icon { ... } */