/* Pagina di login "reimmaginata" - layout a due colonne, scuro, card "glass". Autosufficiente: non dipende da app.css. L'accento segue il colore --primary del tema attivo (impostato come inline style sul dalla view). */ /* Font del login (SIL OFL, self-hosted -> niente Google Fonts, CSP-safe). Archivo per testi e titoli; JetBrains Mono per le piccole etichette maiuscole. */ @font-face { font-family:"Archivo"; src:url("../fonts/archivo/Archivo-variable.woff2") format("woff2-variations"); font-weight:100 900; font-style:normal; font-display:swap; } @font-face { font-family:"JetBrains Mono"; src:url("../fonts/jetbrains-mono/JetBrainsMono-variable.woff2") format("woff2-variations"); font-weight:100 800; font-style:normal; font-display:swap; } .login-page{ --acc: var(--primary, #e21f18); --bg0:#070A11; --bg1:#0C111B; --ink:#eef1f6; --muted:#8e98a8; --label:#8a94a6; /* Equivalente OPACO del campo, serve all'autofill (che non tollera sfondi traslucidi, vedi sotto). Ricavato componendo a mano --bg1 + il vetro della card + il 4% di bianco del campo: alle due altezze in cui stanno i campi il gradiente della card da' rgb(29,34,43) e rgb(28,32,42), quindi questo tono sta in mezzo e non si stacca ne' sopra ne' sotto. */ --field-solid:#1c212b; /* Dichiara alla UA che questa pagina e' scura: senza, Chrome la tratta come chiara e per i campi in autofill sceglie la sua tinta CHIARA (#e8f0fe) su un form nero. Sistema di riflesso anche scrollbar e icona nativa "mostra password". */ color-scheme:dark; margin:0; min-height:100vh; background:var(--bg0); font-family:"Archivo","PingFang SC","Microsoft YaHei","Noto Sans SC","Segoe UI",system-ui,sans-serif; color:var(--ink); -webkit-font-smoothing:antialiased; } .login-page *{box-sizing:border-box} .login-page input{font-family:inherit} .login-page input::placeholder{color:#566173;opacity:1} /* AUTOFILL. Chrome dipinge i campi riempiti da solo con uno sfondo interno suo, che un normale background non batte: l'unica cosa che lo copre e' un'ombra INTERNA piena (da qui il 1000px e il colore opaco --field-solid). La sola `transition:background-color 9999s` che c'era prima non sovrascriveva niente, rimandava solo l'animazione: saltava al ritorno da bfcache, sul riempimento scelto dal menu a tendina e sui Chrome che usano :-internal-autofill-selected, lasciando testo CHIARO su fondo CHIARO (valori illeggibili). La transition resta come seconda rete. */ .login-page input:-webkit-autofill, .login-page input:-webkit-autofill:hover, .login-page input:-webkit-autofill:active{ -webkit-text-fill-color:var(--ink); caret-color:var(--ink); box-shadow:inset 0 0 0 1000px var(--field-solid); transition:background-color 9999s} /* Il focus ha la sua regola: l'ombra interna sostituirebbe l'anello rosso di .lpage__input:focus, quindi qui vanno DICHIARATE ENTRAMBE. */ .login-page input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--ink); caret-color:var(--ink); box-shadow:inset 0 0 0 1000px var(--field-solid), 0 0 0 4px color-mix(in srgb,var(--acc) 18%,transparent)} .lpage{display:flex;width:100%;min-height:100vh} /* ===== sinistra: palco brand ===== */ .lpage__stage{flex:1 1 0;min-width:0;position:relative;overflow:hidden; padding:clamp(32px,4vw,56px);display:flex;flex-direction:column; background:linear-gradient(160deg, var(--bg1), var(--bg0) 78%);} .lpage__logo{align-self:flex-start;display:inline-flex;padding:13px 20px;border-radius:16px;color:#fff; background:var(--login-logo-bg,#0c111b);box-shadow:0 16px 44px -18px rgba(0,0,0,.7);position:relative;z-index:2} .lpage__logo img,.lpage__logo svg{display:block;height:50px;width:auto} .lpage__logo--bare{background:transparent;box-shadow:none;padding:0} .lpage__logo .lpage__mark{font-weight:900;font-size:26px;color:#0c111b;letter-spacing:-.02em} .lpage__hero{position:relative;z-index:2;flex:1;margin-top:28px;border-radius:22px;overflow:hidden; min-height:320px;background:linear-gradient(180deg,#0e1622,#0a121c); background-size:cover;background-position:center; box-shadow:0 0 0 1px rgba(255,255,255,.04)} .lpage__hero-grid{position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:46px 46px;mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 70%)} .lpage__hero.has-img .lpage__hero-grid{display:none} .lpage__hero-shade{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg, color-mix(in srgb,var(--bg0) 28%,transparent) 0%, transparent 26%, color-mix(in srgb,var(--bg0) 62%,transparent) 60%, var(--bg0) 100%)} .lpage__hero-cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(24px,3vw,36px);pointer-events:none} .lpage__hero-cap h1{font-weight:900;font-size:clamp(30px,3.2vw,48px);line-height:1.03;letter-spacing:-.02em; color:#fff;margin:0;text-shadow:0 2px 30px rgba(0,0,0,.5)} /* ===== destra: form ===== */ .lpage__pane{flex:1 1 0;min-width:420px;display:flex;align-items:center;justify-content:center; padding:clamp(28px,4vw,56px);background:var(--bg1);border-left:1px solid rgba(255,255,255,.06)} .lpage__card{width:100%;max-width:392px;position:relative;overflow:hidden;padding:38px 36px 32px;border-radius:24px; border:1px solid rgba(255,255,255,.09); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); box-shadow:0 34px 90px -34px #000, inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} .lpage__line{position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc) 55%,transparent) 50%,transparent)} .lpage__card h2{font-weight:800;font-size:27px;letter-spacing:-.01em;color:#f4f6fa;margin:0} .lpage__sub{margin:7px 0 0;color:var(--muted);font-size:13.5px} .lpage__alert{margin:16px 0 0;padding:11px 14px;border-radius:11px;font-size:13.5px;line-height:1.4; border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#e8ecf3} .lpage__alert.is-error{border-color:color-mix(in srgb,#ef4444 55%,transparent);background:color-mix(in srgb,#ef4444 16%,transparent);color:#ffd9d6} .lpage__alert.is-success{border-color:color-mix(in srgb,#22c55e 50%,transparent);background:color-mix(in srgb,#22c55e 14%,transparent);color:#cdf5d8} .lpage__lblsmall{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:.2em;color:#5b6573;text-transform:uppercase;margin-bottom:8px} .lpage__fieldlbl{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--label);margin-bottom:9px;display:block} .lpage__seg{display:flex;width:100%;padding:4px;border-radius:11px;gap:0; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)} .lpage__seg button{flex:1;padding:7px 0;border:none;background:transparent;cursor:pointer;border-radius:8px; font-family:"JetBrains Mono","Microsoft YaHei","Noto Sans SC",ui-monospace,monospace;font-weight:700;font-size:11.5px;color:#fff;letter-spacing:.06em;transition:background .2s} .lpage__seg button.is-active{background:var(--acc);box-shadow:0 5px 14px -5px var(--acc)} .lpage__divider{height:1px;background:rgba(255,255,255,.07);margin:24px 0} .lpage__input{width:100%;height:52px;padding:0 16px;border-radius:13px;border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);color:var(--ink);font-size:15.5px;outline:none; transition:border-color .2s,box-shadow .2s,background .2s} .lpage__input:focus{border-color:var(--acc);background:rgba(255,255,255,.06); box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 18%,transparent)} .lpage__pwd{position:relative} .lpage__pwd .lpage__input{padding-right:52px} .lpage__eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:flex; align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;color:#909aab;border-radius:9px} .lpage__eye:hover{color:var(--acc)} .lpage__eye svg{width:22px;height:22px} .lpage__eye .eye-off{display:none} .lpage__eye.is-on .eye-on{display:none} .lpage__eye.is-on .eye-off{display:block} .lpage__forgot{display:block;text-align:right;margin-top:13px;font-weight:600;font-size:13px;color:var(--acc);text-decoration:none} .lpage__forgot:hover{text-decoration:underline} .lpage__btn{width:100%;height:54px;margin-top:22px;border:none;border-radius:12px;cursor:pointer;display:flex; align-items:center;justify-content:center;gap:10px;font-family:inherit;font-weight:600;font-size:15.5px;color:#fff; background:var(--acc);transition:background .18s,transform .12s} .lpage__btn:hover{background:color-mix(in srgb,var(--acc) 86%,black)} .lpage__btn:active{transform:scale(.99)} .lpage__btn .arr{font-size:18px;line-height:1;transform:translateY(-1px)} .lpage__or{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:#5b6573;font-size:11px; letter-spacing:.1em;text-transform:uppercase} .lpage__or::before,.lpage__or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.08)} .lpage__sso{width:100%;height:50px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px; font-family:inherit;font-weight:600;font-size:14.5px;color:#dfe5ee;background:rgba(255,255,255,.03);text-decoration:none; border:1px solid rgba(255,255,255,.12);transition:background .18s,border-color .18s} .lpage__sso:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)} .lpage__sso svg{width:18px;height:18px} .lpage__lang-form{margin:0} /* ===== variante SOLO: password dimenticata / nuova password ===== Stessa grammatica della login (stesse variabili, stessa card, stessi campi, stesso trattamento dell'autofill) ma a UNA colonna centrata: qui non c'e' niente da raccontare, si e' arrivati per fare una cosa sola. Prima queste due pagine avevano un foglio di stile tutto loro, fermo al primo tema. */ .lpage--solo{align-items:center;justify-content:center;padding:36px 16px; background:linear-gradient(160deg,var(--bg1),var(--bg0) 78%)} .lpage--solo .lpage__pane{flex:0 1 456px;min-width:0;padding:0;background:transparent;border-left:none; flex-direction:column;align-items:center} .lpage--solo .lpage__logo{align-self:center;margin-bottom:13px} .lpage--solo .lpage__card{max-width:456px} .lpage__name{margin:0 0 22px;font-weight:800;font-size:19px;letter-spacing:-.01em;color:#f4f6fa;text-align:center} .lpage__back{display:block;text-align:center;margin-top:20px;font-weight:600;font-size:13px; color:var(--muted);text-decoration:none} .lpage__back:hover{color:var(--ink)} /* ===== card "Accesso non previsto" (/sso/denied) ===== Atterraggio dei rifiuti SSO autorizzativi: stessa card della login, ma informativa pura (niente campi, niente pulsanti). Icona e riquadro sono volutamente NEUTRI (grigi chiari, niente rosso d'errore): chi arriva qui non ha sbagliato nulla, semplicemente la piattaforma non lo prevede. */ .lpage__deny-ico{width:54px;height:54px;border-radius:14px;background:#f1f5f9; color:#475569;display:flex;align-items:center;justify-content:center;margin-bottom:18px} .lpage__deny-ico svg{width:26px;height:26px} .lpage__deny-box{margin-top:20px;padding:14px 16px;border:1px solid #e2e8f0;border-radius:12px; background:#f8fafc;color:#334155;font-size:13.5px;line-height:1.6} .lpage__deny-out{margin-top:18px;color:#64748b;font-size:12.5px} /* ===== responsive ===== */ @media (max-width:880px){ .lpage{flex-direction:column} .lpage__stage{min-height:230px;flex:none} .lpage__hero{min-height:140px;margin-top:20px} .lpage__pane{min-width:0;align-items:flex-start} /* la solo resta centrata: non ha una seconda colonna da impilare */ .lpage--solo .lpage__pane{align-items:center} } @media (max-width:520px){ .lpage__card{padding:28px 22px 26px} .lpage--solo{padding:24px 14px} }