html { font-size: 14px; } @media (min-width: 768px) { html { font-size: 16px; } } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } html { position: relative; min-height: 100%; } body { margin-bottom: 60px; } /* General body centering for auth pages if not using a specific layout */ body.auth-page-body { display: flex; flex-direction: column; /* Stack direct children vertically */ align-items: center; /* Center direct children horizontally */ justify-content: center; /* Center the block of children vertically */ min-height: 100vh; background-color: #f8f9fa; font-family: sans-serif; margin: 0; /* Add some padding to the body if you want space from viewport edges, otherwise, the centered content might touch the edges if it's large. */ padding: 20px; /* Example padding */ } /* Mobile-First Styles (Default) These styles apply to all screen sizes unless overridden by a media query. This is your "mobile" style block. */ .auth-container { background-color: white; padding: 30px 40px; border: 1px solid #e0e0e0; /* Light gray border */ border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); text-align: center; /* Center text inside the container */ /* On mobile, we want the form to be almost full-width but not exceed 400px. Using width: 100% allows it to shrink on very narrow screens without overflow. */ width: 100%; max-width: 400px; } /* Laptop and Desktop Styles This media query applies only when the browser window is 768px or wider. This is your "laptop and desktop" style block. */ @media (min-width: 768px) { .auth-container { /* As you requested, we set a minimum and maximum width to fix the size on larger screens for a more consistent desktop appearance. */ min-width: 420px; max-width: 420px; } } /* This style is for the tag on your login, signup, and magic code pages. It uses Flexbox to center its direct children both vertically and horizontally. */ body.auth-layout-body { display: flex; flex-direction: column; /* Stacks the form and its footer vertically */ justify-content: center; /* Centers the content block vertically */ align-items: center; /* Centers the content block horizontally */ min-height: 100vh; /* Ensures the body takes full viewport height */ background-color: #f8f9fa; font-family: sans-serif; margin: 0; padding: 20px; /* Provides some space from the screen edges */ } .auth-container h2 { margin-bottom: 25px; font-size: 24px; font-weight: 600; color: #333; } .auth-form .form-group { margin-bottom: 20px; text-align: left; /* Align labels and inputs to the left */ } .auth-form .form-group label { display: block; margin-bottom: 5px; font-weight: 500; color: #555; } .auth-form .form-control { width: 100%; padding: 10px 12px; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box; /* Important for width 100% */ } .auth-form .btn-primary { width: 100%; padding: 12px; background-color: #6a0dad; /* Purple color from screenshot */ border: none; color: white; font-size: 16px; font-weight: 500; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; } .auth-form .btn-primary:hover { background-color: #540a8c; } .auth-divider { margin: 25px 0; text-align: center; color: #aaa; font-size: 14px; display: flex; align-items: center; } .auth-divider::before, .auth-divider::after { content: ''; flex-grow: 1; height: 1px; background-color: #e0e0e0; margin: 0 10px; } .social-login-btn { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ced4da; background-color: white; color: #333; font-size: 15px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; /* Space between icon and text */ transition: background-color 0.2s; } .social-login-btn:hover { background-color: #f5f5f5; } .social-login-btn .social-icon { /* Placeholder for icons */ font-weight: bold; /* Example for G/M */ } .auth-links { margin-top: 20px; font-size: 14px; color: #555; } .auth-links a { color: #6a0dad; /* Purple */ text-decoration: none; } .auth-links a:hover { text-decoration: underline; } .footer-links { text-align: center; margin-top: 30px; font-size: 13px; color: #777; } .footer-links a { color: #555; text-decoration: none; margin: 0 10px; } .footer-links a:hover { text-decoration: underline; } .error-message { color: red; font-size: 0.9em; margin-top: 5px; text-align: left; } /* Magic Code Page Specifics */ .magic-code-inputs { display: flex; justify-content: space-between; /* Distribute space between inputs */ margin-bottom: 20px; } .magic-code-inputs input { width: 45px; /* Adjust width as needed */ height: 50px; text-align: center; font-size: 20px; border: 1px solid #ced4da; border-radius: 4px; margin: 0 2px; /* Small margin between boxes */ } .magic-code-inputs input.invalid { border-color: #ff0000; /* Red border for invalid */ background-color: #ffe0e0; /* Light pink background for invalid */ } .magic-code-prompt { margin-bottom: 20px; font-size: 15px; color: #333; } .spam-folder-link { font-size: 14px; color: #555; margin-top: 15px; } /* Apply auth-page-body to relevant pages using or a custom layout */ /* If using _Layout.cshtml, you might need to adjust it or create a _AuthLayout.cshtml */ /* CSS for the Auth Page Layout */ /* 1. Turn the body into a full-height flex container */ body.site-body { display: flex; flex-direction: column; /* Stack children vertically (main, footer) */ min-height: 100vh; /* Make the body at least as tall as the screen */ margin: 0; } /* 2. Make the main content area grow and center its content */ main.auth-content-area { flex-grow: 1; /* This is the key: it expands to fill all available space */ /* These styles will center the .auth-container block within this main area */ display: flex; justify-content: center; /* Centers horizontally */ align-items: center; /* Centers vertically */ padding: 20px; /* Adds some breathing room */ } /* 3. Style the auth footer */ footer.site-footer { flex-shrink: 0; /* Prevents the footer from shrinking */ text-align: center; color: #555; padding-bottom: 20px; /* The 20px space below the links */ } footer.site-footer div { margin-bottom: 5px; /* Adds a little space above the links */ } footer.site-footer a { color: #555; text-decoration: none; margin: 0 10px; } @font-face { font-family: 'Satoshi'; src: url('../Fonts/Satoshi/Satoshi-Variable.woff2') format('woff2'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Satoshi'; src: url('../Fonts/Satoshi/Satoshi-Regular.woff2') format('woff2'); font-weight: 500; font-style: normal; }