/* ===================================================================================== Curriculum Facile — editor ===================================================================================== Impianto a due riquadri su desktop (modulo a sinistra, anteprima a destra) che su schermo piccolo diventa a schermata singola con un pulsante per passare all'anteprima. La scelta non è estetica: molte persone compilano il curriculum dal telefono, e su uno schermo da 5 pollici affiancare due colonne significa renderle entrambe inutilizzabili. ===================================================================================== */ /* * La pagina dell'editor non deve poter scorrere: scorre solo il modulo, al suo * interno. Il vincolo va messo anche su , non solo su , e la ragione * merita di essere scritta perché è tutt'altro che ovvia. * * Quando dichiara overflow:hidden e no, quel valore non resta sul * body: le regole CSS lo trasferiscono alla finestra, e il body torna di fatto a * overflow:visible. La finestra così non mostra la barra di scorrimento — sembra * tutto a posto — ma continua a essere scorribile *da programma*. È bastato uno * scrollIntoView su un campo per spostare l'intera interfaccia fuori dallo schermo, * con l'utente davanti a una pagina grigia e nessuna barra per tornare indietro. * * Dichiarandolo su entrambi, la finestra usa il valore di e il body clippa * il proprio contenuto: non c'è più nulla da scorrere, e nessuna chiamata futura * potrà spostare l'interfaccia. * * Questo foglio è caricato soltanto dall'editor, quindi la regola su non * tocca il resto del sito. */ html { height: 100%; overflow: hidden; } .editor-body { height: 100vh; height: 100dvh; /* tiene conto delle barre del browser mobile */ overflow: hidden; background: var(--grigio-100); } .editor { display: grid; grid-template-rows: auto 1fr; height: 100%; } /* ---------------------------------------------------------------- Barra superiore -- */ .editor-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); /* La barra è appena più scura della carta: nell'editor il bianco è riservato al foglio del curriculum, che deve restare l'unica superficie luminosa. */ background: #eaeaeb; border-bottom: 1px solid var(--bordo); min-height: 60px; } .editor-barra__sinistra, .editor-barra__destra { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } .editor-titolo { font-family: var(--font-titoli); font-weight: var(--peso-titoli); font-size: 17px; letter-spacing: 0.02em; border: 1px solid transparent; border-radius: 0; padding: var(--sp-1) var(--sp-2); background: transparent; max-width: 260px; text-overflow: ellipsis; } .editor-titolo:hover { border-color: var(--bordo); } .editor-titolo:focus { border-color: var(--blu-500); background: var(--superficie); outline: none; box-shadow: 0 0 0 3px var(--blu-100); } /* Indicatore di salvataggio */ /* Nel sistema i dati di servizio — nome del file, ora del salvataggio, conteggi — sono monospaziati: si distinguono dal testo redazionale a colpo d'occhio. */ .stato-salvataggio { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--testo-xs); color: var(--testo-tenue); white-space: nowrap; min-width: 132px; } .stato-salvataggio__punto { width: 7px; height: 7px; border-radius: 0; background: var(--grigio-300); flex-shrink: 0; } .stato-salvataggio.is-saving .stato-salvataggio__punto { background: var(--ambra-500); animation: pulsa 1.1s ease-in-out infinite; } .stato-salvataggio.is-saved .stato-salvataggio__punto { background: var(--verde-500); } .stato-salvataggio.is-error { color: var(--rosso-600); font-weight: 600; } .stato-salvataggio.is-error .stato-salvataggio__punto { background: var(--rosso-500); } @keyframes pulsa { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ----------------------------------------------------------------- Corpo a due -- */ .editor-corpo { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(480px, 1.1fr); overflow: hidden; min-height: 0; } /* Finestre di media larghezza — un portatile piccolo, o un browser aperto a metà schermo — devono conservare l'anteprima accanto al modulo. È la promessa del prodotto: quello che vedi è quello che scarichi. Le due colonne si stringono, e l'anteprima si rimpicciolisce da sola perché è già in scala. */ @media (max-width: 1180px) { .editor-corpo { grid-template-columns: minmax(320px, 1fr) minmax(300px, 0.95fr); } .editor-modulo { padding-left: var(--sp-4); padding-right: var(--sp-4); } } .editor-modulo { overflow-y: auto; padding: var(--sp-5) var(--sp-5) var(--sp-16); background: #efeff0; border-right: 1px solid var(--bordo); scroll-behavior: smooth; } .editor-anteprima { overflow-y: auto; background: var(--superficie-piana); position: relative; display: flex; flex-direction: column; } .editor-anteprima__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); background: var(--superficie); border-bottom: 1px solid var(--bordo); font-size: var(--testo-xs); color: var(--testo-tenue); position: sticky; top: 0; z-index: 5; } .editor-anteprima__telaio { flex: 1; padding: var(--sp-4); display: flex; justify-content: center; align-items: flex-start; } .editor-anteprima iframe { width: 210mm; border: 0; background: transparent; transform-origin: top center; transition: opacity 140ms ease; } .editor-anteprima.is-loading iframe { opacity: 0.55; } /* ------------------------------------------------------------------- Sezioni ----- */ /* Ogni sezione è una scheda squadrata su carta chiara: bianca quando è aperta, perché è lì che si scrive, trasparente quando è chiusa. */ .sezione-editor { border: 1px solid var(--bordo); border-radius: 0; margin-bottom: var(--sp-3); background: transparent; transition: border-color var(--transizione), box-shadow var(--transizione); } .sezione-editor.is-open { border-color: var(--blu-400); background: #fbfbfb; box-shadow: none; } .sezione-editor.is-hidden .sezione-editor__intestazione { opacity: 0.55; } .sezione-editor__intestazione { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); cursor: pointer; user-select: none; } .sezione-editor__maniglia { cursor: grab; color: var(--grigio-400); padding: var(--sp-1); display: flex; flex-shrink: 0; touch-action: none; border-radius: var(--raggio-sm); background: none; border: 0; } .sezione-editor__maniglia:hover { color: var(--grigio-600); background: var(--grigio-100); } .sezione-editor__maniglia:active { cursor: grabbing; } /* Il nome della sezione porta la voce dei titoli, come nel resto del sistema. */ .sezione-editor__nome { font-family: var(--font-titoli); font-weight: var(--peso-titoli); letter-spacing: 0.02em; text-transform: uppercase; flex: 1; font-size: 15px; min-width: 0; } .sezione-editor__conteggio { font-size: var(--testo-xs); color: var(--testo-tenue); background: var(--grigio-100); padding: 1px var(--sp-2); border-radius: var(--raggio-tondo); } .sezione-editor__freccia { color: var(--grigio-400); transition: transform var(--transizione); flex-shrink: 0; } .sezione-editor.is-open .sezione-editor__freccia { transform: rotate(180deg); } .sezione-editor__corpo { padding: 0 var(--sp-4) var(--sp-4); border-top: 1px solid var(--bordo); padding-top: var(--sp-4); } .sezione-editor:not(.is-open) .sezione-editor__corpo { display: none; } /* Elemento trascinato */ .is-dragging { opacity: 0.4; } .drop-target { border-color: var(--blu-500) !important; border-style: dashed !important; } /* -------------------------------------------------------------------- Voci ------- */ .voce { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: var(--sp-4); margin-bottom: var(--sp-3); background: var(--grigio-25); position: relative; } .voce__testata { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); } .voce__titolo { flex: 1; font-size: var(--testo-sm); font-weight: 600; color: var(--grigio-700); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .voce__azioni { display: flex; gap: var(--sp-1); flex-shrink: 0; } /* I comandi a icona hanno un filetto e un fondo, sempre. Prima erano del tutto trasparenti finché non ci passavi sopra: sembravano disattivati, o un difetto di caricamento. Nel sistema un comando è un oggetto disegnato, e se si può premere lo deve dichiarare anche da fermo. */ .icona-btn { background: var(--superficie); border: 1px solid var(--bordo-forte); border-radius: 0; padding: var(--sp-1); cursor: pointer; color: var(--grigio-700); display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; transition: background-color var(--transizione), border-color var(--transizione), color var(--transizione); } .icona-btn:hover { background: var(--grigio-100); border-color: var(--grigio-500); color: var(--grigio-900); } /* L'eliminazione si annuncia in rosso solo al passaggio: da ferma resta un comando come gli altri, perché un rosso permanente in mezzo al modulo allarmerebbe senza motivo. */ .icona-btn--pericolo:hover { background: var(--rosso-50); border-color: var(--rosso-500); color: var(--rosso-600); } .icona-btn:focus-visible { outline: 2px solid var(--blu-500); outline-offset: 2px; } .voce__griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } .voce__griglia .campo--intero { grid-column: 1 / -1; } @media (max-width: 560px) { .voce__griglia { grid-template-columns: 1fr; } } /* -------------------------------------------------------------- Barra mobile ---- */ /* Barra dei comandi in fondo allo schermo, come nella schermata mobile del progetto: fondo carta, filetto sopra, nessun angolo tondo. */ .editor-mobile-barra { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--fondo); border-top: 1px solid var(--bordo); padding: var(--sp-2) var(--sp-3); padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom)); gap: var(--sp-2); box-shadow: 0 -2px 12px rgba(22, 27, 38, 0.07); } /* Sotto questa soglia non c'è più spazio per due colonne leggibili: l'anteprima passa a schermo intero, richiamabile dalla barra in basso. La soglia è stata abbassata da 1000 a 720 pixel: a 1000 sparivano l'anteprima anche a chi lavorava in una finestra da 900, senza altro segnale che un pulsante in fondo alla pagina. */ @media (max-width: 720px) { .editor-corpo { grid-template-columns: 1fr; } .editor-anteprima { display: none; position: fixed; inset: 60px 0 64px 0; z-index: 50; } .editor-body.mostra-anteprima .editor-anteprima { display: flex; } .editor-body.mostra-anteprima .editor-modulo { display: none; } .editor-modulo { border-right: 0; padding-bottom: 90px; } .editor-mobile-barra { display: flex; } .editor-mobile-barra .btn { flex: 1; } .editor-titolo { max-width: 140px; font-size: var(--testo-sm); } .stato-salvataggio { min-width: 0; } .stato-salvataggio__testo { display: none; } } /* --------------------------------------------------------------- Pannelli ------- */ .pannello { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--superficie); border-left: 1px solid var(--bordo); box-shadow: var(--ombra-lg); z-index: 120; display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--transizione); } .pannello.is-open { transform: translateX(0); } .pannello__testata { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4); border-bottom: 1px solid var(--bordo); } .pannello__titolo { font-size: var(--testo-lg); } .pannello__corpo { flex: 1; overflow-y: auto; padding: var(--sp-4); } .pannello-sfondo { position: fixed; inset: 0; background: rgba(22, 27, 38, 0.35); z-index: 110; opacity: 0; pointer-events: none; transition: opacity var(--transizione); } .pannello-sfondo.is-open { opacity: 1; pointer-events: auto; } /* --------------------------------------------------- Selettore dei modelli ------ */ .modelli-scelta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } .modello-scelta { border: 2px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; cursor: pointer; background: var(--superficie); text-align: left; padding: 0; transition: border-color var(--transizione); position: relative; } .modello-scelta:hover { border-color: var(--blu-300); } .modello-scelta.is-active { border-color: var(--blu-500); } .modello-scelta.is-locked { opacity: 0.75; } .modello-scelta__anteprima { aspect-ratio: 210 / 297; overflow: hidden; background: var(--grigio-100); position: relative; } .modello-scelta__anteprima iframe { width: 210mm; height: 297mm; border: 0; transform-origin: top left; transform: scale(var(--scala-anteprima, 0.28)); pointer-events: none; } .modello-scelta__nome { padding: var(--sp-2) var(--sp-3); font-size: var(--testo-xs); font-weight: 600; border-top: 1px solid var(--bordo); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); } /* ------------------------------------------------------- Ritaglio della foto ---- */ .foto-anteprima { width: 96px; height: 96px; border-radius: 0; object-fit: cover; border: 2px solid var(--bordo); background: var(--grigio-100); } .ritaglio { position: relative; width: 100%; aspect-ratio: 1; max-width: 320px; margin-inline: auto; background: var(--grigio-900); border-radius: var(--raggio); overflow: hidden; touch-action: none; cursor: grab; } .ritaglio:active { cursor: grabbing; } .ritaglio canvas { display: block; width: 100%; height: 100%; } /* Maschera circolare: mostra che cosa entrerà davvero nel curriculum. */ .ritaglio__maschera { position: absolute; inset: 0; pointer-events: none; box-shadow: 0 0 0 9999px rgba(22, 27, 38, 0.55); border-radius: 0; margin: 8%; } /* -------------------------------------------------- Punteggio e suggerimenti ---- */ .punteggio { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--grigio-50); border: 1px solid var(--bordo); border-radius: var(--raggio); margin-bottom: var(--sp-4); } .punteggio__cerchio { width: 52px; height: 52px; border-radius: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--testo-sm); flex-shrink: 0; color: #fff; background: var(--blu-500); } .punteggio__cerchio--buono { background: var(--verde-500); } .punteggio__cerchio--medio { background: var(--ambra-500); } .punteggio__cerchio--basso { background: var(--rosso-500); } .suggerimento { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-2) 0; font-size: var(--testo-xs); line-height: 1.55; border-bottom: 1px solid var(--bordo); } .suggerimento:last-child { border-bottom: 0; } .suggerimento__punto { width: 6px; height: 6px; border-radius: 0; margin-top: 6px; flex-shrink: 0; background: var(--grigio-400); } .suggerimento--required .suggerimento__punto { background: var(--rosso-500); } .suggerimento--recommended .suggerimento__punto { background: var(--ambra-500); } .suggerimento--tip .suggerimento__punto { background: var(--blu-400); } /* --------------------------------------------------------- Avviso per ospiti ---- */ .avviso-ospite { background: var(--ambra-50); border: 1px solid #f0d090; border-radius: var(--raggio); padding: var(--sp-3) var(--sp-4); font-size: var(--testo-xs); line-height: 1.6; color: #7c4f06; margin-bottom: var(--sp-4); display: flex; gap: var(--sp-2); align-items: flex-start; } /* ------------------------------------------------------ Controlli di stile ------ */ .controllo-range { display: flex; align-items: center; gap: var(--sp-3); } .controllo-range input[type="range"] { flex: 1; accent-color: var(--blu-500); min-height: 24px; } .controllo-range__valore { font-size: var(--testo-xs); color: var(--testo-tenue); min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; } .colori-scelta { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .colore-pallino { width: 32px; height: 32px; border-radius: 0; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .colore-pallino.is-active { border-color: var(--grigio-900); } .tag-lista { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); } .tag-voce { display: inline-flex; align-items: center; gap: var(--sp-1); background: var(--blu-50); color: var(--blu-800); padding: 2px var(--sp-2); border-radius: var(--raggio-sm); font-size: var(--testo-xs); } .tag-voce button { background: none; border: 0; cursor: pointer; color: inherit; opacity: 0.6; font-size: 15px; line-height: 1; padding: 0 2px; } .tag-voce button:hover { opacity: 1; } /* Menu compatto, per i controlli che stanno accanto all'anteprima della foto. */ .select--piccolo { padding: var(--sp-1) var(--sp-2); font-size: var(--testo-sm); height: auto; } /* ================================================= Telefono ==================== */ @media (max-width: 720px) { /* Campi più alti e testo a 16px: sotto quella misura Safari ingrandisce la pagina al primo tocco, e l'utente si ritrova l'editor fuori squadra. */ .editor-modulo .input, .editor-modulo .select, .editor-modulo .textarea { min-height: 46px; font-size: 16px; } .editor-modulo { padding: var(--sp-4) var(--sp-4) 96px; } /* Una sola colonna: due campi affiancati su 390px non lasciano spazio né al testo né all'etichetta. */ .voce__griglia { grid-template-columns: 1fr; } .sezione-editor__nome { font-size: 14px; } } /* Sul telefono la barra superiore tiene solo l'essenziale: indietro, nome del documento, punteggio e scarica. Il resto vive nella barra in fondo, dove il pollice arriva senza allungarsi. */ @media (max-width: 560px) { .editor-barra { gap: var(--sp-2); padding-inline: var(--sp-3); } .editor-titolo { max-width: 46vw; font-size: 15px; } .stato-salvataggio__testo { display: none; } }