/* Pagina pubblica multi-tenant — stile ricalcato sul prototipo YogaMilan (docs/reference/). Colori e logo arrivano dal branding del tenant e vengono iniettati come custom property da app.js: qui ci sono solo i fallback. */ :root { /* La pagina è disegnata su fondo chiaro e riprende il branding della palestra: senza questa riga, con il sistema in dark mode il browser disegna checkbox, radio e tendine dei select con la palette scura, su una card chiara. */ color-scheme: light; --color-background: #fff; /* sfondo della pagina */ /* Testo che sta direttamente sullo sfondo (nome della palestra, messaggi di caricamento). Viene ricalcolato da app.js in base alla luminosità dello sfondo scelto: su un fondo scuro un testo scuro sarebbe illeggibile. */ --color-on-background: #5c6b73; /* Colori di riserva NEUTRI: erano quelli di YogaMilan (il primo tenant), e comparivano per un attimo su qualunque palestra prima che app.js applicasse i suoi. Ora in quell'attimo la pagina è coperta dal loader qui sotto; questi valori si vedono solo se il branding non arriva affatto. */ --color-primary: #e3e8eb; /* card e header */ --color-accent: #3d4f5c; /* bottoni */ --color-accent-hover: #2c3a44; /* Ricavato dall'accent del tenant, cosi' l'hover segue il branding senza configurarlo. */ --color-accent-hover: color-mix(in srgb, var(--color-accent) 85%, #000); --color-ink: #1f2933; --color-muted: #5c6b73; --color-field: #e8ecef; --color-white: #fff; --color-link: #1a5fd0; --color-error: #b3261e; --radius: 10px; --card-max: 1120px; --font: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font); color: var(--color-ink); background: var(--color-background); display: flex; flex-direction: column; min-height: 100vh; font-size: 16px; line-height: 1.5; } /* --- attesa del branding ---------------------------------------------------- Finché app.js non ha applicato colori e logo della palestra (e aggiunto `.is-branded` a ), il contenuto resta nascosto e al suo posto gira un loader neutro: niente più pagina "di un'altra palestra" per un istante. Non si può fare con uno script in testa alla pagina perché la CSP vieta gli script inline (B8). Scadenza di sicurezza: se per qualunque motivo app.js non arriva (rete, errore), dopo 4 secondi il contenuto compare comunque, con i colori neutri di riserva. */ html:not(.is-branded) body > * { visibility: hidden; animation: brand-reveal 0s linear 4s forwards; } html:not(.is-branded) body::before { content: ""; position: fixed; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 3px solid #d5dce0; border-top-color: #7a8a94; animation: brand-spin 0.8s linear infinite, brand-hide 0s linear 4s forwards; } @media (prefers-reduced-motion: reduce) { html:not(.is-branded) body::before { animation: brand-hide 0s linear 4s forwards; } } @keyframes brand-reveal { to { visibility: visible; } } @keyframes brand-spin { to { transform: rotate(360deg); } } @keyframes brand-hide { to { visibility: hidden; } } /* --- header ------------------------------------------------------------- */ .site-header { background: var(--color-primary); padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 1.75rem; } .site-header__logo { height: 28px; width: auto; } .site-header__nav { display: flex; gap: 1.5rem; } .site-header__nav a { color: var(--color-ink); text-decoration: none; font-size: 1.05rem; } .site-header__nav a[aria-current="page"] { font-weight: 700; } /* --- corpo -------------------------------------------------------------- */ main { flex: 1; padding: 2.5rem 1.5rem 3.5rem; } .brand { text-align: center; margin-bottom: 2.5rem; } .brand__logo { max-width: 260px; max-height: 150px; width: auto; height: auto; } .brand__name { font-size: 2.5rem; letter-spacing: 0.12em; font-weight: 300; margin: 0; color: var(--color-on-background); } .card { background: var(--color-primary); border-radius: var(--radius); padding: 2rem; max-width: var(--card-max); margin: 0 auto; } .card--narrow { max-width: 560px; } .card__title { text-align: center; font-size: 2rem; margin: 0 0 1.75rem; font-weight: 700; } .card__title--sm { font-size: 1.6rem; } /* --- form --------------------------------------------------------------- */ .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; } .field--full { grid-column: 1 / -1; } .field__label { display: block; margin-bottom: 0.4rem; } .field__label--strong { font-weight: 700; } .required-mark { color: var(--color-error); margin-left: 0.15rem; } input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="tel"], select, textarea { width: 100%; border: none; border-radius: var(--radius); background: var(--color-field); padding: 0.85rem 1rem; font: inherit; color: var(--color-ink); } input:disabled, select:disabled { color: var(--color-muted); cursor: not-allowed; } input:focus-visible, select:focus-visible, button:focus-visible, textarea:focus-visible, a:focus-visible, [type="checkbox"]:focus-visible, [type="radio"]:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; } .field__error { color: var(--color-error); font-size: 0.9rem; margin-top: 0.3rem; font-weight: 700; } /* radio Sì/No */ .consent { grid-column: 1 / -1; margin-top: 0.75rem; } .consent__legend { font-weight: 700; text-transform: uppercase; padding: 0; margin-bottom: 0.5rem; } .consent__options { display: flex; gap: 2rem; } .consent__option { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .consent__option input { width: 1.15rem; height: 1.15rem; margin: 0; cursor: pointer; /* Selezione nel colore della palestra, invece del blu di default del browser. */ accent-color: var(--color-accent); } /* informative con testo scrollabile */ .document { grid-column: 1 / -1; margin-top: 1.5rem; } .document__title { font-weight: 700; margin: 0 0 0.6rem; } .document__body { background: var(--color-white); border-radius: var(--radius); padding: 1rem 1.25rem; max-height: 260px; overflow-y: auto; white-space: pre-wrap; } .document__accept { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 0.6rem; font-weight: 700; color: var(--color-muted); cursor: pointer; } .document__accept input { width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; flex: none; cursor: pointer; accent-color: var(--color-accent); } .document__accept--checked { color: var(--color-ink); } .form-note { font-weight: 700; margin: 1.75rem 0 1rem; } /* --- bottoni ------------------------------------------------------------ */ .btn { display: block; width: 100%; border: none; border-radius: var(--radius); background: var(--color-accent); color: var(--color-white); font: inherit; font-size: 1.05rem; padding: 0.9rem 1.25rem; cursor: pointer; text-align: center; text-decoration: none; } .btn:hover:not(:disabled) { background: var(--color-accent-hover); } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .link { display: block; text-align: center; margin-top: 1rem; color: var(--color-link); font-size: 1.05rem; } /* --- messaggi ----------------------------------------------------------- */ .alert { border-radius: var(--radius); padding: 0.9rem 1.15rem; margin-bottom: 1.25rem; background: var(--color-white); border-left: 5px solid var(--color-accent); } .alert--error { border-left-color: var(--color-error); color: var(--color-error); font-weight: 700; } .alert[hidden] { display: none; } /* --- scelta iscritto ---------------------------------------------------- */ .choice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; } .choice { width: 100%; background: var(--color-white); border: none; border-radius: var(--radius); padding: 1rem 1.25rem; font: inherit; text-align: left; cursor: pointer; } .choice:hover { background: #f1f5f4; } .choice__name { font-weight: 700; font-size: 1.1rem; } .choice__meta { color: var(--color-muted); font-size: 0.95rem; } /* --- footer ------------------------------------------------------------- */ .site-footer { background: #000; color: var(--color-white); text-align: center; padding: 1.25rem 1.5rem; } .site-footer a { color: #6fa8ff; } /* --- stati -------------------------------------------------------------- */ [hidden] { display: none !important; } .loading { text-align: center; color: var(--color-muted); padding: 2rem 0; } /* --- mobile ------------------------------------------------------------- */ @media (max-width: 720px) { .field-grid { grid-template-columns: 1fr; } main { padding: 1.5rem 1rem 2.5rem; } .card { padding: 1.25rem; } .card__title { font-size: 1.5rem; } .brand__name { font-size: 1.75rem; } .site-header { padding: 0.75rem 1rem; gap: 1rem; } } /* Banner di anteprima: chiarisce che non è il sito vero, in cima a ogni pagina del percorso mostrato nel backoffice. */ .preview-note { margin: 0; padding: 0.4rem 1rem; background: #1f2933; color: #fff; font-size: 0.85rem; text-align: center; letter-spacing: 0.02em; }