/* 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?
Install the App
For best User Experience
