/* main/static/main/css/login.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. */ /* LOGIN PAGE SPECIFIC BODY BACKGROUND: If the background image is ONLY for the login page and signup page, and different from the global body background, you can add a class to the tag in login.html and signup.html (e.g., ) and style it here. Otherwise, the global var(--neutral-100) from base.css will apply. */ body.auth-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.auth-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. */ } .login-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 */ } .login-container .row { width: 100%; } /* LOGIN CARD SPECIFIC STYLES: The .card styles in base.css provide a foundation. We override here for login/signup specific transparency and header. */ .login-card { /* This class should be on the

element in your template */ background-color: rgba(255, 255, 255, 0.75) !important; /* Semi-transparent white */ backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); /* For Safari */ box-shadow: var(--shadow-lg) !important; /* More prominent shadow for login card */ border: none !important; /* Overriding any base card border */ border-radius: var(--radius-lg); /* Consistent radius from base theme */ max-width: 450px; /* Example max-width for login card */ margin: 0 auto; /* Center the card */ } .login-card .card-header { background-color: var(--primary) !important; color: var(--accent-gold) !important; /* Using the defined gold variable */ font-weight: var(--font-weight-semibold); /* Bolder for header title */ text-align: center; padding: var(--space-4); /* Consistent padding */ border-bottom: none; /* Remove border if bg is solid color */ border-top-left-radius: var(--radius-lg); /* Match card radius */ border-top-right-radius: var(--radius-lg); } .login-card .card-header h3 { /* If h3 is used inside */ margin: 0; font-size: var(--text-xl); } .login-card .card-body { color: var(--neutral-800) !important; /* Dark text for readability on semi-transparent bg */ padding: var(--space-5) var(--space-6); /* More padding in body */ } /* Input field styling within the login card */ .login-card .form-group label { font-weight: var(--font-weight-medium); color: var(--neutral-700); margin-bottom: var(--space-2); font-size: var(--text-sm); } .login-card .form-control { /* Inputs within the login card */ border-radius: var(--radius-sm); /* Standard input radius */ padding: var(--space-3); border: 1px solid var(--neutral-300); background-color: rgba(255,255,255,0.8); /* Slightly transparent inputs */ } .login-card .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,105,217,0.15); /* Consistent focus */ background-color: white; } .login-card .form-text.text-muted { color: var(--neutral-600) !important; /* Ensure muted text is readable */ font-size: var(--text-xs); } .login-card .card-footer { background-color: rgba(245, 245, 245, 0.6); /* Slightly transparent footer */ border-top: 1px solid rgba(0, 0, 0, 0.05); /* Very subtle top border */ padding: var(--space-4); border-bottom-left-radius: var(--radius-lg); /* Match card radius */ border-bottom-right-radius: var(--radius-lg); } /* Links in footer (e.g., "Don't have an account?") */ .login-card .card-footer a { color: var(--primary); text-decoration: none; font-weight: var(--font-weight-medium); } .login-card .card-footer a:hover { color: var(--primary-dark); text-decoration: underline; } .contact-support { /* Shared between login and signup */ 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; /* Keep important if needed */ text-decoration: none; transition: color 0.3s ease; font-weight: var(--font-weight-medium); } .contact-support a:hover { color: var(--primary-dark) !important; /* Keep important if needed */ text-decoration: underline; } /* ALERT STYLING: Base .alert styles should be in base.css. Here we can add login/signup specific overrides if needed. The provided alert styles are good and use rgba for backgrounds. Let's ensure colors map to our variables. */ .alert { /* This will apply to all alerts, ensure it's what you want or scope it e.g. .login-card .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); /* Assuming --success-rgb is defined */ /* Or use var(--primary-light) or similar for consistency if fixed alpha is ok */ border-left-color: var(--success); color: var(--success-text, darken(var(--success), 25%)); /* Assuming --success-text is defined */ } .alert-danger { background-color: rgba(var(--danger-rgb), 0.1); /* Assuming --danger-rgb is defined */ border-left-color: var(--error); /* Using --error as it's defined */ color: var(--danger-text, darken(var(--error), 25%)); /* Assuming --danger-text is defined */ } .alert-warning { background-color: rgba(var(--warning-rgb), 0.1); /* Assuming --warning-rgb is defined */ border-left-color: var(--warning); color: var(--warning-text, darken(var(--warning), 25%)); /* Assuming --warning-text is defined */ } .alert-info { background-color: rgba(var(--info-rgb), 0.1); /* Assuming --info-rgb is defined */ border-left-color: var(--primary); /* Using --primary for info, as it's a common choice */ color: var(--info-text, darken(var(--primary), 25%)); /* Assuming --info-text is defined */ } /* Error text for form validation, often a Bootstrap class */ .text-danger { /* This might be too general if not scoped to forms */ text-align: center; display: block; /* Keep if it helps layout */ font-size: var(--text-xs); margin-top: var(--space-1); color: var(--error) !important; /* Use error color */ } /* Invalid credentials alert styling */ .alert.invalid-credentials, /* More specific selector for login/signup alerts */ .login-card .alert.invalid-credentials, .signup-card .alert.invalid-credentials { color: var(--error) !important; font-weight: var(--font-weight-semibold) !important; /* Bolder for emphasis */ background-color: rgba(var(--danger-rgb), 0.15); /* Slightly stronger background */ border-left-color: var(--error); animation: shake 0.5s; /* Keep shake animation */ } /* Buttons within the login card */ .login-card .btn-block, .login-card .btn-primary { /* Ensure primary buttons in login card follow theme */ display: block; width: 100%; padding: var(--space-3); /* Larger padding for auth buttons */ font-size: var(--text-md); font-weight: var(--font-weight-semibold); /* Other .btn-primary styles (bg, color, hover) will be inherited from base.css */ } /* Keyframes for shake animation */ @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } } /* The CSS originally had rules for `.card` and `.card-header` generally, and then more specific rules for `.login-card`, `.signup-card`. I've focused on styling `.login-card` here. The general `.card` and `.card-header` styles in base.css should cover other cards. If `.signup-card` needs identical styling to `.login-card`, you can group them: .login-card, .signup-card { ... } */