/*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* Restore checkbox and radio button functionality after reset */ input[type="checkbox"], input[type="radio"] { appearance: revert; -webkit-appearance: revert; -moz-appearance: revert; cursor: pointer; pointer-events: auto; } /* Restore label functionality */ label { cursor: pointer; pointer-events: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* ============================================ BOLAPP USER MANAGEMENT SYSTEM STYLES Modern, Mobile-First Design ============================================ */ /* === Base Styles === */ html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: #333; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 1rem; margin: 0; } strong { font-weight: bold; } /* === Container === */ .container { max-width: 720px; margin: 0 auto; padding: 1rem; display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 2rem); } /* === Auth Card === */ .auth-card { background: #ffffff; border-radius: 20px; padding: 2.5rem 2rem; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: slideUp 0.4s ease-out; } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* === Logo === */ .logo-container { text-align: center; margin-bottom: 2rem; } .logo { max-width: 120px; height: auto; display: inline-block; } /* === Typography === */ h1 { font-size: 1.75rem; font-weight: 700; color: #2d3748; text-align: center; margin-bottom: 1.5rem; line-height: 1.2; } h1 i { margin-right: 0.5rem; color: #667eea; } h2 { font-size: 1.5rem; font-weight: 600; color: #2d3748; margin-bottom: 1rem; } p { color: #4a5568; margin-bottom: 1rem; } .welcome-text { text-align: center; color: #718096; margin-bottom: 1rem; } .user-info { text-align: center; font-size: 1.1rem; color: #2d3748; font-weight: 500; margin-bottom: 1.5rem; } .info-text { font-size: 0.9rem; color: #718096; text-align: center; margin-top: 1rem; } .error-text { text-align: center; color: #e53e3e; font-size: 1rem; } /* === Form Styles === */ .auth-form { margin-top: 2rem; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; font-weight: 600; color: #2d3748; margin-bottom: 0.5rem; font-size: 0.95rem; } .form-group label i { margin-right: 0.5rem; color: #667eea; width: 16px; display: inline-block; } .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"], .form-group input[type="password"], .form-group input[type="number"] { width: 100%; padding: 0.875rem 1rem; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 1rem; transition: all 0.3s ease; background: #f7fafc; color: #2d3748; } .form-group input:focus { outline: none; border-color: #667eea; background: #ffffff; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } .form-group input::placeholder { color: #a0aec0; } /* === Checkbox Styles === */ .checkbox-group { margin-bottom: 1.5rem; } .checkbox-label { display: flex; align-items: center; cursor: pointer; font-size: 0.9rem; color: #4a5568; line-height: 1.4; user-select: none; -webkit-user-select: none; -moz-user-select: none; pointer-events: auto; } .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; max-width: 18px; min-height: 18px; max-height: 18px; margin: 0 0.75rem 0 0; padding: 0; border: 0; cursor: pointer; accent-color: #667eea; flex-shrink: 0; flex-grow: 0; pointer-events: auto; position: relative; z-index: 1; vertical-align: middle; } .checkbox-label span { display: inline; line-height: 1.4; flex: 1; vertical-align: middle; } .checkbox-label a { color: #667eea; text-decoration: underline; display: inline; vertical-align: baseline; } .checkbox-label a:hover { color: #764ba2; } /* === Password Requirements === */ .password-requirements { margin-top: 0.75rem; padding: 1rem; background: #f7fafc; border-radius: 8px; border: 1px solid #e2e8f0; } .password-requirements small { display: block; font-weight: 600; color: #2d3748; margin-bottom: 0.5rem; font-size: 0.85rem; } .password-requirements ul { list-style: none; padding: 0; margin: 0; } .password-requirements li { font-size: 0.85rem; color: #718096; margin-bottom: 0.4rem; padding-left: 1.5rem; position: relative; transition: color 0.3s ease; } .password-requirements li i { position: absolute; left: 0; color: #e53e3e; font-size: 0.75rem; } .password-requirements li:before { display: none; } .password-requirements li.valid { color: #38a169; } .password-requirements li.valid i { color: #38a169; } .password-requirements li.valid i.fa-check-circle { color: #38a169; } .password-match { margin-top: 0.5rem; min-height: 1.2rem; } .text-success { color: #38a169; font-size: 0.85rem; } .text-error { color: #e53e3e; font-size: 0.85rem; } /* === Info Box === */ .info-box { background: #edf2f7; border-left: 4px solid #667eea; padding: 1rem; border-radius: 6px; margin-bottom: 1.5rem; } .info-box small { color: #4a5568; font-size: 0.85rem; line-height: 1.5; } /* === Buttons === */ .btn { display: inline-block; padding: 0.875rem 1.5rem; font-size: 1rem; font-weight: 600; text-align: center; text-decoration: none; border: none; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; line-height: 1.5; } .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); } .btn i { margin-right: 0.5rem; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: #e2e8f0; color: #2d3748; } .btn-secondary:hover { background: #cbd5e0; } .btn-block { width: 100%; display: block; } /* === Alerts === */ .alert { padding: 1rem; border-radius: 10px; margin-bottom: 1.5rem; font-size: 0.9rem; line-height: 1.5; } .alert-error { background: #fed7d7; color: #c53030; border: 1px solid #fc8181; } .alert-success { background: #c6f6d5; color: #22543d; border: 1px solid #68d391; } /* === Auth Links === */ .auth-links { text-align: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; } .auth-links a { display: inline-block; color: #667eea; text-decoration: none; font-size: 0.95rem; font-weight: 600; margin: 0.5rem 0.5rem; padding: 0.5rem 0.5rem; border-radius: 8px; background: #f7fafc; border: 2px solid #e2e8f0; transition: all 0.3s ease; } .auth-links a i { margin-right: 0.5rem; } .auth-links a:hover { color: #667eea; background: #edf2f7; border-color: #667eea; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2); text-decoration: none; } .auth-links a:active { transform: translateY(0); } .auth-links p { margin-bottom: 0.5rem; } .auth-footer-links { text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; font-size: 0.85rem; color: #718096; } .auth-footer-links a { color: #667eea; text-decoration: none; transition: color 0.3s ease; } .auth-footer-links a:hover { color: #764ba2; text-decoration: underline; } .auth-footer-links span { margin: 0 0.5rem; color: #cbd5e0; } /* === Modal Styles === */ .modal { display: block; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease; } .modal.show { opacity: 1; visibility: visible; pointer-events: auto; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); } .modal-content { background-color: #ffffff; margin: 2% auto; padding: 0; border-radius: 20px; width: 90%; max-width: 600px; max-height: 90vh; position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: slideDown 0.3s ease; overflow: hidden; display: flex; flex-direction: column; } @keyframes slideDown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } } .modal-close { position: absolute; right: 1rem; top: 1rem; font-size: 2rem; font-weight: bold; color: #718096; cursor: pointer; z-index: 1001; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.95); transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .modal-close:hover { background: #e2e8f0; color: #2d3748; } .modal-iframe-wrapper { overflow-y: auto; overflow-x: hidden; flex: 1; border-radius: 0 0 20px 20px; -webkit-overflow-scrolling: touch; background: #ffffff; position: relative; } .modal-iframe-wrapper::-webkit-scrollbar { width: 8px; } .modal-iframe-wrapper::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 0 0 20px 0; } .modal-iframe-wrapper::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 4px; } .modal-iframe-wrapper::-webkit-scrollbar-thumb:hover { background: #a0aec0; } .privacy-iframe { width: 100%; height: 100%; min-height: calc(90vh - 60px); border: none; display: block; } /* === Privacy Policy Page === */ .privacy-page { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 2rem 1rem; } .privacy-container { max-width: 800px; margin: 0 auto; background: #ffffff; border-radius: 20px; padding: 2.5rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .privacy-container h1 { color: #2d3748; margin-bottom: 0.5rem; } .last-updated { color: #718096; font-size: 0.9rem; margin-bottom: 2rem; text-align: center; } .privacy-container section { margin-bottom: 2rem; } .privacy-container section h2 { color: #667eea; font-size: 1.25rem; margin-bottom: 0.75rem; margin-top: 1.5rem; } .privacy-container section p { color: #4a5568; line-height: 1.7; margin-bottom: 1rem; } .privacy-container section ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; } .privacy-container section li { color: #4a5568; margin-bottom: 0.5rem; line-height: 1.6; } .privacy-container section a { color: #667eea; text-decoration: underline; } .privacy-container section a:hover { color: #764ba2; } .privacy-footer { text-align: center; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #e2e8f0; } /* === Contact Page === */ .contact-info { margin-top: 2rem; } .contact-item { margin-bottom: 1.5rem; padding: 1rem; background: #f7fafc; border-radius: 10px; border-left: 4px solid #667eea; } .contact-item strong { display: block; color: #2d3748; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px; } .contact-item p { color: #667eea; font-size: 1rem; margin: 0; font-weight: 500; } /* === Responsive Design === */ @media (max-width: 480px) { .container { padding: 0.5rem; } .auth-card { padding: 2rem 1.5rem; border-radius: 15px; } h1 { font-size: 1.5rem; } .logo { max-width: 100px; } .privacy-container { padding: 1.5rem; } .modal-content { width: 95%; margin: 5% auto; } } @media (max-width: 360px) { .auth-card { padding: 1.5rem 1rem; } h1 { font-size: 1.35rem; } .form-group input { padding: 0.75rem 0.875rem; font-size: 0.95rem; } } /* === Accessibility === */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* === Focus Styles for Accessibility === */ *:focus-visible { outline: 2px solid #667eea; outline-offset: 2px; } /* === Print Styles === */ @media print { body { background: #ffffff; } .auth-card { box-shadow: none; } }