/* ================================================================================================== Tema "Fdo" per la pagina "Accedi o registrati" (utente/registrazione.htm). Ri-skinna il markup esistente SENZA toccarne struttura, id, name e hook JS (UtenteAccedi/UtenteRecuperaPassword/RegistraUtente, Google OAuth, grecaptcha). Regole scoped sotto .FdoPage (aggiunta al ). Caricare DOPO utente_registrazione.css. ⚠️ SPECIFICITÀ: la CSS legacy usa selettori tipo ".Container .Columns .LeftColumn" (0,3,0). Per vincere (soprattutto sui float/larghezze delle colonne) i selettori qui ripetono la catena ".FdoPage .Container .Columns …" così da avere specificità sempre maggiore. Serve anche a battere le regole globali ".FdoPage p{margin:0}" / ".FdoPage h1-h6{margin:0}". ================================================================================================== */ /* Azzera il padding-top del BODY della CSS legacy (6-8rem, spazio per la vecchia header fissa): col nuovo header Fdo in flusso in alto crea uno spazio vuoto sopra l'header. body.FdoPage (0,1,1) batte "BODY" (0,0,1). */ body.FdoPage { padding-top: 0; } /* Contenitore centrato (sfondo blu dal body.FdoPage) */ .FdoPage .Container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: var(--space-7) var(--space-4); background: transparent; } @media (min-width: 1025px) { .FdoPage .Container { padding: var(--space-9) var(--space-6); } } .FdoPage .Container .PageTitle { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: clamp(32px, 6vw, var(--text-h2-size)); line-height: 1.14; font-weight: var(--text-h2-weight); text-align: center; color: #d89958; background: var(--gradient-heading); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .1em; } /* Due colonne (griglia, azzera i float legacy) */ .FdoPage .Container .Columns { display: grid; grid-template-columns: 1fr; gap: var(--space-5); width: 100%; align-items: start; } @media (min-width: 1025px) { .FdoPage .Container .Columns { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--space-6); } } .FdoPage .Container .Columns .LeftColumn, .FdoPage .Container .Columns .RightColumn { float: none; width: auto; min-width: 0; margin: 0; border: none; padding: 0; } /* Card: GoogleBox, i due .Box di sinistra, e il form di registrazione */ .FdoPage .Container .Columns .GoogleBox, .FdoPage .Container .Columns .LeftColumn .Box, .FdoPage .Container .Columns .RightColumn > form { box-sizing: border-box; width: 100%; margin: 0; padding: var(--space-6); border: 1px solid #ffffff26; border-radius: var(--radius); background-color: #ffffff0f; } .FdoPage .Container .Columns .GoogleBox { margin-bottom: var(--space-5); } .FdoPage .Container .Columns .LeftColumn .Box + .Box { margin-top: var(--space-5); } /* Titoli card */ .FdoPage .Container .Columns .LeftColumn .Box h2, .FdoPage .Container .Columns .RightColumn .DatiRegistrazione h2 { margin: 0 0 calc(var(--space-2) + 1rem); font-family: var(--font-display); font-size: var(--text-h3-size); line-height: var(--text-h3-line); font-weight: 400; color: var(--color-h3); } .FdoPage .Container .Columns .LeftColumn .Box p { margin: 0 0 var(--space-4); color: var(--color-body); opacity: .85; } .FdoPage .Container .Columns .RightColumn .DatiRegistrazione.Newsletter h2 { margin: 2rem 0 1.5rem; } /* Google — pulsante bianco + nota sotto */ .FdoPage .Container .Columns .GoogleBox .GoogleButton { display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; box-sizing: border-box; height: 52px; padding: 0 var(--space-4); border: 1px solid #ffffff40; border-radius: var(--radius); background-color: #ffffff; color: #1f1f1f; font-weight: 600; text-decoration: none; } .FdoPage .Container .Columns .GoogleBox .GoogleButton:hover { background-color: #f4f4f4; } .FdoPage .Container .Columns .GoogleBox .GoogleLabel { font-weight: 600; } .FdoPage .Container .Columns .GoogleBox .GooglePrivacy { margin: calc((var(--space-5) + 0.8rem) / 2) 0 0; font-size: var(--text-caption-size); line-height: 1.25; color: var(--color-body); opacity: .7; text-align: left; } .FdoPage .Container .Columns .GoogleBox .GooglePrivacy a { color: var(--color-h3); } .FdoPage .Container .Columns .GoogleBox .GoogleErrore { margin: 0 0 var(--space-3); color: #ff8fa3; font-size: var(--text-caption-size); } /* Campi (label che avvolge l'input → testo sopra, input sotto) */ .FdoPage .Container .Columns .LeftColumn .Box label, .FdoPage .Container .Columns .RightColumn .DatiRegistrazione .Row label { display: flex; flex-direction: column; gap: 6px; color: var(--color-body); font-weight: 600; font-size: var(--text-body-size); } .FdoPage .Container .Columns .LeftColumn .Box label { margin-bottom: var(--space-4); } .FdoPage .Container .Columns .LeftColumn .Box label input, .FdoPage .Container .Columns .RightColumn .DatiRegistrazione .Row label input, .FdoPage .Container .Columns .RightColumn .DatiRegistrazione .Row label select { height: 46px; box-sizing: border-box; padding: 0 var(--space-3); border: 1px solid #ffffff40; border-radius: var(--radius); background-color: #ffffff; color: #052e5a; font-size: var(--text-body-size); font-weight: 400; } .FdoPage .Container .Columns .LeftColumn .Box label input::placeholder, .FdoPage .Container .Columns .RightColumn .DatiRegistrazione .Row label input::placeholder { color: #7a869a; } /* Campi (email/nome/cognome) UNO per riga → colonna singola a tutta larghezza (niente 2 colonne). */ .FdoPage .Container .Columns .RightColumn .DatiRegistrazione .Row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: 0; } .FdoPage .Container .Columns .RightColumn .DatiRegistrazione .Row + .Row { margin-top: var(--space-4); } /* Nota registrazione: sotto il campo Cognome, prima di "Privacy e newsletter". */ .FdoPage .Container .Columns .RightColumn .NotaRegistrazione { margin: var(--space-2) 0 0; color: var(--color-body); opacity: .7; font-size: var(--text-caption-size); line-height: 1.4; } .FdoPage .Container .Columns .RightColumn .DateSelector { display: flex; gap: var(--space-2); } .FdoPage .Container .Columns .RightColumn .DateSelector select { flex: 1; min-width: 0; } /* Checkbox privacy/newsletter: checkbox in posizione assoluta → il testo (col link) resta inline */ .FdoPage .Container .Columns .RightColumn .Newsletter label { position: relative; display: block; margin: 0 0 var(--space-3); padding-left: 30px; color: var(--color-body); font-size: var(--text-body-size); line-height: 1.5; } .FdoPage .Container .Columns .RightColumn .Newsletter label input[type="checkbox"] { position: absolute; left: 0; top: 4px; width: 18px; height: 18px; margin: 0; accent-color: var(--color-h3); } .FdoPage .Container .Columns .RightColumn .Newsletter label a { color: var(--color-h3); } /* Pulsanti login / recupero password (rosa, larghezza piena) */ .FdoPage .Container .Columns .LeftColumn .Box button { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin: var(--space-5) 0 0; padding: 0 var(--space-5); border: none; border-radius: var(--radius); background-color: var(--color-button-secondary-bg); color: var(--color-button-secondary-text); font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; cursor: pointer; } .FdoPage .Container .Columns .LeftColumn .Box button:hover { background-color: var(--color-button-secondary-bg-hover); } /* Captcha (widget esterno, non stilizzato) + pulsante "Procedi con la registrazione" inline */ .FdoPage .Container .Columns .RightColumn .ButtonsBlock { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: 2rem; } .FdoPage .Container .Columns .RightColumn .ButtonsBlock .captchaCont { flex: 0 0 auto; } .FdoPage .Container .Columns .RightColumn .ButtonsBlock .proceedButton { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 260px; min-height: 78px; margin: 0; padding: 0 var(--space-5); border-radius: var(--radius); background-color: var(--color-button-primary-bg); color: var(--color-button-primary-text); font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; text-align: center; cursor: pointer; } .FdoPage .Container .Columns .RightColumn .ButtonsBlock .proceedButton:hover { filter: brightness(1.08); } @media (max-width: 640px) { .FdoPage .Container .Columns .RightColumn .ButtonsBlock .proceedButton { flex: 1 0 100%; } } /* Nota di servizio a fianco del campo email (cosa arriva per email, password generata) */ .FdoPage .Container .Columns .RightColumn .DatiRegistrazione .Row p.NotaRegistrazione { align-self: center; margin: 0; font-size: var(--text-caption-size); line-height: 1.35; color: var(--color-body); opacity: .7; }