/* * auth.css — pagine di accesso e registrazione (login.php, registrati.php). * * Layout a due colonne a tutta pagina: a sinistra il pannello del marchio sul * blu pieno di cofferweb, a destra il form. Le classi sono tutte "cwl-" per non * incrociare bootstrap e i fogli del gestionale. * * Il foglio va caricato solo dalle pagine auth (module/header/view.tpl nel ramo * dei non loggati e module/header-out/view.tpl), che mettono anche la classe * "cw-auth" sul : prima il fondo blu era uno style inline sul body, che * vinceva su qualsiasi regola. * * Attenzione: main.bundle.css contiene "i{color:#788db4}", che batte * l'ereditarieta'. Ogni icona qui sotto e' colorata puntando il tag . */ :root { --cwl-brand: #0088cc; --cwl-accent: #1e83e6; --cwl-green: #37b877; --cwl-green-d: #2e9c63; --cwl-ink: #2b3a52; --cwl-muted: #7a8aa0; --cwl-line: #e3e8ef; --cwl-on-dark: #ffffff; --cwl-on-dark-2: rgba(255,255,255,.80); --cwl-on-dark-3: rgba(255,255,255,.66); } body.cw-auth { margin: 0; /* I fogli del gestionale mettono il body in flex column: qui serve un blocco normale, il layout a colonne lo fa .cwl-wrap. */ display: block; background: #fff; color: var(--cwl-ink); font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; } body.cw-auth * { box-sizing: border-box; } .cwl-wrap { display: flex; min-height: 100vh; } /* ======================= Colonna brand (sinistra) ======================= */ .cwl-brand { flex: 0 0 46%; max-width: 620px; background: var(--cwl-brand); color: var(--cwl-on-dark); padding: 3.2rem 3rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .cwl-logo { display: block; width: auto; height: 34px; max-width: 230px; } .cwl-tag { margin: .8rem 0 2.2rem; font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; color: var(--cwl-on-dark-3); line-height: 1.7; } .cwl-title { font-size: 1.95rem; line-height: 1.2; font-weight: 500; margin: 0 0 .85rem; letter-spacing: -.015em; color: var(--cwl-on-dark); } .cwl-lead { color: var(--cwl-on-dark-2); font-size: .92rem; line-height: 1.6; margin: 0 0 1.7rem; max-width: 380px; } .cwl-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.05rem; } .cwl-feats li { display: flex; gap: .85rem; align-items: flex-start; } .cwl-feat-ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .cwl-feat-ic i { color: #fff; } .cwl-feats b { display: block; font-size: .85rem; font-weight: 500; color: var(--cwl-on-dark); } .cwl-feats small { display: block; color: var(--cwl-on-dark-3); font-size: .76rem; line-height: 1.45; margin-top: .14rem; } .cwl-brand-foot { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.2); font-size: .74rem; color: var(--cwl-on-dark-3); line-height: 1.6; } .cwl-brand-foot a { color: var(--cwl-on-dark-2); text-decoration: none; } .cwl-brand-foot a:hover { color: #fff; text-decoration: underline; } /* ======================== Colonna form (destra) ======================== */ .cwl-form { flex: 1; padding: 3rem 3.2rem; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .cwl-form > * { width: 100%; max-width: 408px; } /* Moduli con campi affiancati (registrazione studio): colonna piu' larga. */ .cwl-form--wide > * { max-width: 520px; } .cwl-form h1 { font-size: 1.75rem; font-weight: 500; margin: 0 0 .4rem; letter-spacing: -.015em; color: var(--cwl-ink); } .cwl-sub { color: var(--cwl-muted); font-size: .92rem; line-height: 1.55; margin: 0 0 1.7rem; } .cwl-label { display: block; font-weight: 500; font-size: .82rem; color: var(--cwl-ink); margin: 0 0 .45rem; } .cwl-fld { position: relative; margin-bottom: 1.05rem; } .cwl-fld > i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #8a94a6; font-size: 1.15rem; pointer-events: none; } .cwl-fld input { width: 100%; height: 52px; border: 1.5px solid var(--cwl-line); border-radius: 12px; padding: 0 14px 0 44px; font-size: .94rem; font-family: inherit; color: var(--cwl-ink); background: #fff; transition: border-color .15s, box-shadow .15s; } .cwl-fld input::placeholder { color: #a2acbd; } .cwl-fld input:focus { outline: none; border-color: var(--cwl-accent); box-shadow: 0 0 0 3px rgba(30,131,230,.14); } .cwl-fld.has-toggle input { padding-right: 44px; } .cwl-toggle-pwd { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: #8a94a6; font-size: 1.15rem; padding: .5rem; cursor: pointer; line-height: 1; } .cwl-toggle-pwd i { color: inherit; } /* Campi affiancati; sotto i 560px tornano incolonnati. */ .cwl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } @media (max-width: 560px) { .cwl-grid { grid-template-columns: 1fr; } } /* Robustezza della password: barra sottile sotto il campo, riempita da auth.js in base a quanti criteri sono soddisfatti (da 1 a 4). */ .cwl-forza { display: flex; align-items: center; gap: .6rem; margin: -.75rem 0 1rem; } .cwl-forza__barra { flex: 1; height: 4px; border-radius: 999px; background: var(--cwl-line); overflow: hidden; } .cwl-forza__barra > span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .25s, background-color .25s; } .cwl-forza__testo { font-size: .75rem; color: var(--cwl-muted); min-width: 74px; text-align: right; } .cwl-forza--1 .cwl-forza__barra > span { width: 25%; background: #e35d6a; } .cwl-forza--2 .cwl-forza__barra > span { width: 50%; background: #e0a52e; } .cwl-forza--3 .cwl-forza__barra > span { width: 75%; background: #6fcf97; } .cwl-forza--4 .cwl-forza__barra > span { width: 100%; background: var(--cwl-green); } /* Esito del confronto fra password e ripeti-password. */ .cwl-hint { display: block; font-size: .78rem; margin: -.75rem 0 1rem; min-height: 1em; } .cwl-hint--ok { color: #15803d; } .cwl-hint--ko { color: #a3122f; } .cwl-sep { border: 0; border-top: 1px solid var(--cwl-line); margin: .4rem 0 1.4rem; } .cwl-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: .2rem 0 1.4rem; font-size: .88rem; } .cwl-check { display: flex; align-items: center; gap: .5rem; color: var(--cwl-ink); cursor: pointer; margin: 0; } .cwl-check input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--cwl-accent); cursor: pointer; margin: 0; } /* Testo minuto sotto un modulo (informativa, note). */ .cwl-note { font-size: .8rem; color: var(--cwl-muted); line-height: 1.5; margin: 0 0 1rem; } /* Riga di consenso: la spunta sta in alto, il testo va a capo accanto. */ .cwl-consenso { display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 1rem; font-size: .8rem; color: var(--cwl-muted); line-height: 1.5; cursor: pointer; } .cwl-consenso input { width: 17px; height: 17px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--cwl-accent); cursor: pointer; } a.cwl-link { color: var(--cwl-accent); text-decoration: none; font-weight: 500; } a.cwl-link:hover { text-decoration: underline; color: var(--cwl-accent); } .cwl-btn { width: 100%; height: 52px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #4bbf7b, var(--cwl-green-d)); color: #fff; font-weight: 500; font-size: 1rem; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .55rem; box-shadow: 0 12px 24px rgba(55,184,119,.28); transition: transform .12s, box-shadow .12s; text-decoration: none; } .cwl-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(55,184,119,.34); color: #fff; text-decoration: none; } /* theme-k.css colora "a:link"/"a:visited" (specificita' 0,1,1), che batte la sola .cwl-btn: dove il pulsante e' un - "Accedi al sistema" a fine registrazione - il testo restava blu. */ a.cwl-btn:link, a.cwl-btn:visited, a.cwl-btn:hover, a.cwl-btn:active { color: #fff; text-decoration: none; } .cwl-btn i { font-size: 1.25rem; color: #fff; } .cwl-btn--blue { background: linear-gradient(135deg, #2f9de0, var(--cwl-brand)); box-shadow: 0 12px 24px rgba(0,136,204,.26); } .cwl-btn--blue:hover { box-shadow: 0 16px 30px rgba(0,136,204,.32); } .cwl-foot { text-align: center; margin-top: 1.5rem; font-size: .9rem; color: var(--cwl-muted); } .cwl-alert { border-radius: 12px; padding: .8rem 1rem; font-size: .88rem; margin-bottom: 1.1rem; display: flex; gap: .55rem; align-items: flex-start; line-height: 1.5; } .cwl-alert i { font-size: 1.2rem; flex: 0 0 auto; color: inherit; } .cwl-alert--danger { background: #fef2f4; color: #a3122f; border: 1px solid #fbd5dd; } .cwl-alert--success { background: #edfaf2; color: #15803d; border: 1px solid #c9f0da; } .cwl-alert--info { background: #eef6fd; color: #14567f; border: 1px solid #cfe6f7; } .cwl-captcha { display: flex; justify-content: center; margin-bottom: 1.2rem; } /* ===================== Pagine di esito (registrazione) ===================== */ .cwl-esito { text-align: center; } .cwl-esito h1 { font-size: 1.6rem; } .cwl-esito p { color: var(--cwl-muted); font-size: .93rem; line-height: 1.6; margin: 0 0 1rem; } .cwl-esito .cwl-btn { margin-top: .6rem; } .cwl-esito-ic { width: 84px; height: 84px; margin: 0 auto 1.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; } .cwl-esito-ic i { color: inherit; } .cwl-esito-ic--info { background: #eef6fd; color: var(--cwl-brand); } .cwl-esito-ic--success { background: #edfaf2; color: var(--cwl-green-d); } /* Rotella di attesa durante la creazione dell'account. */ .cwl-spinner { width: 54px; height: 54px; margin: 0 auto 1.4rem; border-radius: 50%; border: 4px solid var(--cwl-line); border-top-color: var(--cwl-brand); animation: cwl-gira .9s linear infinite; } @keyframes cwl-gira { to { transform: rotate(360deg); } } /* ============================== Adattamenti ============================== */ /* Finestre basse: il pannello e' in overflow:hidden, quindi invece di farsi tagliare a meta' cede prima la riga in fondo e poi un po' di spaziature. */ @media (max-height: 800px) { .cwl-brand { padding: 2.4rem 3rem; } .cwl-brand-foot { display: none; } } @media (max-height: 660px) { .cwl-brand { justify-content: flex-start; } .cwl-tag { margin-bottom: 1.4rem; } .cwl-title { font-size: 1.6rem; } .cwl-lead { margin-bottom: 1.2rem; } .cwl-feats { gap: .8rem; } } /* Sotto i 980px il pannello si riduce a un'intestazione col solo marchio. */ @media (max-width: 980px) { .cwl-wrap { flex-direction: column; } .cwl-brand { flex: 0 0 auto; max-width: none; padding: 1.5rem; } .cwl-title, .cwl-lead, .cwl-feats, .cwl-brand-foot { display: none; } .cwl-tag { margin-bottom: 0; } .cwl-logo { height: 30px; } .cwl-form { padding: 2.2rem 1.5rem 3rem; justify-content: flex-start; } }