/* * Chiosco Cloud — schermate di autenticazione * Design "Login in una schermata sola": la pagina sta dentro il viewport, * si estende in orizzontale su desktop e collassa in verticale su mobile. * Richiede design-tokens.css e . */ *, *::before, *::after { box-sizing: border-box; } /* ------------------------------------------------------------------ pagina */ .auth-body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; padding: 24px 16px; background: var(--surface); color: var(--text-main); font: var(--text-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Aloni sfocati di sfondo: decorativi, sotto al contenuto. */ .auth-orb { position: fixed; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(80px); } .auth-orb--cool { top: -120px; left: -80px; width: 420px; height: 420px; opacity: .28; background: var(--gradient-cool); animation: auth-float 22s ease-in-out infinite; } .auth-orb--warm { right: -60px; bottom: -140px; width: 460px; height: 460px; opacity: .22; filter: blur(85px); background: var(--gradient-sunset); animation: auth-float 28s ease-in-out infinite reverse; } @keyframes auth-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.12); } } .auth-shell { position: relative; z-index: 1; margin: auto; width: 100%; max-width: 460px; } .auth-shell--wide { max-width: 940px; } /* ------------------------------------------------------------------- card */ .auth-card { background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 40px 32px; box-shadow: 0 24px 48px -24px rgba(17, 24, 39, .25); } .auth-card__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; } .auth-brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; } .auth-brand__logo { display: block; width: 46px; height: 46px; object-fit: contain; } .auth-brand__name { font: 800 1.35rem/1 var(--font-display); letter-spacing: -.01em; color: var(--text-main); } .auth-badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border: 1px solid rgba(42, 92, 98, .25); border-radius: var(--radius-full); background: rgba(109, 160, 166, .12); font: 700 .85rem/1 var(--font-main); color: var(--brand-teal-dark); } .auth-badge__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-teal); } .auth-heading { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; } .auth-title { margin: 0; font: 800 1.8rem/1.15 var(--font-display); color: var(--text-main); } .auth-subtitle { margin: 0; font: 400 .95rem/1.5 var(--font-main); color: var(--text-secondary); text-wrap: pretty; } /* --------------------------------------------------------------- pannelli */ .auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; } .auth-panel { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fbfbfc; } .auth-panel--featured { border: 1.5px solid rgba(242, 115, 41, .35); background: linear-gradient(180deg, #fff6ee 0%, #ffffff 100%); } .auth-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .auth-panel__title { font: 700 1.15rem/1.2 var(--font-main); color: var(--text-main); } .auth-panel__hint { margin: -6px 0 0; font: 400 .88rem/1.4 var(--font-main); color: var(--text-secondary); } .auth-panel__foot { margin: auto 0 0; padding-top: 4px; font: 400 .8rem/1.4 var(--font-main); color: #6b7280; } .auth-tag { padding: 5px 11px; border-radius: var(--radius-full); background: var(--gradient-warm); font: 700 .7rem/1 var(--font-main); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: #fff; } /* ------------------------------------------------------------ accesso demo */ .auth-role { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); color: var(--text-main); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } .auth-role:hover { transform: translateY(-2px); } .auth-role--admin:hover { border-color: var(--brand-orange); box-shadow: 0 12px 26px -12px rgba(242, 115, 41, .45); } .auth-role--cassa:hover { border-color: var(--brand-teal); box-shadow: 0 12px 26px -12px rgba(42, 92, 98, .4); } .auth-role__icon { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-lg); color: #fff; font-size: 1.05rem; } .auth-role--admin .auth-role__icon { background: radial-gradient(circle at 30% 22%, #F7C56B 0%, #F2AE2E 40%, #F27329 75%, #C63A17 100%); box-shadow: 0 8px 16px -6px rgba(242, 115, 41, .45), inset 0 1px 2px rgba(255, 255, 255, .5); } .auth-role--cassa .auth-role__icon { background: radial-gradient(circle at 30% 22%, #A9D2D7 0%, #6DA0A6 45%, #2A5C62 100%); box-shadow: 0 8px 16px -6px rgba(42, 92, 98, .4), inset 0 1px 2px rgba(255, 255, 255, .5); } .auth-role__body { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; } .auth-role__title { font: 700 1.05rem/1.2 var(--font-main); } .auth-role__desc { font: 400 .85rem/1.3 var(--font-main); color: var(--text-secondary); } .auth-role__chevron { flex: none; color: #9ca3af; font-size: 1.1rem; line-height: 1; } /* ------------------------------------------------------------------- form */ .auth-form { display: flex; flex-direction: column; gap: 14px; } .auth-field { display: flex; flex-direction: column; gap: 6px; } .auth-label { font: 600 .82rem/1 var(--font-main); color: var(--text-secondary); } .auth-input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid #d1d5db; border-radius: var(--radius-md); background: var(--background); font: 400 .95rem/1 var(--font-main); color: var(--text-main); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .auth-input::placeholder { color: #9ca3af; } .auth-input:focus { outline: none; border-color: var(--brand-orange); box-shadow: 0 0 0 3px rgba(242, 115, 41, .18); } .auth-input:disabled, .auth-input[readonly] { background: var(--surface); color: var(--text-secondary); } .auth-input.is-invalid { border-color: var(--critical); } .auth-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); } .auth-error { font: 600 .8rem/1.35 var(--font-main); color: var(--critical); } .auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .auth-check { display: inline-flex; align-items: center; gap: 8px; font: 400 .85rem/1 var(--font-main); color: var(--text-secondary); cursor: pointer; } .auth-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-orange-dark); } .auth-link { font: 400 .85rem/1.4 var(--font-main); color: var(--brand-teal-dark); text-decoration: none; } .auth-link:hover { color: var(--brand-orange-dark); text-decoration: underline; } /* ---------------------------------------------------------------- bottoni */ .auth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: .75rem 1.5rem; border: none; border-radius: var(--radius-md); font: 700 1rem/1 var(--font-main); text-decoration: none; cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .auth-btn--primary { background: var(--gradient-warm); color: #fff; box-shadow: var(--shadow-brand); } .auth-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(242, 115, 41, .5); color: #fff; } .auth-btn--ghost { border: 1px solid #d1d5db; background: transparent; color: #374151; font-weight: 600; font-size: .95rem; } .auth-btn--ghost:hover { border-color: var(--brand-teal); color: var(--brand-teal-dark); } .auth-role:focus-visible, .auth-btn:focus-visible, .auth-input:focus-visible { outline: 2px solid var(--brand-teal-dark); outline-offset: 2px; } /* -------------------------------------------------------------- messaggi */ .auth-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); font: 400 .9rem/1.45 var(--font-main); } .auth-alert--info { border: 1px solid rgba(42, 92, 98, .25); background: rgba(109, 160, 166, .12); color: var(--brand-teal-dark); } .auth-alert--success { border: 1px solid rgba(34, 197, 94, .35); background: rgba(34, 197, 94, .1); color: #166534; } .auth-alert--error { border: 1px solid rgba(239, 68, 68, .3); background: rgba(239, 68, 68, .08); color: #991b1b; } .auth-alert ul { margin: 0; padding-left: 18px; } .auth-divider { display: flex; align-items: center; gap: 12px; font: 400 .78rem/1 var(--font-main); color: #6b7280; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .auth-foot { margin: 22px 0 0; text-align: center; font: 400 .85rem/1.5 var(--font-main); color: var(--text-secondary); } /* ------------------------------------------- credenziali richiudibili (mobile) */ /* Il toggle esiste solo dove il pannello può collassare, cioè su mobile in modalità demo: su desktop le due colonne sono sempre entrambe visibili. */ .auth-collapsible { display: flex; flex-direction: column; gap: 12px; } .auth-collapsible__toggle { display: none; justify-content: space-between; } .auth-collapsible__toggle .fa-chevron-down { transition: transform var(--transition-fast); } .auth-collapsible.is-open .auth-collapsible__toggle .fa-chevron-down { transform: rotate(180deg); } /* ---------------------------------------------------------------- mobile */ @media (max-width: 860px) { .auth-body { padding: 16px 12px; } .auth-shell--wide { max-width: 460px; } .auth-card { padding: 24px 20px 26px; } .auth-card__header { flex-direction: column; gap: 10px; margin-bottom: 18px; text-align: center; } .auth-brand { flex-direction: column; gap: 8px; } .auth-brand__logo { width: 62px; height: 62px; } .auth-brand__name { font-size: 1.3rem; } .auth-badge { padding: 7px 14px; font-size: .76rem; } .auth-heading { margin-bottom: 16px; } .auth-title { font-size: 1.35rem; } .auth-grid { grid-template-columns: 1fr; gap: 16px; } .auth-panel--featured { border-width: 1.5px; } .auth-collapsible__toggle { display: inline-flex; } .auth-collapsible:not(.is-open) .auth-collapsible__panel { display: none; } .auth-orb--cool { display: none; } .auth-orb--warm { top: -90px; right: -70px; bottom: auto; width: 280px; height: 280px; opacity: .25; filter: blur(70px); } } @media (max-width: 380px) { .auth-card { padding: 20px 16px 22px; } .auth-role { padding: 14px; gap: 12px; } .auth-role__icon { width: 40px; height: 40px; border-radius: 13px; } } @media (prefers-reduced-motion: reduce) { .auth-orb, .auth-role, .auth-btn, .auth-collapsible__toggle .fa-chevron-down { animation: none !important; transition: none !important; } .auth-role:hover, .auth-btn--primary:hover { transform: none; } }