/* ========================================================================== Pagine di autenticazione — accesso, registrazione, recupero password, invito. Tema allineato al sito di presentazione (consergio.vercel.app): avorio caldo, pannello inchiostro, accenti ottone, titoli serif Newsreader. Tutto è scoped sotto `.auth-page` (la classe del del layout `auth`), esattamente come i guest_template_*.css: il pannello struttura e l'app ospite restano sul tema StayBell e questo file non li tocca. Per lo stesso motivo i token stanno qui e NON in un quarto blocco `:root` di application.css. Le viste continuano a usare il vocabolario `form__*` / `btn--*` di application.css: qui se ne riscrive solo l'aspetto, con selettori a specificità 0,2,0 che battono le regole StayBell (0,1,0) senza !important. ========================================================================== */ .auth-page { /* Palette del sito, nomi originali */ --au-avorio: #FAF8F4; --au-avorio-2: #F2EEE7; --au-inchiostro: #14133A; --au-inchiostro-soft: #5A5C7A; --au-ottone: #B08D57; --au-ottone-soft: #D6A359; --au-ottone-scuro: #8A6530; --au-linea: #E6E1D8; --au-arancio: #F28C00; /* CTA: il sito usa bianco su #F28C00, che è 2.46:1 e non passa AA. Si riempie con #B85E00 (4.53:1, l'unico passo caldo che regge il testo bianco — vedi --sb-accent-strong) e si schiarisce all'arancio pieno sull'hover. */ --au-cta: #B85E00; --au-danger: #C62828; --au-danger-bg: #FDECEC; --au-danger-line: #F3C9C9; --au-ok-bg: #EDF6EE; --au-ok-fg: #147045; /* Il padding orizzontale dell'aside è una variabile perché la foto deve annullarlo per andare a filo del bordo (vedi .auth__foto). */ --au-aside-pad-x: clamp(1.25rem, 4vw, 3.5rem); --au-r-card: 10px; --au-r-field: 8px; --au-display: 'Newsreader', Georgia, 'Times New Roman', serif; --au-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Arial, sans-serif; } body.auth-page { margin: 0; background: var(--au-avorio); color: var(--au-inchiostro); font-family: var(--au-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; } .auth-page :focus-visible { outline: 2px solid var(--au-ottone); outline-offset: 3px; } /* --- Impianto a due colonne ------------------------------------------------ */ .auth { display: grid; grid-template-columns: 1fr; min-height: 100vh; } /* --- Colonna sinistra: pannello di marca ---------------------------------- */ .auth__aside { position: relative; overflow: hidden; background: var(--au-inchiostro); color: rgba(255, 255, 255, 0.72); padding: clamp(1.5rem, 5vw, 3.5rem) var(--au-aside-pad-x); display: flex; flex-direction: column; gap: 1.5rem; } /* Velatura ottone del sito: alone caldo in alto a destra, decorativo. */ .auth__aside::before { content: ""; position: absolute; top: -30%; right: -18%; width: min(680px, 90%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(176, 141, 87, 0.20), rgba(176, 141, 87, 0) 68%); pointer-events: none; } .auth__aside > * { position: relative; } .auth__logo { display: block; width: 200px; max-width: 60%; height: auto; } .auth__claim { margin: 0; font-family: var(--au-display); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--au-avorio); text-wrap: balance; } .auth__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } .auth__points li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.95rem; color: rgba(255, 255, 255, 0.78); } .auth__points svg { flex: 0 0 auto; margin-top: 2px; color: var(--au-ottone-soft); } .auth__note { margin: 0; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); } /* Foto dell'hero del sito, stesso ritaglio ad arco (clipPath #auth-arco, reso inline dal partial). Va a filo del bordo destro del pannello — annullando il padding — perché è così che è ancorata nel sito: il taglio deve mordere verso il testo, non galleggiare in mezzo. `margin-top: auto` la spinge in fondo e si prende lo spazio che il testo non usa. */ .auth__foto { position: relative; margin-top: auto; margin-right: calc(-1 * var(--au-aside-pad-x)); aspect-ratio: 16 / 10; max-height: 40vh; clip-path: url(#auth-arco); } /* La sorgente è quadrata e il riquadro è panoramico: `cover` taglia sopra e sotto. Spostando il fuoco più in basso il campanello — il soggetto — sale nel riquadro e resta dentro la curva, invece di essere tranciato dal bordo. */ .auth__foto img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 62%; } /* Velo inchiostro come nel sito: lega la foto al fondo scuro del pannello. */ .auth__foto::after { content: ""; position: absolute; inset: 0; background: rgba(20, 19, 58, 0.10); pointer-events: none; } /* --- Colonna destra: il form ---------------------------------------------- */ .auth__main { display: flex; padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2.5rem); /* Container NOMINATO: .form__cards-col ne dichiara già uno anonimo, e la regola anonima di application.css che impila le .form__grid strette si risolve su quello. Col nome le due query non si intercettano. Sta qui e non sul pannello: il pannello non può interrogare la propria larghezza per deciderla: la misura utile è lo spazio disponibile. */ container-type: inline-size; container-name: auth-col; } /* `margin: auto` e non `align-items: center`: centra il pannello quando ci sta, ma sui form lunghi (registrazione) non ne taglia la testa fuori dallo scroll. */ .auth__panel { width: 100%; max-width: 30rem; margin: auto; background: #fff; border: 1px solid var(--au-linea); border-radius: var(--au-r-card); padding: clamp(1.7rem, 3vw, 2.5rem); } /* A colonna singola resta stretto: un campo di testo largo 670px si legge male. Cresce solo quando le due colonne stanno davvero dentro (vedi sotto). */ .auth__panel--wide { max-width: 42rem; } /* --- Form a due colonne (registrazione) ----------------------------------- */ /* .form__cards passa a due colonne a 1100px di VIEWPORT, ma qui la colonna del form è molto più stretta della finestra: a 1280px si otterrebbero due colonne da 288px. La soglia va letta dallo spazio disponibile, non dalla finestra. */ .auth-page .form__cards { grid-template-columns: 1fr; } @container auth-col (min-width: 51rem) { /* Sopra i ~1050px di contenuto le colonne superano i 520px e le coppie di campi restano affiancate (ci pensa la @container di application.css). */ .auth__panel--wide { max-width: 72rem; } .auth-page .form__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } /* Il pannello a due colonne è largo oltre 1100px: una CTA a tutta larghezza smetterebbe di leggersi come un bottone. */ .auth-page .form__actions { max-width: 26rem; margin-inline: auto; } } /* application.css azzera il margine delle sole .panel__section: qui le card sono .form__section, e l'ultima di ogni colonna si porterebbe dietro il proprio margine sommato al gap della griglia. */ .auth-page .form__cards-col > .form__section { margin: 0; } /* --- Sezione facoltativa richiudibile ------------------------------------- */ .auth-page .form__sep { border-top-color: var(--au-linea); } .auth-page .form__collapse-summary { color: var(--au-inchiostro-soft); } .auth-page .form__collapse-summary:hover { color: var(--au-ottone-scuro); } .auth-page .signup__title { margin: 0.35rem 0 0.6rem; font-family: var(--au-display); font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.4rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--au-inchiostro); text-wrap: balance; } .auth-page .signup__subtitle { margin: 0 0 1.8rem; color: var(--au-inchiostro-soft); font-size: 1rem; line-height: 1.6; } .auth__eyebrow { display: inline-flex; align-items: center; margin: 0; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--au-ottone-scuro); } .auth__aside .auth__eyebrow { color: var(--au-ottone-soft); } /* Rimando all'altra strada (accesso <-> registrazione), staccato dal form. */ .auth-page .signup__alt { margin: 1.5rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--au-linea); font-size: 0.9rem; color: var(--au-inchiostro-soft); } /* --- Campi ---------------------------------------------------------------- */ .auth-page .form__input { width: 100%; padding: 0.82rem 1rem; border: 1px solid var(--au-linea); border-radius: var(--au-r-field); background: var(--au-avorio); color: var(--au-inchiostro); font-family: var(--au-sans); font-size: 0.96rem; box-shadow: none; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .auth-page .form__input:focus { outline: none; border-color: var(--au-ottone); background: #fff; box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.14); } .auth-page .form__input::placeholder { color: var(--au-inchiostro-soft); opacity: 0.7; } .auth-page .form__label { display: block; margin: 0 0 0.4rem; font-size: 0.86rem; font-weight: 600; color: var(--au-inchiostro); } .auth-page .form__hint { margin: 0.4rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--au-inchiostro-soft); } .auth-page .form__row { margin: 0 0 1.2rem; } .auth-page .form__row:last-child { margin-bottom: 0; } /* Il gap verticale lo dà già il margine della riga: senza azzerare il row-gap le coppie affiancate, una volta impilate sul mobile, si distanziano il doppio. */ .auth-page .form__grid { gap: 0 1rem; } .auth-page .form__row--check { display: flex; align-items: flex-start; gap: 0.6rem; } .auth-page .form__row--check .form__label { margin: 0; font-weight: 400; font-size: 0.9rem; } .auth-page input[type="checkbox"] { accent-color: var(--au-ottone-scuro); width: 1rem; height: 1rem; margin-top: 0.2rem; } .auth-page .form__section { border: 1px solid var(--au-linea); border-radius: var(--au-r-card); background: var(--au-avorio); padding: 1.4rem 1.3rem; margin: 0 0 1.4rem; } .auth-page .form__legend { padding: 0 0.5rem; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--au-ottone-scuro); } .auth-page .form__errors { margin: 0 0 1.4rem; padding: 1rem 1.1rem; border: 1px solid var(--au-danger-line); border-radius: var(--au-r-card); background: var(--au-danger-bg); color: var(--au-danger); font-size: 0.92rem; } .auth-page .form__errors-title { margin: 0 0 0.5rem; font-weight: 600; } .auth-page .form__errors ul { margin: 0; padding-left: 1.1rem; } /* --- Azioni --------------------------------------------------------------- */ /* Colonna e non riga: il pannello è stretto, e la CTA a tutta larghezza è quella del sito (il submit del modulo contatti è `w-full`). */ .auth-page .form__actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.9rem; margin-top: 1.6rem; } /* La regola M3 di application.css (`height: 40px; padding: 0 22px`) non è mai annullata da StayBell: qui va riscritta, o il bottone resta basso e stretto. */ .auth-page .btn { height: auto; padding: 0.95rem 1.7rem; border: 1px solid transparent; border-radius: var(--au-r-field); font-family: var(--au-sans); font-size: 0.95rem; font-weight: 500; letter-spacing: 0; box-shadow: none; transition: background 0.18s, border-color 0.18s, color 0.18s; } .auth-page .btn--primary { background: var(--au-cta); color: #fff; } .auth-page .btn--primary:hover { background: var(--au-arancio); filter: none; } .auth-page .btn--ghost { background: transparent; border-color: var(--au-linea); color: var(--au-inchiostro); } .auth-page .btn--ghost:hover { background: transparent; border-color: var(--au-ottone); } .auth-page .form__link { align-self: center; color: var(--au-inchiostro); border-bottom: 1px solid var(--au-ottone); padding-bottom: 2px; font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: color 0.18s, border-color 0.18s; } .auth-page .form__link:hover { color: var(--au-ottone-scuro); border-color: var(--au-ottone-scuro); } /* Link dentro il testo del form — i documenti legali della registrazione e l'informativa dell'invito. Senza questa regola restano sul blu di default del browser, l'unico colore fuori palette che resterebbe in pagina. */ .auth-page .auth__panel a:not(.btn):not(.form__link) { color: var(--au-ottone-scuro); text-decoration: underline; text-underline-offset: 2px; } .auth-page .auth__panel a:not(.btn):not(.form__link):hover { color: var(--au-inchiostro); } /* --- Flash ---------------------------------------------------------------- */ /* Nel layout `auth` i flash stanno dentro la colonna del form, non a tutta pagina come nel layout `application`: qui perdono la fascia e diventano note. */ .auth-page .flash { margin: 0 0 1.4rem; padding: 0.9rem 1.1rem; border-radius: var(--au-r-card); border: 1px solid transparent; text-align: left; font-size: 0.92rem; font-weight: 500; } .auth-page .flash--notice { background: var(--au-ok-bg); border-color: #CFE6D6; color: var(--au-ok-fg); } .auth-page .flash--alert { background: var(--au-danger-bg); border-color: var(--au-danger-line); color: var(--au-danger); } /* --- Desktop -------------------------------------------------------------- */ @media (min-width: 1000px) { /* Il tetto evita che su monitor molto larghi il pannello prenda oltre 1000px per poche righe di testo, togliendoli alla colonna del form. */ .auth { grid-template-columns: minmax(400px, min(42%, 40rem)) 1fr; } /* `align-self: start` + altezza piena: l'area di griglia cresce con la colonna destra (la registrazione è lunga), il pannello resta fermo mentre si scorre. */ .auth__aside { position: sticky; top: 0; align-self: start; height: 100vh; gap: 2rem; } .auth__logo { width: 236px; } .auth__claim { margin-top: 0.5rem; } } /* Sotto il breakpoint il pannello è una fascia compatta: logo e claim bastano a dare la marca, l'elenco dei punti ruberebbe solo la prima schermata al form. */ @media (max-width: 999px) { .auth__points, .auth__note, .auth__foto { display: none; } .auth__claim { font-size: 1.35rem; } .auth__aside { gap: 1rem; } } /* Schermi bassi (portatili 13", finestre affiancate): fra la foto e il form vince il form. Il pannello resta con logo, claim e punti. */ @media (min-width: 1000px) and (max-height: 760px) { .auth__foto { display: none; } .auth__note { margin-top: auto; } }