/* For Tablets (portrait and landscape) */ @media (max-width: 1024px) { body { padding: 15px; } h1 { font-size: 1.8em; /* Slightly bigger text for readability */ font-family: 'Clash Display', sans-serif; } p { font-size: 1.3em; /* Adjust font size for tablets */ font-family: 'Clash Display', sans-serif; } form { width: 90%; padding: 15px; } input, select { font-size: 14px; /* Adjust font size */ padding: 8px; /* Adjust padding */ } button { font-size: 14px; /* Adjust font size */ padding: 10px; /* Adjust padding */ } .header { flex-direction: column; /* Stack the logo and title for smaller tablets */ margin-bottom: 10px; } .header img { width: 30px; /* Slightly smaller logo size */ } .header h1 { font-size: 2em; /* Slightly bigger font for better readability */ font-family: 'Clash Display', sans-serif; } p { font-family: 'Clash Display', sans-serif;} } /* For Small Laptops (between 1024px and 1366px) */ @media (min-width: 1024px) and (max-width: 1366px) { body { padding: 20px; } h1 { font-size: 2em; /* Adjust heading size for small laptops */ } form { width: 80%; /* Maximize form width for small laptops */ } input, select { font-size: 16px; } .header h1 { font-size: 2.3em; /* Larger title size for better visibility */ font-family: 'Clash Display', sans-serif; } .popup { width: 70%; /* Popup size adjustment */ } p { font-family: 'Clash Display', sans-serif;} } /* For Large Screens (Desktop and above) */ @media (min-width: 1366px) { body { padding: 20px; } h1 { font-size: 2.5em; } .header h1 { font-size: 2.5em; font-family: 'Clash Display', sans-serif; } .popup { width: 50%; } p { font-family: 'Clash Display', sans-serif;} } body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 87vh; margin: 0; padding: 20px; } h1 { margin-bottom: 5px; font-size: 1.4em; color: white; } p { font-family: 'Clash Display', sans-serif; /* font-family:Dancing Script; */ font-size: 1.4em; font-weight:100; color: white; margin-bottom: 10px; } .typing-text { font-family: 'Clash Display', sans-serif; font-size: 1.4em; font-weight: 300; color: white; margin-bottom: 10px; letter-spacing: 0.5px; } /* Blinking cursor */ .cursor { display: inline-block; margin-left: 4px; animation: blink 1s infinite; color: #ffffffcc; } @keyframes blink { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } form { display: flex; /* Arrange children vertically */ flex-direction: column; /* Stack form elements in a column */ width: 88%; /* Form width relative to parent */ max-width: 400px; /* Max width to keep form from growing too large */ padding: 20px; /* Internal spacing around content */ border-radius: 10px; /* Rounded corners for smooth look */ margin-top: 90px; /* Space below the form */ /* Shadow for subtle depth box-shadow: 2px 2px 4px #ddd, -2px -2px 5px #fdfdfd; */ /* Add blur effect behind form (frosted glass look) */ background: rgba(255, 255, 255, 0.3); /* Semi-transparent white background */ backdrop-filter: blur(10px); /* Blur whatever is behind the form */ -webkit-backdrop-filter: blur(10px); /* Safari support */ /* Optional: add border with transparency to enhance glass effect */ border: 1px solid rgba(255, 255, 255, 0.4); } input { margin-bottom: 10px; padding: 10px; font-size: 16px; border: 1px solid #f1f1f1; border-radius: 6px; background: #fdfdfd; box-shadow: inset 3px 3px 8px #f1f1f1, inset -3px -3px 8px #ffffff; transition: all 0.3s ease; } select { margin-bottom: 10px; padding: 40px; font-size: 19px; font-family:Dancing Script; color:#0591c9; border: 1px solid #f1f1f1; border-radius: 5px; background: #f0f0f0; box-shadow: inset 3px 3px 8px #d5d5d5, inset -3px -3px 8px #ffffff; transition: all 0.3s ease; } input:focus { outline: none; box-shadow: inset 3px 3px 8px #d5d5d5, inset -3px -3px 8px #ffffff, 0 0 5px #b0cfff; } select { margin-bottom: 10px; padding: 40px; font-size: 19px; border: 1px solid #f1f1f1; border-radius: 5px; background: #f0f0f0; transition: all 0.3s ease; } select:focus { outline: none; box-shadow: inset 3px 3px 8px #d5d5d5, inset -3px -3px 8px #ffffff, 0 0 5px #b0cfff; } button { padding: 12px; font-size: 16px; background-color: #4dc1fc; color: white; border: none; border-radius: 13px; cursor: pointer; margin-bottom: 10px; transition: background-color 0.3s ease; } button:hover { background-color: #31baff; } .message { margin-top: 20px; text-align: center; font-weight: bold; } .header { top:0; display: flex; align-items: center; margin-top: 0px; flex-direction: column; } .roleInput{ width:100%; } .header img { width:40px; /* Adjust size as needed */ height: auto; display:none; margin-bottom: 0px; } .header h1 { font-size: 2.3em; color: white; animation: slideIn 3.7s ease-out; /* Apply slide-in animation */ font-family: 'Clash Display', sans-serif; margin: 0; } /* Slide-in keyframes */ @keyframes slideIn { 0% { transform: translateX(-100%); /* Start off-screen to the left */ opacity: 0; /* Start with no opacity */ } 100% { transform: translateX(0); /* Slide into its final position */ opacity: 1; /* Fully visible */ } } @media (min-width: 768px) { .header { flex-direction: row; margin-bottom: 3px; } .header img { margin-bottom: 0; margin-right: 10px; } .header h1 { font-size: 2.5em; font-family:Verdana, Geneva, Tahoma, sans-serif; } } /* Custom scrollbar for Webkit browsers */ ::-webkit-scrollbar { width: 12px; /* Width of the scrollbar */ } ::-webkit-scrollbar-track { background: #f0f0f0; /* Background of the track */ } ::-webkit-scrollbar-thumb { background-color: #4CAF50; /* Color of the scroll thumb */ border-radius: 10px; /* Roundness of the scroll thumb */ border: 3px solid #f0f0f0; /* Padding around the scroll thumb */ } /* Custom scrollbar for Firefox */ html { scrollbar-width: thin; /* Width of the scrollbar */ scrollbar-color: #4CAF50 #f0f0f0; /* Color of the scroll thumb and track */ } .form-group #establishment { display: none; /* Initially hide the establishment field */ } /* Popup container */ .popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; animation: gradientShift 1s ease-in-out infinite; /* Animation for moving gradient */ color: green; padding: 20px; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.103); z-index: 1000; text-align: center; width:80%; animation: fadeIn 0.5s ease-out; } /* Hidden class to hide popup */ .hidden { display: none; } /* Popup content */ .popup-content { font-size: 1.5em; color:white; } .popup-message { font-size: 1.5em; color:white; } /* Emoji styling */ .emoji { display: inline-block; font-size: 7ch; /* Adjust the size as needed */ animation: wave 1s infinite; /* Apply the wave animation */ } /* Keyframes for gradient movement */ @keyframes gradientShift { 0% { background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Keyframes for the waving animation */ @keyframes wave { 0%, 100% { transform: rotate(0deg); /* No rotation */ } 50% { transform: rotate(20deg); /* Rotate to simulate waving */ } } /* Keyframes for fade-in animation */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Styling for Custom Dropdown */ .custom-dropdown { position: relative; min-width: 300px; width:100%; margin-bottom: 10px; font-family: Arial, sans-serif; } .loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 2em; font-family: Arial, sans-serif; text-shadow: 0 0 5px #000; display: none; } .dropdown-selected { padding: 5px 15px; border: 1px solid #ccc; border-radius: 6px; background-color: rgba(255, 255, 255, 0.9); /* Slight transparency */ cursor: pointer; display: flex; align-items: center; color:#949494; position: relative; z-index: 10; /* Ensure it appears on top */ } .dropdown-options { display: none; /* Hidden by default */ position: fixed; /* Options float above everything */ top: 30%; /* Position dropdown options towards the top of the page */ left: 50%; transform: translateX(-50%); /* Center horizontally */ width: 100%; max-width: 300px; border-radius: 25px; background-color: rgba(255, 255, 255, 0.9); /* Slight transparency */ z-index: 199; /* Highest layer to ensure visibility */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.158); backdrop-filter: blur(30px); /* Add blur effect */ } .dropdown-option { display: flex; align-items: center; padding: 10px; cursor: pointer; transition: background-color 0.3s ease; } .dropdown-option:hover { background-color: rgba(240, 240, 240, 0.9); /* Highlight with transparency */ border-radius:25px; } .role-icon { width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; border:1px solid #2dbff8; padding:0.8; } .forgot-password{ color:#2dbff8; } /* Ensure full viewport coverage */ .loading-container { position: fixed; /* Stay fixed over everything */ top: 0; left: 0; width: 100vw; height: 100vh; display: flex; align-items: center; /* Center vertically */ justify-content: center; /* Center horizontally */ background: rgba(255, 255, 255, 0.6); /* Light white tint */ backdrop-filter: blur(24px); /* Strong blur effect */ -webkit-backdrop-filter: blur(24px); /* iOS specific */ z-index: 1000; /* Ensure it stays on top */ } /* Glassmorphic effect for animation background */ .glassmorph { background: transparent !important; } /* Make sure the animation is centered */ #loading-animation { width: 150px; height: 150px; background: transparent !important; } .lottie-animation svg { background-color: transparent !important; } body { /* Existing styles... */ position: relative; /* Needed for layering the background */ background: url('pexels-valeriya-18573171.jpg') no-repeat center center fixed; background-size: cover; /* Cover the entire screen */ z-index: 0; /* Ensure it stays behind content */ } /* Container stays the same */ .bubble-background { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden; pointer-events: none; /* Allows user to click through bubbles */ background: transparent; /* Keep background transparent if needed */ } /* Avatar bubbles */ .bubble { position: absolute; bottom: 0; width: 40px; height: 40px; border-radius: 50%; /* Profile image */ background-image: var(--img); background-size: cover; background-position: center; /* Premium styling */ box-shadow: 0 4px 20px rgba(0,0,0,0.25), inset 0 0 10px rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.6); animation: rise 20s linear infinite; } /* Different bubble sizes and positions (randomized) */ .bubble:nth-child(1) { left: 10%; width: 14px; height: 14px; animation-duration: 18s; } .bubble:nth-child(2) { left: 20%; width: 14px; height: 14px; animation-duration: 22s; } .bubble:nth-child(3) { left: 30%; width: 13.5px; height: 13.5px; animation-duration: 16s; } .bubble:nth-child(4) { left: 40%; width: 14.5px; height: 14.5px; animation-duration: 24s; } .bubble:nth-child(5) { left: 50%; width: 14px; height: 14px; animation-duration: 19s; } .bubble:nth-child(6) { left: 60%; width: 14.5px; height: 14.5px; animation-duration: 21s; } .bubble:nth-child(7) { left: 70%; width: 15px; height: 15px; animation-duration: 23s; } .bubble:nth-child(8) { left: 80%; width: 14px; height: 14px; animation-duration: 17s; } .bubble:nth-child(9) { left: 90%; width: 15px; height: 15px; animation-duration: 20s; } .bubble:nth-child(10) { left: 95%; width: 14px; height: 14px; animation-duration: 25s; } .typing-text { background: linear-gradient(90deg, #ffffff, #cfcfff, #ffffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .typing-text { transition: opacity 0.3s ease; } /* Keyframes for the bubble rising effect */ @keyframes rise { 0% { transform: translateY(0) scale(1); opacity: 0.9; } 50% { opacity: 1; transform: translateY(-50vh) scale(1.1); } 100% { transform: translateY(-100vh) scale(1); opacity: 0; } } video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; z-index: 9999; object-fit: contain; /* Change from cover to contain */ } /* ========================= FXB PREMIUM INSTALL BANNER ========================= */ .install-banner{ position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 430px; border-radius: 28px; background: rgba(15, 191, 223, 0.82); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 10px 35px rgba(0,0,0,0.28), 0 2px 10px rgba(0,0,0,0.18); z-index: 999999; overflow: hidden; animation: installSlideUp 0.7s cubic-bezier(.19,1,.22,1); } .install-content{ display:flex; align-items:center; gap:14px; padding:16px; position:relative; z-index:2; } .install-logo{ width:58px; height:58px; border-radius:18px; object-fit:cover; box-shadow: 0 6px 20px rgba(0,0,0,0.2); } .install-text{ flex:1; } .install-text h3{ margin:0; color:white; font-size:17px; font-weight:700; } .install-text p{ margin:4px 0 0; color:rgba(255,255,255,0.78); font-size:13px; } #installBtn{ border:none; background:white; color: rgba(15, 191, 223, 0.82); font-weight:700; padding:12px 18px; border-radius:16px; cursor:pointer; } #closeInstallBanner{ background:none; border:none; color:white; font-size:18px; cursor:pointer; opacity:0.7; } .install-glow{ position:absolute; inset:0; background: radial-gradient(circle at top left, rgba(255,255,255,0.18), transparent 50%); } .hidden{ display:none !important; } @keyframes installSlideUp{ from{ opacity:0; transform: translateX(-50%) translateY(120px); } to{ opacity:1; transform: translateX(-50%) translateY(0); } } /* Optional: add an overlay for better contrast with content */ body::before { content: ""; position: fixed; /* Stays fixed while scrolling */ top: 0; left: 0; right: 0; bottom: 0; z-index: -1; /* Behind body content */ }
|
Forgot Password?