/* ============================================================ AXETTIA — pagine di accesso (login e signup) v0.1 (11.8.2026) Impianto "Registro": a sinistra l'accesso, a destra il registro degli esempi della verticale (domanda, risposta, fonte). Riusa i token di /stile.css: qui nessun colore nuovo, nessuna risorsa esterna (coerente con la CSP self del servizio sito). ============================================================ */ body.accedi{background:var(--bianco);overflow-x:hidden} /* visibilità per modalità di accesso (data-modo sul ) */ body[data-modo="identity-platform"] .solo-google{display:none} body[data-modo="google"] .solo-credenziali{display:none} .lg{min-height:100svh;display:flex;flex-direction:column} /* ---------------- testata ---------------- */ .lg-testa{ display:flex;align-items:center;justify-content:space-between;gap:18px; padding:16px clamp(20px,3.4vw,48px); border-bottom:1px solid var(--bordo);background:var(--bianco); } .lg-brand{display:flex;align-items:center;gap:12px} .lg-brand img{height:34px;width:auto} .lg-wordmark{ font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:.06em;color:var(--blu-900); } .lg-wordmark .ia{color:var(--oro-500)} .lg-prodotto{ padding-left:14px;margin-left:2px;border-left:1px solid var(--bordo); font-family:var(--serif);font-size:17px;color:var(--blu-600); } .lg-claim{ font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--blu-400);text-align:right;line-height:1.5; } /* ---------------- corpo a due colonne ---------------- */ .lg-corpo{flex:1;display:grid;grid-template-columns:minmax(400px,470px) 1px 1fr} .lg-filetto{background:var(--bordo)} /* ---------------- colonna dell'accesso ---------------- */ .lg-accesso{ background:var(--bianco); padding:clamp(30px,3.6vw,52px) clamp(24px,3vw,48px); display:flex;flex-direction:column;justify-content:center; } .lg-accesso .lg-int{width:100%;max-width:390px;margin:0 auto} .lg h1{ font-family:var(--serif);font-weight:700;color:var(--blu-900); font-size:clamp(25px,2.4vw,31px);line-height:1.15;letter-spacing:-.01em; max-width:none;margin:0 0 8px; } .lg-sub{color:var(--grigio);font-size:14.5px;line-height:1.6} /* avviso di modalità (oggi: accesso con account Google) */ .lg-avviso{ margin-top:22px;border-left:2px solid var(--oro-500);background:var(--oro-100); padding:12px 16px;font-size:13px;line-height:1.6;color:#4A3A12;border-radius:0 6px 6px 0; } .lg-avviso b{display:block;margin-bottom:3px;color:var(--oro-600)} /* schede accedi / crea l'account */ .lg-tab{display:flex;gap:26px;border-bottom:1px solid var(--bordo);margin:26px 0 22px} .lg-tab button{ background:none;border:none;padding:0 0 12px;font:inherit;font-size:12px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--grigio);cursor:pointer;position:relative; } .lg-tab button:hover{color:var(--blu-800)} .lg-tab button[aria-selected="true"]{color:var(--blu-900)} .lg-tab button[aria-selected="true"]::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--oro-500); } /* campi (stile editoriale: filetto, non riquadro) */ .campo{display:flex;flex-direction:column;gap:5px;margin-bottom:18px} .campo>span{ font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blu-400); } .campo input{ border:none;border-bottom:1px solid var(--bordo);border-radius:0;background:transparent; padding:9px 0;font:inherit;font-size:15.5px;color:var(--inchiostro);width:100%; transition:border-color .2s,box-shadow .2s; } .campo input::placeholder{color:#A9AFB7} .campo input:hover:not(:disabled){border-bottom-color:var(--blu-400)} .campo input:focus{outline:none;border-bottom-color:var(--blu-600);box-shadow:0 3px 0 -2px rgba(42,76,111,.35)} .campo input:disabled{color:#A9AFB7;border-bottom-style:dashed;cursor:not-allowed} .campo-pw{position:relative;display:flex;align-items:center} .campo-pw input{padding-right:78px} .mostra-pw{ position:absolute;right:0;border:none;background:none;font:inherit;font-size:10.5px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--blu-400);cursor:pointer;padding:6px 0; } .mostra-pw:hover{color:var(--blu-800)} .mostra-pw:disabled{opacity:.45;cursor:not-allowed} .campo-nota{font-size:12px;color:var(--grigio);margin-top:-8px;margin-bottom:18px;line-height:1.5} .riga-opzioni{ display:flex;align-items:center;justify-content:space-between;gap:14px; font-size:13.5px;color:var(--grigio);margin:4px 0 22px;flex-wrap:wrap; } .riga-opzioni label{display:flex;align-items:center;gap:8px;cursor:pointer} .riga-opzioni input[type=checkbox]{width:15px;height:15px;accent-color:var(--blu-800)} .riga-consenso{ display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--grigio); line-height:1.55;margin:2px 0 20px;cursor:pointer; } .riga-consenso input[type=checkbox]{width:15px;height:15px;accent-color:var(--blu-800);margin-top:2px;flex:none} /* bottoni */ .lg-btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%; padding:14px 20px;border:1px solid transparent;border-radius:4px; background:var(--blu-800);color:#fff;font:inherit;font-weight:700;font-size:13px; letter-spacing:.14em;text-transform:uppercase;cursor:pointer; transition:background .2s,transform .2s,border-color .2s,box-shadow .2s; } .lg-btn:hover{background:var(--blu-600);transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(16,42,67,.8)} .lg-btn:active{transform:none} .lg-btn:disabled{background:var(--blu-100);color:var(--blu-400);cursor:not-allowed;transform:none;box-shadow:none} .lg-btn-sso{background:var(--bianco);color:var(--inchiostro);border-color:var(--bordo);letter-spacing:.06em;text-transform:none;font-size:14.5px} .lg-btn-sso:hover{background:var(--bianco);border-color:var(--blu-800);color:var(--inchiostro)} .lg-btn-sso svg{width:18px;height:18px;flex:none} .lg-btn+.lg-btn{margin-top:10px} .oppure{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--grigio);font-size:12.5px} .oppure::before,.oppure::after{content:"";flex:1;height:1px;background:var(--bordo)} .lg-esito{ margin-top:16px;font-size:13px;line-height:1.6;padding:11px 14px;border-radius:6px; background:var(--blu-100);color:var(--blu-800);border-left:2px solid var(--blu-600); } .lg-esito[hidden]{display:none} .lg-esito-errore{background:#F9E8E6;color:#8E2B22;border-left-color:#B3362B} .lg-esito-ok{background:#E4F1EB;color:#1B5138;border-left-color:#23684A} /* attesa di rete: nessun doppio invio, e si vede che sta lavorando */ body.in-attesa .lg-btn,body.in-attesa .lg-btn-sso{opacity:.6;pointer-events:none} body.in-attesa .lg-int{cursor:progress} .lg-piede-col{margin-top:26px;font-size:13.5px;color:var(--grigio);text-align:center;line-height:1.6} .lg-piede-col a{font-weight:650} :focus-visible{outline:2px solid var(--blu-600);outline-offset:3px} /* ---------------- colonna del registro ---------------- */ .lg-registro{ position:relative;background:var(--carta);overflow:hidden; padding:clamp(30px,3.4vw,46px) clamp(24px,3.2vw,50px); display:flex;flex-direction:column; } .lg-registro::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(26,50,76,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(26,50,76,.035) 1px,transparent 1px); background-size:30px 30px; -webkit-mask-image:linear-gradient(to bottom,#000,transparent 82%); mask-image:linear-gradient(to bottom,#000,transparent 82%); } .reg-titolo{ position:relative;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--blu-400);margin-bottom:16px; } .reg-voci{position:relative} .righello{ position:absolute;left:0;right:0;top:0;height:1px;opacity:0;pointer-events:none; background:linear-gradient(90deg,var(--oro-500) 0%,rgba(208,173,83,.05) 88%); transition:opacity .25s; } .righello::before{ content:"";position:absolute;left:-4px;top:-2.5px;width:6px;height:6px;border-radius:50%;background:var(--oro-500); } .voce{ position:relative;border-top:1px solid var(--bordo);padding:18px 14px;margin:0 -14px; border-radius:6px;transition:opacity .5s,background .3s; } .voce:hover{background:rgba(208,173,83,.08)} .reg-voci.animato .voce{opacity:.42} .reg-voci.animato .voce.attiva{opacity:1} .voce-testa{display:flex;align-items:baseline;gap:14px} .voce-n{font-family:var(--serif);font-size:14px;color:var(--blu-400);font-variant-numeric:tabular-nums} .voce-tag{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--oro-600)} .voce-riga{display:block;width:44px;height:2px;background:var(--oro-500);margin-top:8px;transition:width .8s ease} .reg-voci.animato .voce .voce-riga{width:0} .reg-voci.animato .voce.attiva .voce-riga{width:44px} .voce-q{ font-family:var(--serif);font-size:clamp(16px,1.5vw,18.5px);line-height:1.4; color:var(--blu-900);margin-top:9px;min-height:1.4em; } .cursore{ display:inline-block;width:2px;height:.95em;background:var(--oro-600);vertical-align:baseline; margin-left:2px;animation:lampeggia 1s step-end infinite; } @keyframes lampeggia{0%,55%{opacity:1}56%,100%{opacity:0}} .voce-corpo{margin-top:10px} .reg-voci.animato .voce-corpo{animation:saleSu .5s ease-out both} @keyframes saleSu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .voce-a{font-size:14.5px;line-height:1.7;color:var(--grigio);max-width:66ch} .voce-fonte{ margin-top:10px;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700; letter-spacing:.04em;color:var(--blu-600);background:var(--blu-100);padding:5px 11px;border-radius:6px; } .voce-fonte svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2} .reg-nota{ position:relative;margin-top:auto;padding-top:22px;font-size:12.5px;line-height:1.65; color:var(--blu-400);max-width:62ch; } /* ---------------- scelta della verticale (/accedi/) ---------------- */ .lg-scelta{ flex:1;display:flex;flex-direction:column;justify-content:center; max-width:960px;width:100%;margin:0 auto;padding:clamp(40px,6vw,84px) 24px; } .lg-scelta .lg-sub{max-width:62ch;margin-top:10px} .scelte{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px} .scelta{ position:relative;display:flex;flex-direction:column;background:var(--bianco); border:1px solid var(--bordo);border-radius:var(--r-lg);padding:38px 32px 30px; box-shadow:var(--ombra);transition:transform .3s,box-shadow .3s,border-color .3s; } .scelta:hover{transform:translateY(-4px);box-shadow:var(--ombra-alta);border-color:var(--oro-500)} .scelta-tag{ position:absolute;top:20px;right:26px;font-size:10.5px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;padding:5px 12px;border-radius:999px;background:var(--oro-100);color:var(--oro-600); } .scelta h2{font-family:var(--serif);font-size:27px;color:var(--blu-900);margin-bottom:10px;max-width:none} .scelta p{color:var(--grigio);font-size:15px;line-height:1.7} .scelta-link{ margin-top:22px;display:inline-flex;align-items:center;gap:9px;color:var(--blu-800); font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase; } .scelta:hover .freccia{transform:translateX(4px)} .scelta-nota{margin-top:30px;font-size:14px;color:var(--grigio);line-height:1.7} @media (max-width:760px){ .scelte{grid-template-columns:1fr} } /* ---------------- piede ---------------- */ .lg-piede{ border-top:1px solid var(--bordo);background:var(--bianco); padding:16px clamp(20px,3.4vw,48px); display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; font-size:12.5px;color:var(--grigio); } .lg-piede nav{display:flex;gap:22px;flex-wrap:wrap} /* ---------------- responsive ---------------- */ @media (max-width:980px){ .lg-corpo{grid-template-columns:1fr} .lg-filetto{height:1px;width:auto} .lg-accesso{padding:38px 24px 30px} .lg-registro{padding:34px 24px 40px} .righello{display:none} .lg-claim{max-width:170px} } @media (max-width:520px){ .lg-testa{padding:14px 18px} .lg-claim{font-size:10px;letter-spacing:.14em} .lg-accesso .lg-int{max-width:none} .lg-tab{gap:18px} .lg-piede{flex-direction:column;align-items:flex-start;gap:10px} } @media (prefers-reduced-motion:reduce){ .cursore{animation:none} .reg-voci.animato .voce-corpo{animation:none} .voce,.voce-riga,.lg-btn{transition:none!important} } /* v0.4.0 (AX-CAS-001) — la via nella stessa scheda. Non e' un'alternativa permanente: compare solo quando il popup non ha funzionato, e allora dev'essere l'azione piu' evidente della pagina. */ .lg-btn-redirect{margin-top:12px;width:100%} .lg-esito .lg-btn-redirect{display:block}