/* ============================================================================ Login1.css — stile dedicato della pagina Aida/Login. Sostituisce il vecchio mucchio di stili inline + @import (ButtonAnimated1, Footer1, Input1) e il flip di colore inline gestito da Switch.js. L'accent (blu Clienti / arancio Professionisti) è guidato da una classe sul (Login1_ViewCliente / Login1_ViewCollaboratore) impostata server-side al primo render e togglata client-side da Switch.js: niente round-trip, niente ribaltamento brusco dell'intera pagina (cambiano solo gli accenti). Convenzioni: stessi breakpoint del resto del Core (600px), colori via le variabili di Color1.css. ============================================================================ */ /* ---- Sfondo di pagina + accent per vista -------------------------------- */ body.Login1_ViewCliente { --login-accent: var(--blue); --login-accent-soft: #e6f1fb; --login-bg-1: #0a5fb0; --login-bg-2: #0026ff; } body.Login1_ViewCollaboratore { --login-accent: #c76e00; --login-accent-soft: #fdf0dd; --login-bg-1: #ef9f27; --login-bg-2: #b85c00; } .Login1_Page { box-sizing: border-box; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px 88px; background: radial-gradient(circle at 50% 25%, var(--login-bg-1), var(--login-bg-2)); transition: background-color .35s ease; } /* ---- Card --------------------------------------------------------------- */ .Login1_Card { box-sizing: border-box; width: 100%; max-width: 420px; background: #ffffff; border-radius: 14px; padding: 28px 26px 20px; box-shadow: rgba(0, 0, 0, 0.18) 0 10px 30px -8px, rgba(0, 0, 0, 0.10) 0 4px 8px -4px; animation: Login1_in .45s ease both; } @keyframes Login1_in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .Login1_Card { animation: none; } } /* ---- Loghi -------------------------------------------------------------- */ .Login1_Logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-bottom: 6px; } .Login1_Logo { display: flex; align-items: center; justify-content: center; } .Login1_Logo img { max-height: 56px; max-width: 200px; width: auto; height: auto; object-fit: contain; } /* ---- Intestazione ------------------------------------------------------- */ .Login1_Heading { text-align: center; margin: 14px 0 18px; } .Login1_Title { font-size: 1.3rem; font-weight: 500; color: #042c53; line-height: 1.3; } .Login1_Subtitle { font-size: 0.9rem; color: #5f5e5a; margin-top: 2px; } /* ---- Segmented control (selettore vista) -------------------------------- */ .Login1_Segment { display: flex; gap: 4px; padding: 4px; background: #f1f4f8; border-radius: 10px; margin-bottom: 20px; } .Login1_SegBtn { flex: 1; border: none; background: transparent; border-radius: 7px; padding: 9px 0; font-size: 0.92rem; font-weight: 500; color: #44443f; cursor: pointer; transition: background-color .2s ease, color .2s ease; } .Login1_SegBtn:hover { color: #2c2c2a; } .Login1_SegActive { background: var(--login-accent); color: #ffffff; } .Login1_SegActive:hover { color: #ffffff; } /* ---- Campi -------------------------------------------------------------- */ .Login1_Fields[hidden] { display: none; } .Login1_Label { display: block; font-size: 0.8rem; font-weight: 500; color: #44443f; margin: 0 0 6px 2px; } .Login1_InputWrap { display: flex; align-items: center; gap: 4px; border: 1px solid #cfd6df; border-radius: 9px; padding: 0 10px; margin-bottom: 14px; background: #ffffff; transition: border-color .15s ease, box-shadow .15s ease; } .Login1_InputWrap:focus-within { border-color: var(--login-accent); box-shadow: 0 0 0 3px var(--login-accent-soft); } .Login1_InputIcon { font-size: 20px; color: #888780; flex: 0 0 auto; } .Login1_Input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; padding: 11px 8px; font-size: 1rem; text-align: left; color: #2c2c2a; } .Login1_Input::placeholder { color: rgba(0, 0, 0, 0.38); } .Login1_PwToggle { flex: 0 0 auto; border: none; background: transparent; color: #888780; cursor: pointer; padding: 4px; display: flex; align-items: center; } .Login1_PwToggle:hover { color: #44443f; } .Login1_PwToggle .material-symbols-outlined { font-size: 20px; } .Login1_PasswordRow[hidden] { display: none; } /* ---- Messaggi di errore inline ------------------------------------------ */ .Login1_Error { font-size: 0.82rem; color: var(--red); margin: -6px 2px 12px; line-height: 1.3; } .Login1_Error[hidden] { display: none; } /* ---- Help / link secondari ---------------------------------------------- */ .Login1_HelpRow { text-align: right; margin: -4px 2px 16px; } .Login1_Link { font-size: 0.82rem; color: var(--login-accent); cursor: pointer; } .Login1_Link:hover { text-decoration: underline; } /* ---- Pulsante primario (Accedi) ----------------------------------------- */ .Login1_Cta { width: 100%; border: none; border-radius: 10px; background: var(--green); color: #ffffff; font-size: 1.02rem; font-weight: 500; padding: 13px 0; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: filter .15s ease, transform .05s ease; } .Login1_Cta:hover { filter: brightness(0.93); } .Login1_Cta:active { transform: scale(0.99); } .Login1_Cta .material-symbols-outlined { font-size: 20px; } /* ---- Pulsante secondario (Indietro) ------------------------------------- */ .Login1_Back { display: block; margin: 12px auto 0; border: none; background: transparent; color: #5f5e5a; font-size: 0.9rem; cursor: pointer; padding: 6px 12px; } .Login1_Back:hover { color: #2c2c2a; text-decoration: underline; } /* ---- Footer contatti ---------------------------------------------------- */ .Login1_Footer { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid #ececec; font-size: 0.8rem; color: #888780; } .Login1_Footer .material-symbols-outlined { font-size: 16px; vertical-align: -3px; } .Login1_FooterSep { color: #d3d1c7; } #container_Contatti { cursor: pointer; } #Contatti_Body { width: 100%; margin-top: 10px; padding: 12px; border-radius: 9px; background: var(--verylightgray); font-size: 0.82rem; color: #44443f; text-align: center; cursor: default; } /* ---- Mobile ------------------------------------------------------------- */ @media screen and (max-width: 600px) { .Login1_Page { padding: 20px 12px 80px; } .Login1_Card { padding: 22px 18px 16px; border-radius: 12px; } .Login1_Logo img { max-height: 48px; max-width: 70%; } .Login1_Title { font-size: 1.2rem; } }