/* ============================================================
Login page override
Stosuje nowy design (granat + zdjęcie + pill button + walidacja)
na istniejący HTML loginu, bez zmian struktury.
Wystarczy dołączyć ten plik PO /Content/style.css w :
============================================================ */
/* ---------- Tokens ---------- */
.loginPage2 {
--navy: rgb(15,43,75);
--navy-2: rgb(11,29,50);
--blue: rgb(57,132,190);
--blue-2: rgb(45,110,159);
--ink: rgb(33,37,41);
--line: rgb(222,226,230);
--white: #fff;
--danger: #E60023;
--danger-2: #B3001A;
--danger-bg: #FFE5E8;
}
/* ---------- Body / tło ---------- */
html, body {
height: 100%;
margin: 0;
}
body.loginPage2 {
font-family: Calibri, "Carlito", "Roboto", "Segoe UI", Arial, sans-serif !important;
color: var(--white);
background: var(--navy) !important;
min-height: 100vh;
position: relative;
isolation: isolate;
overflow-x: hidden;
}
body.loginPage2::before {
content: "";
position: fixed;
inset: 0;
background: linear-gradient(180deg, rgba(15,43,75,.55), rgba(15,43,75,.85)), url("/Images/login-bg-grohe.jpg") center/cover no-repeat;
z-index: -1;
}
/* ukryj ewentualną dodatkową niebieską sekcję */
body.loginPage2 .blue_section {
background: transparent !important;
position: fixed;
bottom: 12px;
left: 20px;
width: 100px;
z-index: 5;
pointer-events: none;
/* Wgraj plik do /Images/partner-logo.png i odkomentuj poniższe: */
background-image: url("/Images/lixil.png") !important;
background-repeat: no-repeat !important;
background-position: left center !important;
background-size: contain !important;
opacity: .85;
filter: brightness(0) invert(1); /* czarne logo → białe; usuń jeśli masz białą wersję */
}
/* ---------- Header / logo na prawo ---------- */
body.loginPage2 header.loginPage {
display: flex !important;
justify-content: flex-end !important;
align-items: center;
padding: 16px 32px 0;
background: transparent !important;
border: 0 !important;
height: auto !important;
}
body.loginPage2 header.loginPage .logo {
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
}
/* nadpisanie inline transform: scale(0.2) — pokazujemy logo w pełnym rozmiarze */
body.loginPage2 .logoLogin {
transform: none !important;
-moz-transform: none !important;
transform-origin: top right !important;
width: auto !important;
height: 60px !important;
max-width: 260px !important;
object-fit: contain;
filter: brightness(0) invert(1); /* logo na biało na ciemnym tle */
position: static !important;
left: auto !important;
}
/* mobile logo środkowe – ukrywamy, mamy jedno w headerze */
body.loginPage2 .visible-xs {
display: none !important;
}
body.loginPage2 .logoMobile {
display: none !important;
}
/* ---------- Layout content ---------- */
body.loginPage2 .login_content {
min-height: calc(100vh - 100px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px 16px 60px;
background: transparent !important;
margin-top: -40px;
}
body.loginPage2 .login_content .container {
width: 100%;
max-width: 320px;
margin: 0 auto;
padding: 0;
}
body.loginPage2 .login_content .row {
margin: 0 !important;
}
body.loginPage2 .login-panel {
width: 100%;
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
}
body.loginPage2 .form-login {
width: 266px;
margin: 0 auto;
color: var(--white);
}
/* ---------- Tytuł (dodajemy via ::before na formularzu) ---------- */
body.loginPage2 .login-form {
position: relative;
padding-top: 90px;
}
body.loginPage2 .login-form::before {
content: "Zaloguj się";
position: absolute;
top: 0;
left: 0;
font-family: Calibri, "Carlito", sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 1.2;
color: var(--white);
}
/* ---------- Input fields ---------- */
body.loginPage2 .input-col {
margin-bottom: 16px !important;
padding: 0 !important;
position: relative;
}
body.loginPage2 .input-col.left {
margin-bottom: 8px !important;
text-align: right;
}
body.loginPage2 .input-col.noPadding {
margin-bottom: 0 !important;
}
body.loginPage2 .input-col input[type="text"],
body.loginPage2 .input-col input[type="email"],
body.loginPage2 .input-col input[type="password"] {
width: 100% !important;
height: 38px !important;
padding: 0 12px !important;
border: 1px solid var(--line) !important;
border-radius: 6px !important;
background: var(--white) !important;
color: var(--ink) !important;
font-family: inherit !important;
font-size: 14px !important;
line-height: 1.5 !important;
box-shadow: none !important;
outline: none !important;
transition: border-color .15s, box-shadow .15s, background .15s !important;
margin: 0 !important;
}
body.loginPage2 .input-col input::placeholder {
color: rgb(173,181,189) !important;
}
body.loginPage2 .input-col input:hover {
border-color: rgb(191,198,204) !important;
}
body.loginPage2 .input-col input:focus {
border-color: var(--blue) !important;
box-shadow: 0 0 0 3px rgba(57,132,190,.25) !important;
}
/* ---------- Walidacja (czerwone, mocne) ---------- */
body.loginPage2 .input-col input.input-validation-error,
body.loginPage2 .input-col input[aria-invalid="true"] {
border-color: var(--danger) !important;
background: var(--danger-bg) !important;
box-shadow: 0 0 0 1px var(--danger) !important;
}
body.loginPage2 .input-col input.input-validation-error:focus,
body.loginPage2 .input-col input[aria-invalid="true"]:focus {
box-shadow: 0 0 0 3px rgba(230,0,35,.35) !important;
}
body.loginPage2 .field-validation-error {
display: inline-block !important;
margin-top: 6px !important;
padding: 6px 10px !important;
background: var(--danger) !important;
border-radius: 4px !important;
color: #fff !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
}
/* Wrapper "color:white" wokół field-validation-* — wyłączamy biel kiedy jest błąd */
body.loginPage2 .input-col > div[style*="color:white"] {
color: var(--white) !important;
margin-top: 0 !important;
}
/* Komunikat globalny błędu (data-valmsg-for="error") jako baner */
body.loginPage2 [data-valmsg-for="error"].field-validation-error {
display: block !important;
width: 100%;
text-align: center;
margin-top: 12px !important;
padding: 10px 12px !important;
}
/* ---------- Link "I forgot my password" ---------- */
body.loginPage2 .input-col.left .klik {
color: var(--white) !important;
font-size: 14px !important;
text-decoration: underline !important;
text-underline-offset: 3px;
}
body.loginPage2 .input-col.left .klik:hover {
color: rgba(255,255,255,.85) !important;
}
/* ---------- Login button (pill) ---------- */
body.loginPage2 .button-login {
width: 100% !important;
height: 38px !important;
padding: 6px 24px !important;
border: 1px solid var(--blue) !important;
border-radius: 56px !important;
background: var(--blue) !important;
color: var(--white) !important;
font-family: Calibri, "Carlito", sans-serif !important;
font-weight: 700 !important;
font-size: 16px !important;
line-height: 1.5 !important;
cursor: pointer;
transition: background .15s, border-color .15s, transform .05s !important;
box-shadow: none !important;
text-shadow: none !important;
}
body.loginPage2 .button-login:hover {
background: var(--blue-2) !important;
border-color: var(--blue-2) !important;
}
body.loginPage2 .button-login:active {
transform: translateY(1px);
}
body.loginPage2 .button-login:focus {
outline: 0 !important;
box-shadow: 0 0 0 3px rgba(57,132,190,.4) !important;
}
/* ---------- Flagi językowe ---------- */
body.loginPage2 .center-block {
padding: 16px 0 8px !important;
text-align: center !important;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
body.loginPage2 .flags {
display: inline-flex;
align-items: center;
justify-content: center;
}
body.loginPage2 .flags a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 24px;
padding: 2px;
border-radius: 4px;
border: 1px solid transparent;
background: rgba(255,255,255,.08);
transition: border-color .15s, background .15s, transform .1s;
}
body.loginPage2 .flags a:hover {
border-color: rgba(255,255,255,.6);
background: rgba(255,255,255,.18);
transform: translateY(-1px);
}
body.loginPage2 .flags img {
display: block !important;
width: auto !important;
height: 14px !important;
max-width: 22px !important;
object-fit: contain !important;
border-radius: 2px;
}
/* ---------- Stopka "Powered by" + logo Fieldworker w prawym dolnym rogu ---------- */
body.loginPage2::after {
content: "Powered by";
position: fixed;
bottom: 16px;
right: 24px;
height: 22px;
line-height: 22px;
font-family: Calibri, "Carlito", Arial, sans-serif;
font-size: 12px;
color: rgba(255,255,255,.75);
letter-spacing: .04em;
padding-right: 110px;
background: url("/Images/fieldwhite.png") right center / 100px auto no-repeat;
pointer-events: none;
}
/* ---------- Slot dla "Part of " w lewym dolnym rogu ----------
Wgraj plik do /Images/partner-logo.png (lub .svg) — pojawi się sam.
Filtr brightness/invert renderuje czarne logo na biało; jeśli masz
białą wersję, usuń linię `filter:`. */
body.loginPage2 .partner-logo {
position: fixed;
bottom: 14px;
left: 24px;
height: 22px;
width: auto;
max-width: 160px;
object-fit: contain;
opacity: .85;
filter: brightness(0) invert(1);
pointer-events: none;
z-index: 5;
}
/* Fallback tekstowy, gdy brak grafiki — pokazuje placeholder dopóki
nie wgrasz pliku. Usuń tę regułę po wgraniu logo. */
body.loginPage2:not(:has(.partner-logo))::before {
/* (nic — tło zostaje) */
}
/* ---------- Responsywność ---------- */
@media (max-width: 480px) {
body.loginPage2 header.loginPage {
justify-content: center !important;
padding: 16px;
}
body.loginPage2 .logoLogin {
height: 48px !important;
}
body.loginPage2 .form-login {
width: 100%;
max-width: 320px;
}
body.loginPage2 .login-form {
padding-top: 70px;
}
body.loginPage2 .login-form::before {
font-size: 26px;
}
body.loginPage2::after {
display: none;
}
}