/* End of file */ /* --- Footer + Page Layout (mirrors styles-light.css) --- */ /* To enable footer layout without breaking existing centered registration, add class 'with-footer' to . */ html.with-footer, body.with-footer { min-height: 100vh; display: flex; flex-direction: column; } body.with-footer > .container { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; min-height: 0; } body.with-footer footer.site-footer { flex-shrink: 0; margin-top: 0; } .site-footer { background: #0d1b2a; opacity: 0.90; color: #ffffff; margin-top: 0px; padding: 40px 24px 28px; font-size: 14px; } .site-footer a { color: #ffffff; text-decoration: none; } .site-footer a:hover { text-decoration: underline; } .footer-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: start; max-width: 1200px; margin: 0 auto 24px; } .footer-brand h5 { margin: 0 0 8px; font-size: 16px; font-weight: 600; } .footer-brand .subtitle { color: #DDDDDD; font-size: 14px; max-width: 260px; line-height: 1.4; margin: 0; } .footer-links ul, .footer-social ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .footer-social ul { flex-direction: row; flex-wrap: wrap; gap: 14px; } .footer-social a { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.25); border-radius:50%; transition:background .25s, border-color .25s; } .footer-social a:hover { background:#1b2f47; border-color:#ffffff; } .footer-social img { width:18px; height:18px; object-fit:contain; filter:brightness(0) invert(1); } .footer-bottom { border-top:1px solid rgba(255,255,255,0.15); padding-top:16px; display:flex; flex-direction:column; gap:8px; max-width:1200px; margin:0 auto; } .footer-bottom-row { display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; } .footer-legal { display:flex; flex-wrap:wrap; gap:18px; align-items:center; } @media (max-width:640px) { .footer-social ul { justify-content:flex-start; } .footer-bottom-row { flex-direction:column; align-items:flex-start; } } /* src/components/RegistrationWizard.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body, html { height: 100%; font-family: 'Geist', sans-serif; background: url('/views/static/img/BaryonsBackgroundLarge.jpg') no-repeat center center fixed; background-size: cover; /* display: flex; */ justify-content: center; align-items: center; } .container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .wizard-container { display: flex; justify-content: center; align-items: center; height: 100vh; } .wizard-content { background-color: rgba(255, 255, 255, 1); padding: 30px; border-radius: 15px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); text-align: center; max-width: 500px; width: 100%; height: 100%; max-height: 800px; display: flex; flex-direction: column; justify-content: space-between; } .circle-image { margin-bottom: 20px; } .circle-image img { width: 150px; height: 150px; border-radius: 50%; border: 1px solid #e3e3e3; } .wizard-step { display: flex; flex-direction: column; height: 100%; } .expanded { flex-grow: 3; display: flex; flex-direction: column; justify-content: top; } .wizard-step h2 { font-size: 2.0rem; font-weight: 300; color: #333; margin-bottom: 10px; } .wizard-step p { font-size: 1rem; font-weight: 400; color: #666; margin-bottom: 30px; } .buttonContainer { display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 20px; margin-top: auto; width: 100%; } .btn { display: block; width: 100%; padding: 12px; background-color: #5fb8d9; color: #fff; font-size: 1rem; font-weight: 400; border: none; border-radius: 30px; cursor: pointer; transition: background-color 0.3s ease; margin-bottom: 15px; } .btn:hover { background-color: #349dc3; color: #fff; } .btn:focus { background-color: #349dc3; color: #fff; box-shadow: 0 0 0 3px rgba(95, 184, 217, 0.5); } .btn:disabled { background-color: #ccc; cursor: not-allowed; } .btn-secondary { background-color: #f8f9fa; color: #349dc3; border: 1px solid #349dc3; font-weight: 500; } .btn-secondary:hover { color: #FFFFFF; background-color: #5fb8d9; font-weight: 500; } .btn-danger { background-color: #d9534f; color: #fff; border: none; } .btn-danger:hover { background-color: #c9302c; color: #fff; } .login-link { font-size: 0.9rem; color: #666; } .login-link a { color: #5fb8d9; text-decoration: none; } .login-link a:hover { text-decoration: underline; } .form-group { margin-bottom: 10px; text-align: left; } .form-group label { display: block; font-size: 0.9rem; margin-bottom: 5px; color: #666; } .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"], .form-group input[type="password"], .form-group select { display: block; /* Ensures each input is on its own line */ width: 100%; /* Full width, adjust as desired */ padding: 12px; /* Top/bottom padding, no left/right so the underline is flush */ margin-bottom: 16px; /* Space below each input */ border: none; /* Remove default border */ border-bottom: 1px solid #ccc; /* Underline */ background: #f5f5f5; /* No background so it appears minimal */ font-size: 1rem; /* Adjust text size */ color: #333; /* Text color */ outline: none; /* Remove outline on focus (handled by border) */ transition: border-color 0.3s ease; } .form-group input[type="text"]:focus, .form-group input[type="email"]:focus, .form-group input[type="tel"]:focus, .form-group input[type="password"]:focus, .form-group select:focus { border-color: #5fb8d9; /* Change the underline color on focus */ } .form-group input[type="text"]::placeholder, .form-group input[type="email"]::placeholder, .form-group input[type="tel"]::placeholder, .form-group input[type="password"]::placeholder, .form-group select::placeholder { color: #999; /* Placeholder text color */ } .form-text { font-size: 0.8rem; color: #999; margin-top: 10px !important; padding-top: 10px !important; } .error-message { color: #d9534f; /* Bootstrap danger color for error */ background-color: #f8d7da; /* Light red background */ border: 1px solid #f5c6cb; /* Slightly darker red border */ padding: 10px; border-radius: 5px; margin-bottom: 20px; text-align: left; /* Align the text to the left */ } .password-validation { margin-top: 10px; } .password-validation div { font-size: 0.9rem; margin-bottom: 5px; } .valid { color: #1f1e22; } .invalid { color: #aea9b0; } .valid svg { color: #5fb8d9; /* Set the color for valid icons */ } .invalid i { color: #eae2ff; /* Set the color for invalid icons */ } .step-indicator-container { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; } .step-indicator-segment { width: 40px; /* Adjust the width for the segment */ height: 6px; /* Height of the segment */ background-color: #ddd; /* Default background color for inactive segments */ margin: 0 5px; /* Space between segments */ border-radius: 3px; /* Make the ends rounded */ transition: background-color 0.3s ease; } .step-indicator-segment.active { background-color: #5fb8d9; /* Active color for completed steps */ } .code-inputs { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; } .code-input { width: 50px; height: 50px; font-size: 2rem; text-align: center; border: 2px solid #d2deeb; border-radius: 8px; background-color: #f0f6fc; color: #333; } .code-input:focus { border-color: #5fb8d9; outline: none; } .form-control.real-code-input { text-align: center; height: 50px; font-size: 1.5rem; text-align: center; border: 2px solid #d2deeb; border-radius: 8px; background-color: #f0f6fc; color: #333; /* letter-spacing: 1.0em; */ } .form-control.real-code-input::placeholder { font-size: 1.25rem; color: #999; opacity: 1; /* letter-spacing: 0em; */ } .success-step { text-align: center; margin-top: 50px; } .success-circle { width: 100px; height: 100px; border-radius: 50%; background-color: #e8f5e9; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .success-circle i { font-size: 2.5rem; color: #4caf50; } .baryon-circle { width: 100px; height: 100px; border-radius: 50%; padding: 10px; background-color: #5fb8d9; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .baryon-circle img { width: 75%; height: 75%; } .baryon-mentorvoice-circle { width: 50px; height: 50px; border-radius: 50%; padding: 0px; background-color: #5fb8d9; display: flex; align-items: center; justify-content: center; margin: 0 auto 0 auto; margin-top: 20px !important; } .baryon-mentorvoice-circle img { width: 70% !important; height: 70% !important; object-fit: contain !important; margin: auto !important; } .success-step h2 { font-size: 1.75rem; margin-bottom: 10px; } .success-step p { font-size: 1rem; color: #555; margin-bottom: 20px; } .card-container { display: flex; justify-content: center; align-items: stretch; gap: 20px; margin-top: 20px; margin-bottom: 20px; /* Ensure cards wrap to the next line if necessary */ } .card { border: 2px solid transparent; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease; padding: 10px; cursor: pointer; flex: 1 1 0; /* Ensure two cards per line with gap */ /* max-width: calc(50% - 20px); */ /* Ensure two cards per line with gap */ box-sizing: border-box; /* Include padding and border in the element's total width and height */ } .card-icon { display: block; } .card-icon svg { width: 50px; height: 50px; margin-top: 15px; margin-bottom: 15px; } .card:hover { transform: scale(1.05); /* Slightly increase the size */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow */ transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition */ } .card.selected { border-color: #5fb8d9; /* Purple border when selected */ box-shadow: 0 4px 20px rgba(106, 27, 154, 0.2); /* Shadow when selected */ } .card img { width: 64px; height: 64px; margin-bottom: 15px; } .invitepanel { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px; margin-top: 20px; margin-bottom: 20px; background-color: #ed98c755; padding: 15px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); color: #333; } .social-login { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; width: 100%; margin-bottom: 20px; } .social-login-divider { width: 100%; margin: 20px 0; text-align: center; position: relative; } .social-login-divider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid #ddd; } .social-login-divider span { background: #fff; padding: 0 10px; color: #666; position: relative; z-index: 1; } .social-btn { flex: 1 1 calc(50% - 5px); /* 50% width minus gap */ min-width: 140px; max-width: calc(50% - 5px); padding: 12px; border: 1px solid #ddd; border-radius: 4px; background: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; text-decoration: none; color: #333; font-size: 0.9rem; } .social-btn:hover { background-color: #f5f5f5; border-color: #ccc; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .social-btn i { margin-right: 8px; font-size: 1.1em; } .btn-group .btn.groupselectors { min-width: 70px; padding: 0.25rem 0.5rem; font-size: 0.90rem; color: #1f1e22; background-color: #f8f9fa; border: 2px solid transparent; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease; padding: 10px; cursor: pointer; flex: 1 1 0; /* Ensure two cards per line with gap */ /* max-width: calc(50% - 20px); */ /* Ensure two cards per line with gap */ box-sizing: border-box; } .btn-group .btn.groupselectors:hover { border-color: #5fb8d9 !important; /* transform: scale(1.05); */ /* Slightly increase the size */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow */ transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition */ color: #1f1e22 !important; } .btn-group .btn.groupselectors img { width: 25px; height: 25px; /* margin-bottom: 15px; */ } .btn-group .btn.groupselectors svg { width: 25px; height: 25px; /* margin-top: 5px; margin-bottom: 5px; */ } .btn-group .btn.groupselectors.active { border-color: #5fb8d9 !important; /* Purple border when selected */ box-shadow: 0 4px 20px rgba(106, 27, 154, 0.2) !important; background-color: #ffffff !important; color: #1f1e22 !important; } .form-label { font-weight: 500; font-size: 0.95rem; } .button-purple { background-color: #7E4FDC; color: #FFFFFF !important; border-radius: 30px; border: none; } .button-purple:hover { background-color: #9671e1; } @media (max-width:820px) { .footer-brand { display: none; } .footer-product-links { display: none; } .footer-company-links { display: none; } } /* Media Queries for Responsive Design */ @media (max-width: 768px) { .container { flex-direction: column; } .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"], .form-group input[type="password"], .form-group select { display: block; /* Ensures each input is on its own line */ width: 100%; /* Full width, adjust as desired */ padding: 12px; /* Top/bottom padding, no left/right so the underline is flush */ margin-bottom: 12px; /* Space below each input */ border: none; /* Remove default border */ border-bottom: 1px solid #ccc; /* Underline */ background: #f5f5f5; /* No background so it appears minimal */ font-size: 1rem; /* Adjust text size */ color: #333; /* Text color */ outline: none; /* Remove outline on focus (handled by border) */ transition: border-color 0.3s ease; } .wizard-step h2 { font-size: 1.75rem; font-weight: 300; color: #333; margin-bottom: 10px; } .circle-image { margin-bottom: 10px; } .circle-image img { width: 125px; height: 125px; border-radius: 50%; border: 1px solid #e3e3e3; } .social-login { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; width: 100%; margin-bottom: 10px; } .social-login-divider { width: 100%; margin: 20px 0; text-align: center; position: relative; } .social-login-divider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid #ddd; } .social-login-divider span { background: #fff; padding: 0 10px; color: #666; position: relative; z-index: 1; } .social-btn { flex: 1 1 calc(50% - 5px); /* 50% width minus gap */ min-width: 140px; max-width: calc(50% - 5px); padding: 12px; border: 1px solid #ddd; border-radius: 4px; background: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; text-decoration: none; color: #333; font-size: 0.9rem; } .social-btn:hover { background-color: #f5f5f5; border-color: #ccc; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .social-btn i { margin-right: 8px; font-size: 1.1em; } .content { text-align: center; max-width: 90%; background-color: #fff; /* White background */ border-radius: 15px; /* Rounded corners */ padding: 20px; /* Padding */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Box shadow */ } .footer-brand { display: none; } .footer-product-links { display: none; } .footer-company-links { display: none; } .desktop-content { display: none; } .mobile-content { display: block; } .footer-brand { display: none; } .footer-product-links { display: none; } .footer-company-links { display: none; } } /* Media query for screens less than 450px wide */ @media (max-width: 525px) { .wizard-container { display: flex; justify-content: center; align-items: center; width: 90%; height: 100vh; margin: 0 auto; } .wizard-step h2 { font-size: 1.75rem; font-weight: 300; color: #333; margin-bottom: 10px; } .wizard-step p { font-size: 1rem; font-weight: 400; color: #666; margin-bottom: 30px; } .wizard-content { background-color: rgba(255, 255, 255, 1); padding: 40px; border-radius: 15px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); text-align: center; max-width: 500px; width: 100%; } .card-container { flex-direction: column; } .expanded { flex-grow: 2; } .card { width: 100%; margin-bottom: 10px; } .card-icon svg { width: 40px; height: 40px; margin-top: 10px; margin-bottom: 10px; } .card-circle-icon svg { width: 30px; height: 30px; margin-top: 10px; margin-bottom: 10px; } .card-circle-icon img { width: 30px; height: 30px; margin-top: 10px; margin-bottom: 10px; } .card-body .card-text { font-size: 0.8rem; } .code-inputs { display: flex; justify-content: center; gap: 10px; margin-bottom: 40px; } .code-input { width: 40px; height: 40px; font-size: 2rem; text-align: center; border: 2px solid #d2deeb; border-radius: 8px; background-color: #f0f6fc; color: #333; } .btn-group .btn.groupselectors { min-width: 70px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: #1f1e22; background-color: #f8f9fa; border: 2px solid transparent; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease; padding: 5px; cursor: pointer; flex: 1 1 0; /* Ensure two cards per line with gap */ /* max-width: calc(50% - 20px); */ /* Ensure two cards per line with gap */ box-sizing: border-box; } .btn-group .btn.groupselectors:hover { border-color: #5fb8d9 !important; /* transform: scale(1.05); */ /* Slightly increase the size */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow */ transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition */ color: #1f1e22 !important; } .btn-group .btn.groupselectors img { width: 20px; height: 20px; /* margin-bottom: 15px; */ } .btn-group .btn.groupselectors svg { width: 20px; height: 20px; /* margin-top: 5px; margin-bottom: 5px; */ } .btn-group .btn.groupselectors.active { border-color: #5fb8d9 !important; /* Purple border when selected */ box-shadow: 0 4px 20px rgba(106, 27, 154, 0.2) !important; background-color: #ffffff !important; color: #1f1e22 !important; } } /* Media query for mobile devices */ @media (max-width: 480px) { .wizard-step h2 { font-size: 1.25rem; font-weight: 300; color: #333; margin-bottom: 10px; } .wizard-step p { font-size: 0.9rem; font-weight: 400; color: #666; margin-bottom: 30px; } .form-group { margin-bottom: 2px; text-align: left; } .form-group label { display: block; font-size: 0.8rem; margin-bottom: 5px; color: #666; } .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"], .form-group input[type="password"], .form-group select { display: block; /* Ensures each input is on its own line */ width: 100%; /* Full width, adjust as desired */ padding: 10px; /* Top/bottom padding, no left/right so the underline is flush */ margin-bottom: 10px; /* Space below each input */ border: none; /* Remove default border */ border-bottom: 1px solid #ccc; /* Underline */ background: #f5f5f5; /* No background so it appears minimal */ font-size: 1rem; /* Adjust text size */ color: #333; /* Text color */ outline: none; /* Remove outline on focus (handled by border) */ transition: border-color 0.3s ease; } .form-text { font-size: 0.8rem; color: #999; margin-top: 1px !important; padding-top: 5px !important; } .social-login { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; width: 100%; margin-bottom: 10px; } .social-login-divider { width: 100%; margin: 10px 0; text-align: center; position: relative; } .social-login-divider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid #ddd; } .social-login-divider span { background: #fff; padding: 0 10px; color: #666; position: relative; z-index: 1; } .social-btn { flex: 1 1 100%; max-width: 100%; } .social-btn i { margin-right: 8px; font-size: 1.1em; } } /* Media query for screens less than 450px wide */ @media (max-width: 380px) { .wizard-container { display: flex; justify-content: center; align-items: center; width: 90%; height: 100vh; margin: 0 auto; padding: 10px; } .wizard-content { background-color: rgba(255, 255, 255, 1); padding: 40px; border-radius: 15px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); text-align: center; max-width: 500px; width: 100%; } .circle-image { margin-bottom: 10px; } .circle-image img { width: 75px; height: 75px; border-radius: 50%; border: 1px solid #e3e3e3; } .card-container { flex-direction: column; } .expanded { flex-grow: 2; } .card { width: 100%; margin-bottom: 10px; } }