/* ============================================= Fluent 2 Theme Addon for Login Page Apply by adding data-theme="fluent" to ============================================= */ /* ── Fluent 2 token overrides ── */ body[data-theme="fluent"] { --fluent-accent: #0F6CBD; --fluent-accent-hover: #115EA3; --fluent-accent-pressed: #0F548C; --fluent-success: #0E7A0D; --fluent-error: #BC2F32; --fluent-text-primary: #242424; --fluent-text-secondary: #616161; --fluent-text-tertiary: #ADADAD; --fluent-card-bg: #FFFFFF; --fluent-input-border: #D1D1D1; --fluent-shadow: 0 2px 4px rgba(0,0,0,.06); --fluent-shadow-lg: 0 8px 16px rgba(0,0,0,.14); } /* ── Background ── */ body[data-theme="fluent"] .login-container { background: linear-gradient(135deg, #0F6CBD 0%, #0E4775 100%); } body[data-theme="fluent"] .shape { background: rgba(255,255,255,.07); } /* ── Hero panel ── */ body[data-theme="fluent"] .hero-logo { border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.25); } body[data-theme="fluent"] .hero-logo i { background: linear-gradient(135deg, #0F6CBD 0%, #115EA3 100%); -webkit-background-clip: text; } body[data-theme="fluent"] .feature-icon { background: rgba(255,255,255,.15); border-radius: 8px; backdrop-filter: blur(8px); } /* ── Login panel ── */ body[data-theme="fluent"] .login-panel { box-shadow: 16px 0 48px rgba(0,0,0,.12); } /* ── Input fields ── */ body[data-theme="fluent"] .input-field { border: 1px solid #D1D1D1; border-radius: 6px; padding: 14px 14px 14px 44px; transition: all .2s ease; } body[data-theme="fluent"] .input-field:focus { border-color: #D1D1D1; border-bottom: 2px solid #0F6CBD; box-shadow: none; } body[data-theme="fluent"] .input-field:focus + .floating-label, body[data-theme="fluent"] .input-field:not(:placeholder-shown) + .floating-label { color: #0F6CBD; } body[data-theme="fluent"] .input-field:focus ~ .input-icon { color: #0F6CBD; } /* ── Checkbox ── */ body[data-theme="fluent"] .remember-me:hover .checkbox-custom { border-color: #0F6CBD; background: rgba(15,108,189,.05); } body[data-theme="fluent"] .checkbox-input:checked ~ .checkbox-custom { background: #0F6CBD; border-color: #0F6CBD; } body[data-theme="fluent"] .checkbox-input:focus ~ .checkbox-custom { box-shadow: 0 0 0 3px rgba(15,108,189,.2); } /* ── Login button ── */ body[data-theme="fluent"] .btn-login { background: #0F6CBD; border-radius: 6px; box-shadow: none; font-weight: 600; letter-spacing: .02em; transition: all .15s ease; } body[data-theme="fluent"] .btn-login:hover { background: #115EA3; box-shadow: 0 2px 4px rgba(0,0,0,.15); transform: none; } body[data-theme="fluent"] .btn-login:active { background: #0F548C; } /* ── Social buttons ── */ body[data-theme="fluent"] .btn-social { border-width: 1px; border-radius: 6px; transition: all .15s ease; } body[data-theme="fluent"] .btn-social:hover { border-color: #0F6CBD; background: rgba(15,108,189,.04); } /* ── Forgot password link ── */ body[data-theme="fluent"] .forgot-link { color: #0F6CBD; } body[data-theme="fluent"] .forgot-link:hover { color: #115EA3; } /* ── Sign up link ── */ body[data-theme="fluent"] .signup-link a { color: #0F6CBD; } body[data-theme="fluent"] .signup-link a:hover { color: #115EA3; } /* ── Password toggle ── */ body[data-theme="fluent"] .password-toggle:hover { background: #F0F0F0; } /* ── Error message ── */ body[data-theme="fluent"] .error-message { background: #FDF3F4; border-color: #EEACB2; border-radius: 4px; } /* ── Modals ── */ body[data-theme="fluent"] .modal-container { border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.22); } body[data-theme="fluent"] .modal-icon { background: #0F6CBD; border-radius: 10px; } body[data-theme="fluent"] .modal-icon.success { background: #0E7A0D; } body[data-theme="fluent"] .modal-icon.error { background: #BC2F32; } body[data-theme="fluent"] .modal-icon.info { background: #0F6CBD; } body[data-theme="fluent"] .modal-icon.warning { background: #9D5D00; } body[data-theme="fluent"] .modal-close { background: #F0F0F0; border-radius: 50%; } body[data-theme="fluent"] .modal-close:hover { background: #E0E0E0; color: var(--fluent-text-primary); transform: rotate(90deg); } body[data-theme="fluent"] .modal-input { border: 1px solid #D1D1D1; border-radius: 6px; } body[data-theme="fluent"] .modal-input:focus { border-color: #D1D1D1; border-bottom: 2px solid #0F6CBD; box-shadow: none; } body[data-theme="fluent"] .modal-input:focus ~ .modal-input-icon { color: #0F6CBD; } body[data-theme="fluent"] .modal-input:focus + .modal-floating-label, body[data-theme="fluent"] .modal-input:not(:placeholder-shown) + .modal-floating-label { color: #0F6CBD; } body[data-theme="fluent"] .btn-modal-primary { background: #0F6CBD; border-radius: 6px; box-shadow: none; } body[data-theme="fluent"] .btn-modal-primary:hover { background: #115EA3; box-shadow: 0 2px 4px rgba(0,0,0,.15); transform: none; } body[data-theme="fluent"] .btn-modal-secondary { background: #F0F0F0; border-radius: 6px; } body[data-theme="fluent"] .btn-modal-secondary:hover { background: #E0E0E0; } /* ── Verification code ── */ body[data-theme="fluent"] .verification-digit { border: 1px solid #D1D1D1; border-radius: 6px; } body[data-theme="fluent"] .verification-digit:focus { border-color: #D1D1D1; border-bottom: 2px solid #0F6CBD; box-shadow: none; } /* ── Step indicator ── */ body[data-theme="fluent"] .step-circle.active { background: #0F6CBD; } body[data-theme="fluent"] .step-circle.completed { background: #0E7A0D; } body[data-theme="fluent"] .step-line.completed { background: #0E7A0D; } /* ── Resend link ── */ body[data-theme="fluent"] .resend-link a { color: #0F6CBD; } /* ── Info message ── */ body[data-theme="fluent"] .info-message { background: #EBF3FC; border-color: #B4D6FA; color: #0F6CBD; } /* ── Success message ── */ body[data-theme="fluent"] .success-message { background: #F1FAF1; border-color: #9FD89F; color: #0E7A0D; } /* ── Theme toggle button (bottom-right corner) ── */ .login-theme-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: rgba(255,255,255,.95); border: 1px solid rgba(0,0,0,.1); border-radius: 20px; backdrop-filter: blur(10px); cursor: pointer; font-family: 'Segoe UI Variable Text','Segoe UI',sans-serif; font-size: 12px; font-weight: 500; color: #424242; box-shadow: 0 2px 8px rgba(0,0,0,.12); transition: all .2s ease; } .login-theme-toggle:hover { box-shadow: 0 4px 12px rgba(0,0,0,.18); transform: translateY(-1px); } .login-theme-toggle i { font-size: 14px; } .login-theme-toggle .swatch { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(0,0,0,.12); flex-shrink: 0; } /* ============================================= Amazon Theme — Login Page Overrides ============================================= */ body[data-theme="amazon"] { --fluent-accent: #FF9900; --fluent-accent-hover: #E88B00; --fluent-accent-pressed: #CC7A00; --fluent-error: #CC0C39; --fluent-text-primary: #0F1111; --fluent-text-secondary: #565959; --fluent-input-border: #D5D9D9; } body[data-theme="amazon"] .login-container { background: linear-gradient(135deg, #131921 0%, #232F3E 100%); } body[data-theme="amazon"] .shape { background: rgba(255,153,0,.08); } body[data-theme="amazon"] .hero-logo i { background: linear-gradient(135deg, #FF9900, #E88B00); -webkit-background-clip: text; } body[data-theme="amazon"] .feature-icon { background: rgba(255,153,0,.2); } body[data-theme="amazon"] .input-field:focus { border-color: #FF9900; box-shadow: 0 0 0 3px rgba(255,153,0,.2); } body[data-theme="amazon"] .input-field:focus + .floating-label, body[data-theme="amazon"] .input-field:not(:placeholder-shown) + .floating-label { color: #E88B00; } body[data-theme="amazon"] .input-field:focus ~ .input-icon { color: #FF9900; } body[data-theme="amazon"] .checkbox-input:checked ~ .checkbox-custom { background: #FF9900; border-color: #FF9900; } body[data-theme="amazon"] .checkbox-input:focus ~ .checkbox-custom { box-shadow: 0 0 0 3px rgba(255,153,0,.2); } body[data-theme="amazon"] .btn-login { background: linear-gradient(135deg, #FF9900, #E88B00); color: #0F1111; } body[data-theme="amazon"] .btn-login:hover { background: linear-gradient(135deg, #E88B00, #CC7A00); } body[data-theme="amazon"] .forgot-link { color: #E88B00; } body[data-theme="amazon"] .forgot-link:hover { color: #CC7A00; } body[data-theme="amazon"] .signup-link a { color: #E88B00; } body[data-theme="amazon"] .btn-social:hover { border-color: #FF9900; background: rgba(255,153,0,.04); } body[data-theme="amazon"] .step-circle.active { background: #FF9900; } body[data-theme="amazon"] .step-circle.completed { background: #067D62; } body[data-theme="amazon"] .step-line.completed { background: #067D62; } body[data-theme="amazon"] .btn-modal-primary { background: #FF9900; color: #0F1111; } body[data-theme="amazon"] .btn-modal-primary:hover { background: #E88B00; } body[data-theme="amazon"] .modal-icon { background: #FF9900; } body[data-theme="amazon"] .modal-icon.success { background: #067D62; } body[data-theme="amazon"] .modal-icon.error { background: #CC0C39; } body[data-theme="amazon"] .modal-input:focus { border-bottom: 2px solid #FF9900; } body[data-theme="amazon"] .verification-digit:focus { border-bottom: 2px solid #FF9900; } body[data-theme="amazon"] .resend-link a { color: #E88B00; } /* ============================================= Windows 11 Theme — Login Page Overrides ============================================= */ body[data-theme="win11"] { --fluent-accent: #005FB8; --fluent-accent-hover: #004C99; --fluent-accent-pressed: #003D7A; --fluent-error: #C42B1C; --fluent-text-primary: #1A1A1A; --fluent-text-secondary: #5C5C5C; --fluent-input-border: rgba(0,0,0,.06); } body[data-theme="win11"] .login-container { background: #F3F3F3; } body[data-theme="win11"] .shape { background: rgba(0,95,184,.06); } /* Windows 11 — colorful floating accent circles */ body[data-theme="win11"] .shape1 { background: rgba(0,120,212,.10); } body[data-theme="win11"] .shape2 { background: rgba(16,137,62,.08); } body[data-theme="win11"] .shape3 { background: rgba(209,52,56,.07); } body[data-theme="win11"] .shape4 { background: rgba(134,100,184,.08); } body[data-theme="win11"] .shape5 { background: rgba(255,140,0,.07); } body[data-theme="win11"] .shape6 { background: rgba(0,153,188,.08); } body[data-theme="win11"] .hero-panel { color: #1A1A1A; background: rgba(255,255,255,.5); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); } body[data-theme="win11"] .hero-logo { background: #005FB8; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,95,184,.2); } body[data-theme="win11"] .hero-logo i { background: none; -webkit-background-clip: unset; -webkit-text-fill-color: #FFFFFF; color: #FFFFFF; } body[data-theme="win11"] .feature-icon { background: rgba(0,95,184,.08); color: #005FB8; backdrop-filter: none; } body[data-theme="win11"] .login-panel { background: rgba(255,255,255,.85); backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%); box-shadow: 0 8px 32px rgba(0,0,0,.06); border-left: 1px solid rgba(255,255,255,.6); } body[data-theme="win11"] .input-field { background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.06); border-bottom: 2px solid rgba(0,0,0,.1); border-radius: 8px; } body[data-theme="win11"] .input-field:focus { border-color: rgba(0,0,0,.06); border-bottom: 2px solid #005FB8; box-shadow: none; background: rgba(255,255,255,.9); } body[data-theme="win11"] .input-field:focus + .floating-label, body[data-theme="win11"] .input-field:not(:placeholder-shown) + .floating-label { color: #005FB8; } body[data-theme="win11"] .input-field:focus ~ .input-icon { color: #005FB8; } body[data-theme="win11"] .remember-me:hover .checkbox-custom { border-color: #005FB8; background: rgba(0,95,184,.05); } body[data-theme="win11"] .checkbox-input:checked ~ .checkbox-custom { background: #005FB8; border-color: #005FB8; } body[data-theme="win11"] .checkbox-input:focus ~ .checkbox-custom { box-shadow: 0 0 0 3px rgba(0,95,184,.2); } body[data-theme="win11"] .btn-login { background: #005FB8; border-radius: 8px; box-shadow: none; } body[data-theme="win11"] .btn-login:hover { background: #004C99; box-shadow: none; transform: none; } body[data-theme="win11"] .btn-login:active { background: #003D7A; } body[data-theme="win11"] .forgot-link { color: #005FB8; } body[data-theme="win11"] .forgot-link:hover { color: #004C99; } body[data-theme="win11"] .signup-link a { color: #005FB8; } body[data-theme="win11"] .btn-social { border: 1px solid rgba(0,0,0,.06); border-bottom: 2px solid rgba(0,0,0,.1); border-radius: 8px; } body[data-theme="win11"] .btn-social:hover { border-color: rgba(0,0,0,.06); border-bottom: 2px solid rgba(0,0,0,.18); background: rgba(0,0,0,.02); } body[data-theme="win11"] .step-circle.active { background: #005FB8; } body[data-theme="win11"] .step-circle.completed { background: #0F7B0F; } body[data-theme="win11"] .step-line.completed { background: #0F7B0F; } body[data-theme="win11"] .btn-modal-primary { background: #005FB8; box-shadow: none; border-radius: 8px; } body[data-theme="win11"] .btn-modal-primary:hover { background: #004C99; box-shadow: none; transform: none; } body[data-theme="win11"] .modal-container { background: rgba(252,252,252,.85); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 1px solid rgba(255,255,255,.6); border-radius: 16px; } body[data-theme="win11"] .modal-overlay { background: rgba(243,243,243,.65); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); } body[data-theme="win11"] .modal-icon { background: #005FB8; } body[data-theme="win11"] .modal-icon.success { background: #0F7B0F; } body[data-theme="win11"] .modal-icon.error { background: #C42B1C; } body[data-theme="win11"] .modal-input { background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.06); border-bottom: 2px solid rgba(0,0,0,.1); border-radius: 8px; } body[data-theme="win11"] .modal-input:focus { border-color: rgba(0,0,0,.06); border-bottom: 2px solid #005FB8; box-shadow: none; } body[data-theme="win11"] .modal-input:focus + .modal-floating-label, body[data-theme="win11"] .modal-input:not(:placeholder-shown) + .modal-floating-label { color: #005FB8; background: transparent; } body[data-theme="win11"] .verification-digit { border: 1px solid rgba(0,0,0,.06); border-bottom: 2px solid rgba(0,0,0,.1); border-radius: 8px; } body[data-theme="win11"] .verification-digit:focus { border-color: rgba(0,0,0,.06); border-bottom: 2px solid #005FB8; box-shadow: none; } body[data-theme="win11"] .resend-link a { color: #005FB8; } body[data-theme="win11"] .error-message { border-radius: 8px; } body[data-theme="win11"] .info-message { background: rgba(0,95,184,.05); border-color: rgba(0,95,184,.15); color: #005FB8; border-radius: 8px; } body[data-theme="win11"] .success-message { background: rgba(15,123,15,.05); border-color: rgba(15,123,15,.15); color: #0F7B0F; border-radius: 8px; }