/* ========================= MOBILE FIRST (Landing Page) ========================= */ /* Page layout */ html, body { height: 100%; margin: 0; font-family: Arial, sans-serif; } body { background: url('../images/allprofessionbig.jpg') no-repeat center center fixed; background-size: cover; color: white; display: flex; justify-content: center; align-items: center; position: relative; } /* Overlay */ .overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 0; } /* Content */ .landing-container { position: relative; z-index: 1; text-align: center; width: 100%; padding: 20px; } /* Logo */ .brand-logo img { max-width: 90%; height: auto; } /* Buttons layout */ .buttons { margin-top: 25px; display: flex; flex-direction: column; /* mobile default */ gap: 15px; align-items: center; } .buttons .btn { width: 100%; max-width: 320px; padding: 14px; font-weight: bold; color: white; border-radius: 8px; text-decoration: none; transition: 0.3s ease; } /* Button Colors */ .btn-register { background: #198754; } .btn-register:hover { background: #157347; } .btn-login { background: #0d6efd; } .btn-login:hover { background: #0b5ed7; } .btn-contact { background: #fd7e14; } .btn-contact:hover { background: #e96b0c; } .btn-about { background: #6f42c1; } .btn-about:hover { background: #59339d; } /* ===== DESKTOP ENHANCEMENTS ===== */ @media (min-width: 768px) { .buttons { flex-direction: row; flex-wrap: wrap; justify-content: center; } .buttons .btn { width: auto; min-width: 180px; } .brand-logo img { max-width: 350px; } } /* Navbar placeholder (optional) */ nav.navbar { position: fixed; width: 100%; z-index: 2; } /* ========================= Shared / Reusable Styles ========================= */ /* Loading Overlay */ #loadingOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; display: flex; align-items: center; justify-content: center; z-index: 9999; } #loadingOverlay img { width: 80px; height: auto; } /* Gradient brand text */ .navbar-brand-gradient { background: linear-gradient(90deg, #0d6efd, #6610f2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; } /* ========================= Register User Page (Scoped) ========================= */ body.page-register-user { background: var(--bs-light); color: inherit; /* undo landing page white text */ display: block; /* undo landing page flex centering */ align-items: initial; justify-content: initial; padding-top: 80px; } body.page-register-user { min-height: 100vh; margin: 0; padding-top: 80px; /* space for navbar */ background: url('../images/allprofessionbig.jpg') no-repeat center center; background-size: cover; color: white; } /* Ensure overlay works on register page */ .page-register-user .overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 0; } /* Content above overlay */ .page-register-user .landing-container { position: relative; z-index: 1; } /* Register card */ .page-register-user .main-card { max-width: 500px; margin: 0 auto; } /* Full-width button */ .page-register-user .btn-custom { width: 100%; } /* Form tweaks */ .page-register-user .form-label { font-weight: 500; } .page-register-user .text-muted { font-size: 0.85rem; } .loading-overlay { position: fixed; inset: 0; background: #fff; display: none; /* hidden by default */ align-items: center; justify-content: center; z-index: 9999; } /* Show only when needed */ .loading-overlay.is-visible { display: flex; }