/* ŚCIEŻKA PLIKU: /WeCanMore-Block-Access/assets/css/login-style.css */ /* ============================= */ /* STYLOWANIE KONTENERA STRONY */ /* ============================= */ /* Ta klasa jest dodawana do przez wtyczkę na stronach logowania i błędu 404. Pozwala na bezpieczne stylowanie tła bez nadpisywania stylów motywu na innych stronach. */ .wcm-login-page-body { background-color: #FFFFFF !important; } /* ============================= */ /* KONTEKST LOGOWANIA */ /* ============================= */ .wcm-login-container { max-width: 400px; margin: 50px auto; padding: 20px; background-color: #FFFFFF; border: 1px solid #E0E0E0; /* Subtelna ramka */ border-radius: 8px; /* Zaokrąglone rogi */ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* Nowoczesny cień */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; /* Uniwersalna czcionka systemowa */ } /* ============================= */ /* NAGŁÓWKI */ /* ============================= */ .wcm-login-form h2 { text-align: center; color: #476727; /* Ciemniejszy zielony akcent */ margin-bottom: 25px; font-size: 28px; font-weight: 700; } /* ============================= */ /* POLA FORMULARZA */ /* ============================= */ .input-group { position: relative; margin-bottom: 20px; } .input-group input { width: 100%; padding: 12px 15px; border: 1px solid #949598; /* Szary dodatkowy kolor */ border-radius: 6px; font-size: 16px; background-color: #FFFFFF; color: #333333; /* Ciemny tekst */ transition: all 0.2s ease-in-out; box-sizing: border-box; } .input-group input:focus { border-color: #8ABE3F; /* Jasny zielony akcent na focusie */ outline: none; box-shadow: 0 0 0 3px rgba(138, 190, 63, 0.25); color: #333333; } /* ============================= */ /* ETYKIETY (Dla pól stałych) */ /* ============================= */ .input-group label { display: block; margin-bottom: 8px; color: #476727; /* Ciemniejszy zielony */ font-size: 15px; font-weight: 600; } /* ============================= */ /* PRZYCISKI */ /* ============================= */ .login-btn, .logout-btn { display: inline-block; width: 100%; padding: 14px 20px; color: #FFFFFF; /* Biały tekst */ font-size: 18px; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; text-align: center; text-decoration: none; transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out; box-sizing: border-box; } .login-btn { background: #8ABE3F; /* Jasny zielony */ box-shadow: 0 4px 15px rgba(138, 190, 63, 0.4); } .login-btn:hover, .login-btn:focus { background: #476727; /* Ciemniejszy zielony na hover/focus */ box-shadow: 0 6px 20px rgba(71, 103, 39, 0.6); outline: none; } /* ============================= */ /* KOMUNIKATY BŁĘDÓW I OK */ /* ============================= */ .login-error, .login-success { text-align: center; font-weight: 500; margin-bottom: 20px; padding: 10px 15px; border-radius: 4px; } .login-error { color: #D8000C; /* Czerwony błąd */ border: 1px solid #D8000C; background-color: #FFD2D2; /* Jasne czerwone tło */ } .login-success { color: #4F8A10; /* Ciemny zielony sukces */ border: 1px solid #4F8A10; background-color: #DFF2BF; /* Jasne zielone tło */ } /* ============================= */ /* PRZYCISK WYLOGOWANIA */ /* ============================= */ .logout-btn { padding: 12px 15px; background: #949598; /* Szary dodatkowy kolor */ font-size: 16px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .logout-btn:hover, .logout-btn:focus { background: #476727; /* Ciemniejszy zielony na hover/focus */ box-shadow: 0 4px 12px rgba(71, 103, 39, 0.4); outline: none; } /* ============================= */ /* STYLES DLA STRONY BŁĘDU 404 */ /* ============================= */ .aurora-bg404 { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; overflow: hidden; pointer-events: none; } .aurora404 { position: absolute; border-radius: 50%; filter: blur(42px); opacity: 0.66; mix-blend-mode: lighten; animation-timing-function: linear; } .aurora404-1 { background: radial-gradient(ellipse at center, #8ABE3Fcc 0%, #47672733 80%, #ffffff00 100%); width: 720px; height: 340px; left: -130px; top: 27%; animation: aurora1-move404 7.4s infinite alternate; } @keyframes aurora1-move404 { 0% { transform: translateY(-30px) scale(1.12,1) rotate(-6deg);} 45% { transform: translateY(30px) scale(1.05,1.01) rotate(4deg);} 100% { transform: translateY(-10px) scale(1.19,1.09) rotate(-6deg);} } .aurora404-2 { background: radial-gradient(ellipse at center, #476727aa 0%, #8ABE3F44 60%, #ffffff00 100%); width: 520px; height: 280px; left: 42vw; top: 9vh; opacity: 0.48; animation: aurora2-move404 9.6s infinite alternate; } @keyframes aurora2-move404 { 0% { transform: translateY(12px) scale(1,1.13) rotate(5deg);} 50% { transform: translateY(-26px) scale(1.12,0.96) rotate(-7deg);} 100% { transform: translateY(8px) scale(1.08,1.01) rotate(2deg);} } .aurora404-3 { background: radial-gradient(ellipse at center, #94959877 0%, #47672744 60%, #ffffff00 100%); width: 540px; height: 220px; right: -170px; bottom: 16vh; opacity: 0.23; animation: aurora3-move404 10.7s infinite alternate; } @keyframes aurora3-move404 { 0% { transform: translateY(-22px) scale(1.09,1.15) rotate(-12deg);} 35% { transform: translateY(22px) scale(1.05,1.04) rotate(5deg);} 100% { transform: translateY(-17px) scale(1.13,0.99) rotate(-10deg);} } .error404-section { padding: 80px 20px; min-height: 100vh; display: flex; justify-content: center; align-items: center; z-index: 2; position: relative; font-family: 'Quicksand', Arial, sans-serif; background: transparent; box-sizing: border-box; } .error404-box { border-radius: 12px; padding: 40px 30px; max-width: 440px; width: 100%; background: #FFFFFF; text-align: center; box-shadow: 0 8px 48px rgba(138, 190, 63, 0.4), 0 1.5px 18px rgba(71, 103, 39, 0.3); transform: translateY(302px); animation: slideUpBuildR4e8 0.8s 0.3s ease-out forwards; opacity: 0; position: relative; z-index: 2; border: 2.5px solid #8ABE3F; transition: box-shadow 0.35s; } .error404-box:hover { box-shadow: 0 12px 48px rgba(138, 190, 63, 0.6), 0 1.5px 18px rgba(71, 103, 39, 0.5), 0 0 10px rgba(138, 190, 63, 0.8); } @keyframes slideUpBuildR4e8 { to { transform: translateY(0); opacity: 1; } } .error404-title { font-size: 2.16em; font-weight: 700; color: #476727; margin-bottom: 10px; letter-spacing: -1.2px; } .error404-desc { font-size: 1.13em; color: #333333; margin: 0 0 20px 0; line-height: 1.5; } .error404-btn { display: inline-block; margin-top: 18px; padding: 13px 44px; background: linear-gradient(90deg, #8ABE3F 40%, #476727 100%); color: #FFFFFF; font-weight: 700; border: none; border-radius: 50px; font-size: 1.09em; cursor: pointer; box-shadow: 0 4px 18px rgba(138, 190, 63, 0.6); text-decoration: none; border: 2px solid #8ABE3F; transition: background 0.2s, color 0.2s, box-shadow 0.2s; letter-spacing: 0.7px; } .error404-btn:hover { background: linear-gradient(90deg, #476727 30%, #8ABE3F 100%); box-shadow: 0 2px 16px rgba(138, 190, 63, 0.8); border-color: #476727; } @media (max-width: 600px) { .error404-box { padding: 20px 15px; max-width: 95vw; } .error404-title { font-size: 1.5em; } .error404-desc { font-size: 1em; } }