/* * Token globali della libreria huniverse. * * Le custom properties CSS attraversano il confine dello Shadow DOM per * ereditarietà: la pagina Webflow definisce le sue Variables su `:root`, e * dentro ogni componente arrivano già risolte. Per questo i token qui sotto * PUNTANO alle Webflow Variables del sito (fonte di verità) e tengono il valore * attuale solo come fallback, per l'anteprima locale e per il canvas. * * Il selettore è `:root, :host`: in anteprima vale `:root`; quando il foglio * viene iniettato nello Shadow DOM di un componente vale `:host`. * * Tutto il resto del CSS globale NON entra nei componenti: ogni componente * porta con sé i propri stili tramite CSS Modules. */ :host, :host { /* ─────────── colori del sito (Webflow Variables) ─────────── */ --hu-color-foreground: var(--flowui-component-library--foreground, #140240); --hu-color-primary: var(--flowui-component-library--primary-base, #642ece); --hu-color-white: var(--flowui-component-library--white, #ffffff); --hu-color-secondary: var(--flowui-component-library--secondary, #f3f5fb); --hu-color-accent-soft: var(--_design-tokens---colors--accent--soft, #e8deff); --hu-color-accent-faint: var(--_design-tokens---colors--accent--faint, #fdf1ff); --hu-color-surface-muted: var(--_design-tokens---colors--surface--muted, #f4f4f4); --hu-color-text-muted: var(--_design-tokens---colors--text--muted, #7b7a8e); --hu-color-text-placeholder: var(--_design-tokens---colors--text--placeholder, #bdbdbd); --hu-color-border-default: var(--_design-tokens---colors--border--default, #d9d9d9); --hu-color-border-divider: var(--_design-tokens---colors--border--divider, #dbdbdb); --hu-color-border-input: var(--_design-tokens---colors--border--input, #e4e6f0); --hu-color-overlay: var(--_design-tokens---colors--overlay, rgba(20, 2, 64, 0.35)); /* ─────────── tipografia ─────────── */ /* * Inter è caricata dal sito come font personalizzata (Regular 400, Medium 500, * SemiBold 600 in woff2), non da Google Fonts: il @font-face è registrato sul * documento e vale anche dentro lo Shadow DOM dei componenti. La libreria usa * solo quei tre pesi. La coda di ripiego è quella del riferimento, e serve * all'anteprima locale, dove la font del sito non c'è. */ --hu-font-body: var(--_design-tokens---typography--body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif); /* ─────────── misure del sito ─────────── */ /* L'altezza della navbar: serve a chi si aggancia sotto di lei mentre la pagina scorre (la testata della tabella di confronto). */ --hu-nav-height: var(--_design-tokens---size--80, 80px); /* ─────────── forma e movimento (Design Tokens del sito) ─────────── */ --hu-radius-6: var(--_design-tokens---radius--6, 6px); --hu-radius-10: var(--_design-tokens---radius--10, 10px); --hu-radius-16: var(--_design-tokens---radius--16, 16px); --hu-radius-20: var(--_design-tokens---radius--20, 20px); --hu-radius-pill: var(--_design-tokens---radius--pill, 100px); --hu-border-width: var(--_design-tokens---border--width, 1px); --hu-duration-fast: 160ms; --hu-duration-base: 260ms; --hu-duration-state: 320ms; --hu-duration-slow: 420ms; --hu-ease: ease; --hu-ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1); /* * ─────────── ombre delle cornici ─────────── * Copiate dal sito di riferimento (styles/product.css e sections.css): una * sola famiglia, morbida e molto ampia, mai netta. `panel` è la cornice a * finestra a riposo, `panel-hero` la stessa cornice quando è la schermata * grande dell'hero (più profonda, con il filo di contorno). */ --hu-shadow-panel: 0 60px 120px -70px color-mix(in srgb, var(--hu-color-foreground) 50%, transparent), 0 24px 48px -36px color-mix(in srgb, var(--hu-color-foreground) 20%, transparent); --hu-shadow-panel-hero: 0 80px 160px -80px color-mix(in srgb, var(--hu-color-foreground) 50%, transparent), 0 30px 60px -40px color-mix(in srgb, var(--hu-color-foreground) 24%, transparent), 0 0 0 1px color-mix(in srgb, var(--hu-color-foreground) 3%, transparent); /* la card dell'annuncio: ombra propria, più corta (mock .posting) */ --hu-shadow-posting: 0 30px 70px -46px color-mix(in srgb, var(--hu-color-foreground) 40%, transparent); /* * ─────────── colori di prodotto ─────────── * Esistono solo nelle ricostruzioni dell'app (board, dashboard, profilo * culturale) e il sito non li ha: i livelli di fit (Alto viola, Medio verde, * Distante grigio: mai un semaforo), le cinque aree del metodo e lo stato * "In pausa". Se entrano nel sito vero, vanno aggiunti anche alle Webflow * Variables con gli stessi valori. * * I colori di stato seguono il tema del sito: leggono i token --hv-* del * foglio custom-code/hv-tema.css (chiaro e scuro) e tengono il valore * storico come ripiego, per il canvas e per l'anteprima senza tema. */ --hu-product-fit-mid: var(--hv-success, #1d7a55); --hu-product-fit-mid-soft: var(--hv-success-soft, #e6f4ed); --hu-product-fit-mid-fg: var(--hv-success, #176b4a); --hu-product-warn-soft: var(--hv-warning-soft, #fdf1e4); --hu-product-warn-fg: var(--hv-warning, #8a4b0c); --hu-product-rejected: var(--hv-danger, #b03d5c); --hu-product-lilac: #b99bff; --hu-product-area-metodo: #2f7fe8; --hu-product-area-relazione: #1d8a63; --hu-product-area-crescita: #d33a72; --hu-product-area-adattamento: #c4761a; /* * ─────────── alias storici ─────────── * Nomi usati dai primi componenti (Badge). Puntano ai token del sito: non * aggiungerne altri, usare direttamente quelli sopra. */ --hu-color-surface: var(--hu-color-white); --hu-color-ink: var(--hu-color-foreground); --hu-color-ink-muted: var(--hu-color-text-muted); --hu-color-accent: var(--hu-color-primary); --hu-color-accent-ink: var(--hu-color-white); --hu-color-line: var(--hu-color-border-default); --hu-font-size-sm: 14px; --hu-font-size-md: 16px; --hu-line-height: 1.5; --hu-space-1: 4px; --hu-space-2: 8px; --hu-space-3: 12px; --hu-space-4: 16px; --hu-duration: var(--hu-duration-fast); --hu-easing: var(--hu-ease-out-expo); } /* * I pezzi del prodotto: cornice, shell dell'app, KPI, board, schede, profilo * culturale, grafico. Portati dal sito Next.js (styles/product.css, app.css, * mobile.css) e riallineati al design system della libreria: colori, font, * raggi e curve arrivano dai token di src/globals.css, che a loro volta leggono * le Webflow Variables del sito. * * Le dimensioni dei testi restano quelle dell'app ricostruita (11–20 px): è * un'interfaccia in miniatura, non tipografia di pagina. * * Tutto vive nello Shadow DOM del componente, dove il CSS del sito non arriva: * per questo `.root` rifà da sé box-sizing e reset di bottoni, liste, paragrafi. */ /* ═══════════ radice, alias dei token e reset ═══════════ */ .c8Alk6BL_lP3SNXhRA1X { /* alias locali: nomi corti per le regole qui sotto, valori dal design system */ --ink: var(--hu-color-foreground); --mute: var(--hu-color-text-muted); --ghostC: var(--hu-color-text-placeholder); --purple: var(--hu-color-primary); --soft: var(--hu-color-accent-soft); --paper: var(--hu-color-white); --paper2: var(--hu-color-secondary); --paper3: var(--hu-color-surface-muted); --line: var(--hu-color-border-input); --line2: var(--hu-color-border-default); --line3: var(--hu-color-text-muted); --fitMid: var(--hu-product-fit-mid); --fitMidSoft: var(--hu-product-fit-mid-soft); --fitMidFg: var(--hu-product-fit-mid-fg); --warnSoft: var(--hu-product-warn-soft); --warnFg: var(--hu-product-warn-fg); --crescita: var(--hu-product-area-crescita); --r6: var(--hu-radius-6); --r10: var(--hu-radius-10); --r16: var(--hu-radius-16); --pill: var(--hu-radius-pill); --ease: var(--hu-ease-out-expo); --dFb: var(--hu-duration-fast); --dState: var(--hu-duration-state); --ring: 0 0 0 3px color-mix(in srgb, var(--purple) 16%, transparent); --shCard: 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent); --purpleSoft: color-mix(in srgb, var(--purple) 9%, var(--paper)); --purpleLine: color-mix(in srgb, var(--purple) 26%, transparent); --techFg: var(--hu-product-area-metodo); --r11: 11px; --r12: 12px; --r14: 14px; --r18: 18px; --r20: var(--hu-radius-20); --shFrag: 0 42px 90px -46px color-mix(in srgb, var(--ink) 34%, transparent), 0 14px 30px -22px color-mix(in srgb, var(--ink) 16%, transparent); --shFragBack: 0 30px 70px -44px color-mix(in srgb, var(--ink) 26%, transparent), 0 10px 22px -20px color-mix(in srgb, var(--ink) 10%, transparent); font-family: var(--hu-font-body); color: var(--ink); line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: left; } .c8Alk6BL_lP3SNXhRA1X *, .c8Alk6BL_lP3SNXhRA1X *::before, .c8Alk6BL_lP3SNXhRA1X *::after { box-sizing: border-box; } .c8Alk6BL_lP3SNXhRA1X :where(p, figure, ul, ol, dl, dd, table) { margin: 0; padding: 0; } .c8Alk6BL_lP3SNXhRA1X :where(ul, ol) { list-style: none; } .c8Alk6BL_lP3SNXhRA1X :where(button) { font: inherit; letter-spacing: inherit; cursor: pointer; background: none; border: none; padding: 0; margin: 0; color: inherit; text-align: left; } /* `font: inherit` non porta con sé il tracking: senza questa riga bottoni e campi tornano a letter-spacing normale e il testo si allarga rispetto alla mock */ .c8Alk6BL_lP3SNXhRA1X :where(input, select, textarea) { letter-spacing: inherit; } .c8Alk6BL_lP3SNXhRA1X :where(a) { color: inherit; text-decoration: none; } .c8Alk6BL_lP3SNXhRA1X :where(b, strong) { font-weight: 500; } .c8Alk6BL_lP3SNXhRA1X :where(svg) { display: block; } .c8Alk6BL_lP3SNXhRA1X :where(table) { border-spacing: 0; } .c8Alk6BL_lP3SNXhRA1X :focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 3px; } .hBQWrzjuDskrW3t8MYjF { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .pdQkWmS9f29vbUjlhqnH { font-variant-numeric: tabular-nums; } .hbbfw1vYVEZ5rXiZyCzT { flex: 0 0 auto; } /* ═══════════ sollevamento e crescita del contenitore ═══════════ */ /* Il contenitore sale sopra la sezione con un transform: non tocca il flusso, quindi il centramento verticale della hero in Webflow resta quello nativo. --ha-lift lo imposta il componente (props), --ha-zoom lo aggiorna lo scroll. `zoomIn` è la sola entrata, e la usano tutti i blocchi che devono entrare come la board dell'hero. */ .YiqcKTKX5majie9I8VHD { transform: translateY(var(--ha-lift, 0%)) scale(var(--ha-zoom, 1)); transform-origin: 50% 50%; will-change: transform; } @media (prefers-reduced-motion: reduce) { .YiqcKTKX5majie9I8VHD { transform: translateY(var(--ha-lift, 0%)); } } /* la board dell'hero aggiunge la larghezza massima della schermata nella mock */ .NEPTyZFBMuimDrAZ1RZ7 { max-width: var(--ha-maxw, 1760px); margin-inline: auto; } /* ═══════════ cornice a finestra ═══════════ */ .tw0Kkn6_4kJgGuv80gro { border-radius: var(--r18); background: var(--paper); border: 1px solid var(--line2); overflow: hidden; box-shadow: var(--hu-shadow-panel-hero); } .voGucIxKBzkDBBuqtFKV { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--paper2); } .t5q3a8T5GQNtGQZRy9uO { display: flex; gap: 6px; flex: 0 0 auto; width: 52px; } .t5q3a8T5GQNtGQZRy9uO i { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); display: block; } .ifVMLo09vRasxCbf2Ely { flex: 1; text-align: center; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .y4ZOD2BjdqU9JmVsDy7b { width: 52px; flex: 0 0 auto; } /* la cornice (o la radice, senza cornice) è il contenitore delle container query */ .h6xYdBLvAVSFOAQbD9hi { container-type: inline-size; container-name: app; position: relative; } /* ═══════════ shell dell'applicazione ═══════════ */ .g_umh2umMLksVs1fzuSE { display: grid; grid-template-columns: 208px minmax(0, 1fr); background: var(--paper); font-size: 13px; color: var(--ink); line-height: 1.45; letter-spacing: -0.008em; } .VNwFT7ayNvNbAP1x6IS9 { border-right: 1px solid var(--line); background: var(--paper2); padding: 14px 11px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .AaQbjqfKg6B4OQhq1Ka_ { display: flex; align-items: center; gap: 9px; padding: 2px 6px 14px; font-size: 13px; } .AaQbjqfKg6B4OQhq1Ka_ b { font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .AaQbjqfKg6B4OQhq1Ka_ .hbbfw1vYVEZ5rXiZyCzT { color: var(--mute); } ._mLO7X5rfYW0TQXBFDnA { display: flex; flex-direction: column; gap: 2px; } .NVa67tZGJS2qI0yGppSa { font-size: 11.5px; color: var(--mute); padding: 16px 10px 5px; } .OYX9az6e2M83Vv3oaA55 { display: flex; align-items: center; gap: 9px; padding: 12px 6px 0; margin-top: auto; border-top: 1px solid var(--line); } .OYX9az6e2M83Vv3oaA55 b { display: block; font-weight: 500; font-size: 12.5px; white-space: nowrap; } .OYX9az6e2M83Vv3oaA55 span span { display: block; font-size: 11.5px; color: var(--mute); } .yeD27JFciMlN_TwhPabR { min-width: 0; min-height: 0; display: flex; flex-direction: column; } .TY8tLVAaZlubpJ0grHKa { height: 44px; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--ink); } .h1LX3r53OQYoXXkL5QG9 { color: var(--mute); } .A_ym57lsK2H4kGNcmHpl { display: flex; align-items: center; gap: 6px; font-size: 12.5px; min-width: 0; white-space: nowrap; overflow: hidden; } .A_ym57lsK2H4kGNcmHpl > span { display: inline-flex; align-items: center; gap: 6px; } .A_ym57lsK2H4kGNcmHpl > span:not(:last-child) { color: var(--mute); } .A_ym57lsK2H4kGNcmHpl .hbbfw1vYVEZ5rXiZyCzT { color: var(--mute); } .b7qsyEyO6Qy5icXoEmYr { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--mute); } .n0cZPnhotu3UKfO8Zwv_ { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--purpleLine); background: var(--soft); color: var(--purple); border-radius: var(--r6); padding: 4px 9px; font-size: 12px; font-weight: 500; } .MIEuSiBYZpxH34dMuQkY { display: flex; flex-direction: column; flex: 1; min-height: 0; } .dJI6UXHC5OCo5FjiNZjJ { flex: 1; min-height: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; padding: 20px 22px 0; background: var(--paper); } .To4XOQ2lae_eQ305Kdg1 { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r6); color: var(--ink); white-space: nowrap; width: 100%; font-size: 13px; transition: background-color var(--dFb) var(--ease), color var(--dFb) var(--ease); } button.To4XOQ2lae_eQ305Kdg1:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); } .To4XOQ2lae_eQ305Kdg1.PoPs9p_CtcFqM6xcrMxl, button.To4XOQ2lae_eQ305Kdg1.PoPs9p_CtcFqM6xcrMxl:hover { background: var(--soft); color: var(--purple); font-weight: 500; } .To4XOQ2lae_eQ305Kdg1.lFr1xzIbseEURo8cAXXg { color: var(--mute); } /* la board dell'hero: altezza e larghezza del riferimento (.hh-stage + .hh .ha), cioè ~1760 x 840 a schermo pieno. Dentro, la board riempie lo spazio e ogni colonna scorre per conto suo, come nell'app. */ .mVzHRcmVkhBq5YjH3NxZ { position: relative; overflow: hidden; grid-template-columns: 216px minmax(0, 1fr); height: clamp(640px, 50vw, 840px); } /* breakpoint della mock: sotto i 900 px la schermata si allunga invece di stringersi, così la board resta leggibile (riferimento .hh .ha) */ @media (max-width: 900px) { .mVzHRcmVkhBq5YjH3NxZ { height: clamp(560px, 150vw, 760px); } } .CsGwsZCbvqfy_09GRVbu .dJI6UXHC5OCo5FjiNZjJ, .f9nglNs5O2YvPcHtbLbH .dJI6UXHC5OCo5FjiNZjJ { overflow-y: auto; scrollbar-width: thin; padding-bottom: 24px; } .GC_WTLjOD103YCDj4lX0, .GC_WTLjOD103YCDj4lX0 * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; } @container app (max-width: 980px) { .mVzHRcmVkhBq5YjH3NxZ { grid-template-columns: 54px minmax(0, 1fr); } .VNwFT7ayNvNbAP1x6IS9 { padding: 12px 8px; align-items: center; } .AaQbjqfKg6B4OQhq1Ka_ b, .AaQbjqfKg6B4OQhq1Ka_ .hbbfw1vYVEZ5rXiZyCzT, .NVa67tZGJS2qI0yGppSa, .OYX9az6e2M83Vv3oaA55 > span, .To4XOQ2lae_eQ305Kdg1 > span { display: none; } .AaQbjqfKg6B4OQhq1Ka_ { padding: 2px 0 12px; } .To4XOQ2lae_eQ305Kdg1 { justify-content: center; padding: 8px; } .NVa67tZGJS2qI0yGppSa { display: block; height: 14px; padding: 0; font-size: 0; } .OYX9az6e2M83Vv3oaA55 { border-top: none; padding: 0; } } @container app (max-width: 640px) { .mVzHRcmVkhBq5YjH3NxZ { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; } .VNwFT7ayNvNbAP1x6IS9, .n0cZPnhotu3UKfO8Zwv_ { display: none; } .dJI6UXHC5OCo5FjiNZjJ { padding: 14px 12px 0; overflow: visible; } } /* ═══════════ schermate e card ═══════════ */ .GX3RWwy5lTwflLukZ_0h { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .Owdy842kIL4fIcHzRMFg { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .ZYI4q0SNS_KRTo4pxEGQ { font-size: 20px; font-weight: 500; letter-spacing: -0.026em; display: flex; align-items: center; gap: 10px; line-height: 1.2; color: var(--ink); } .MXjqsrtrPccmJ2WwyI2G { display: inline-flex; gap: 6px; align-items: center; background: var(--purple); color: var(--paper); border-radius: var(--r6); padding: 7px 12px; font-size: 12.5px; font-weight: 500; white-space: nowrap; } .BsfLwGxm_Gv6oavDLQ8A { display: flex; gap: 6px; flex-wrap: wrap; } .GFdddGcS6MoDq2zGSoSQ { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line2); border-radius: var(--r6); padding: 5px 9px; font-size: 12px; color: var(--ink); background: var(--paper); } .yVtVGItsyX3o1eE7bgKA { margin-top: -8px; } .LJHMbV9f0hnIWNTakcfD { background: var(--paper); border: 1px solid var(--line2); border-radius: var(--r12); padding: 14px 16px; min-width: 0; } .bYrS1C2u1KhfQdZdysbi { padding: 4px 12px; } .SCG2umiDMvFyKUaaCTmJ { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .izNB4SiB0TY0rMcLW5_Y { font-size: 13.5px; font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; letter-spacing: -0.012em; min-width: 0; } .KkNt0492A3YtKF7b0_nt { font-size: 12px; border: 1px solid var(--line2); border-radius: var(--r6); padding: 5px 9px; display: inline-flex; gap: 6px; align-items: center; color: var(--ink); white-space: nowrap; } .LYPcZu7qUbwjnSKDI2eD { font-size: 12.5px; color: var(--mute); margin-top: 5px; line-height: 1.5; } .WzD9Z74YlwGGT9Rq6t38 { border-top: 1px solid var(--line); margin: 12px -16px 0; padding: 12px 16px 0; } /* ═══════════ KPI ═══════════ */ .UR8MJfDhOK1fU9C9lose { display: grid; gap: 10px; min-width: 0; align-items: stretch; } .Kazyw11iw1_pog3jBvKP { grid-template-columns: repeat(4, minmax(0, 1fr)); } .SXIiQPeh0gHuu_7teYoh { grid-template-columns: repeat(3, minmax(0, 1fr)); } .G7I7_dKrE4KoYwObnCWF { display: flex; flex-direction: column; background: var(--paper3); border: 1px solid var(--line); border-radius: var(--r14); padding: 4px 4px 0; min-width: 0; } .IYIMYpd2UC8W0v2cnZrT { flex: 1; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line2); border-radius: var(--r11); padding: 12px 13px; box-shadow: var(--shCard); } .cBl9fGxTYlOV4utTNDnB { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink); min-width: 0; } .fPiJeoI9auz3Ej8eAKvr { flex: 1; min-width: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .OtRAkBmN8LErQrTYP899 { width: 24px; height: 24px; border-radius: var(--r6); background: var(--soft); color: var(--purple); display: grid; place-items: center; flex: 0 0 auto; } .KeWgUd9_cTGbgohvU7bj { display: flex; align-items: baseline; gap: 4px; font-size: 30px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; margin-top: 10px; color: var(--ink); white-space: nowrap; } .Xtlz_z_iNgeAPsZoUBw2 { font-size: 16px; color: var(--mute); letter-spacing: -0.01em; } .zFW_5VVJ2pCcNS_voQ_i { margin-left: auto; align-self: center; border-radius: var(--pill); font-size: 11px; padding: 2px 6px; display: inline-flex; gap: 3px; align-items: center; font-weight: 500; flex: 0 0 auto; letter-spacing: 0; line-height: 1.4; background: var(--warnSoft); color: var(--warnFg); } .KLTqPJlRdcDO5v3KwM08 { font-size: 12px; color: var(--ink); font-weight: 500; margin-top: auto; padding-top: 4px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* la nota sotto la card: misure della mock (7 / 10 / 8), una riga sola; il fondo lo chiude lei, per questo il contenitore non ha padding in basso */ .HIpMKXrvMrPsdsoRdwAD { display: block; font-size: 11.5px; color: var(--mute); padding: 7px 10px 8px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .HIpMKXrvMrPsdsoRdwAD .hbbfw1vYVEZ5rXiZyCzT { display: inline-block; vertical-align: -1px; margin-right: 5px; } .A5b8JgHzlOyoCsgiAwt7 .IYIMYpd2UC8W0v2cnZrT { justify-content: space-between; padding: 11px 14px 8px; } /* dentro una KPI la nota della distribuzione la porta già il piè della card */ .A5b8JgHzlOyoCsgiAwt7 .Q2hUrlBnRupZxDU8xxxP { display: none; } @container app (max-width: 760px) { .Kazyw11iw1_pog3jBvKP, .SXIiQPeh0gHuu_7teYoh { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container app (max-width: 560px) { .OtRAkBmN8LErQrTYP899, .zFW_5VVJ2pCcNS_voQ_i { display: none; } .IYIMYpd2UC8W0v2cnZrT { padding: 10px 12px; } .KeWgUd9_cTGbgohvU7bj { font-size: 26px; margin-top: 6px; } .cBl9fGxTYlOV4utTNDnB { font-size: 12px; } .HIpMKXrvMrPsdsoRdwAD { display: none; } .G7I7_dKrE4KoYwObnCWF { padding-bottom: 4px; } } /* ═══════════ distribuzione dei fit (filtra la board) ═══════════ */ .ff4TWLpLWleZvrTuVqON { display: flex; flex-direction: column; min-width: 0; } .nwxBAhwaZ2pyu04TDrH7 { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink); } .cjL7SHjbSwhaYZHmmJpl { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; } .cBGYsH3jxMVFJvBmjngJ { display: grid; grid-template-columns: 56px minmax(0, 1fr) 24px; align-items: center; gap: 10px; font-size: 12px; } .cBGYsH3jxMVFJvBmjngJ dt { color: var(--ink); } /* nella board le righe sono bottoni che filtrano: corpo a 13 px come nella mock (lì `font: inherit` del bottone vince sul 12 px della riga) e area cliccabile che esce di 5 px dal testo */ .mVzHRcmVkhBq5YjH3NxZ .cjL7SHjbSwhaYZHmmJpl { gap: 4px; margin-top: 9px; } button.cBGYsH3jxMVFJvBmjngJ { font-size: 13px; width: calc(100% + 10px); border-radius: var(--r6); padding: 2px 5px; margin: 0 -5px; transition: background-color var(--dFb) var(--ease); } button.cBGYsH3jxMVFJvBmjngJ:hover { background: var(--paper3); } button.cBGYsH3jxMVFJvBmjngJ.PoPs9p_CtcFqM6xcrMxl { background: var(--soft); } .R1Ll6G6FyYUkIk4YUaPh { color: var(--ink); } .cBGYsH3jxMVFJvBmjngJ.PoPs9p_CtcFqM6xcrMxl .R1Ll6G6FyYUkIk4YUaPh { color: var(--purple); font-weight: 500; } .CXIMBy_XrHj1Ho9iEaQA { height: 7px; border-radius: var(--pill); background: var(--paper3); position: relative; } .CXIMBy_XrHj1Ho9iEaQA i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * 100%); border-radius: var(--pill); transform-origin: left; display: block; } .x6MJ9wuUWWqAOkIvjyOT .CXIMBy_XrHj1Ho9iEaQA i { background: var(--purple); } .D_YE4FZvSK5Cahl9k9hA .CXIMBy_XrHj1Ho9iEaQA i { background: var(--fitMid); } .N5TrfxFsqlC_tzTTkImD .CXIMBy_XrHj1Ho9iEaQA i { background: var(--mute); } .CXIMBy_XrHj1Ho9iEaQA i.mGLgRSinrK1sAUQE0ijs { display: none; } .ROTM6yVBEfZ5cK6ISabF { text-align: right; font-weight: 500; color: var(--ink); } /* ═══════════ filtri ═══════════ */ .B6jm3SFiGPKfdoJ_S49d { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line2); border-radius: var(--r10); padding: 8px 10px; font-size: 12px; color: var(--ink); } /* nella board dell'hero la barra è più fitta e non va mai a capo */ .e7Fl8dfu57Qs_HIWRDqe { flex-wrap: nowrap; padding: 7px 8px; } .A6jlnBm1vHTUAKNk3wKT, .omHhsJLPyC_XpDuJlrI7 { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line2); border-radius: var(--r6); padding: 5px 9px; white-space: nowrap; } .A6jlnBm1vHTUAKNk3wKT { min-width: 210px; cursor: text; color: var(--mute); transition: border-color var(--dFb) var(--ease), box-shadow var(--dFb) var(--ease); } .A6jlnBm1vHTUAKNk3wKT:focus-within, .omHhsJLPyC_XpDuJlrI7:focus-within { border-color: var(--purple); box-shadow: var(--ring); } .A6jlnBm1vHTUAKNk3wKT input { border: 0; background: transparent; font: inherit; font-size: 12px; color: var(--ink); width: 100%; min-width: 0; outline: none; padding: 0; -webkit-appearance: none; appearance: none; } .A6jlnBm1vHTUAKNk3wKT input::placeholder { color: var(--mute); } .A6jlnBm1vHTUAKNk3wKT input::-webkit-search-cancel-button { display: none; } .omHhsJLPyC_XpDuJlrI7 { cursor: pointer; color: var(--ink); transition: border-color var(--dFb) var(--ease); } .omHhsJLPyC_XpDuJlrI7:hover { border-color: var(--line3); } .omHhsJLPyC_XpDuJlrI7 select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-size: 12px; color: var(--ink); padding: 0; cursor: pointer; outline: none; } .mMPxsObt37ghRnw2kXAA { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; background: var(--soft); color: var(--purple); border-radius: var(--pill); padding: 4px 9px 4px 11px; font-size: 12px; font-weight: 500; } .sV0vGtD2y7ZPr8dT6YKA { flex: 1; } .KZQ9NzAJkQa7D9ZbnC9p { display: inline-flex; gap: 3px; border: 1px solid var(--line2); border-radius: var(--r6); padding: 2px; } /* bottoni nella board dell'hero, span nelle schermate ferme */ .KZQ9NzAJkQa7D9ZbnC9p button, .KZQ9NzAJkQa7D9ZbnC9p span { border-radius: var(--r6); padding: 5px; color: var(--mute); display: grid; transition: background-color var(--dFb) var(--ease), color var(--dFb) var(--ease); } .KZQ9NzAJkQa7D9ZbnC9p button:hover { color: var(--ink); } .KZQ9NzAJkQa7D9ZbnC9p .PoPs9p_CtcFqM6xcrMxl { background: var(--soft); color: var(--purple); } @container app (max-width: 760px) { .e7Fl8dfu57Qs_HIWRDqe .omHhsJLPyC_XpDuJlrI7, .e7Fl8dfu57Qs_HIWRDqe .mMPxsObt37ghRnw2kXAA { display: none; } .A6jlnBm1vHTUAKNk3wKT { min-width: 0; flex: 1; } } /* ═══════════ board ═══════════ */ .dqYzYOhNG8TLBMdp7FLV { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; } .xpkBjLounZoGSjI8Hnnr { flex: 1; min-height: 0; } .xpkBjLounZoGSjI8Hnnr .Owdy842kIL4fIcHzRMFg { flex-wrap: nowrap; } .w9CBY1KhPY9tkk7iUYPK { position: relative; flex: 1; min-height: 0; display: flex; margin: 0 -22px; padding: 0 22px; } /* la base è la board ferma di Piattaforma: colonne da 232 px che crescono con le loro card. Quella dell'hero (.haKb) ha altezza fissa e colonne che scorrono. */ .ASFL6XyrbB4McnGpg7YW { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr); gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 2px 2px 8px; scrollbar-width: thin; -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); } .JJvxe43OJNzfXkgTGnyo { flex: 1; grid-template-rows: minmax(0, 1fr); grid-auto-columns: minmax(224px, 1fr); padding: 2px 2px 14px; } .y6bd3sR9ntc8Z5WW58bA { display: flex; flex-direction: column; min-height: 160px; background: var(--paper2); border: 1px solid var(--line); border-radius: var(--r10); padding: 8px; scroll-snap-align: start; transition: background-color var(--dFb) var(--ease), border-color var(--dFb) var(--ease), opacity var(--dState) var(--ease); } .y6bd3sR9ntc8Z5WW58bA.IfowkQQWYEQzEko8cSO5 { background: var(--hu-color-accent-faint); border-color: var(--soft); } .y6bd3sR9ntc8Z5WW58bA.BGAKOnH0cBSChJTfH8BH { opacity: 0.38; } .gWekT1ndyeVngKTSt7NE { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 3px 3px 9px; min-height: 30px; white-space: nowrap; } .gWekT1ndyeVngKTSt7NE b { font-weight: 500; } .gWekT1ndyeVngKTSt7NE > i { width: 7px; height: 7px; border-radius: 50%; display: block; } .o31nQHJrCEMijMUk4V_i { background: var(--paper); border: 1px solid var(--line2); border-radius: var(--r6); font-size: 11px; padding: 0 6px; color: var(--ink); } .Z3cu8pLG8OS8jsC3LOgD { margin-left: auto; color: var(--ghostC); } .G1lWVHCRyDc_KTlPPmrB { display: flex; flex-direction: column; gap: 8px; } .mVzHRcmVkhBq5YjH3NxZ .y6bd3sR9ntc8Z5WW58bA { min-height: 0; } .mVzHRcmVkhBq5YjH3NxZ .G1lWVHCRyDc_KTlPPmrB { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 1px 1px 10px; margin: 0 -1px; } .mVzHRcmVkhBq5YjH3NxZ .G1lWVHCRyDc_KTlPPmrB::-webkit-scrollbar { display: none; } .id_g3skN4FqrS5SVFn_p { display: block; height: 3px; border-radius: 3px; background: var(--purple); margin: -5px 2px -2px; flex: 0 0 auto; box-shadow: var(--ring); } /* la card di una candidatura */ .Z4hGvaU9w5XwpgVdKOD4 { background: var(--paper); border: 1px solid var(--line2); border-radius: var(--r10); padding: 9px 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shCard); min-width: 0; } .c0pi10deje5_MVN0e3lU { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; } /* la card ferma della libreria ha anche la casella di selezione: una colonna in più */ .srak7whYwVl5bjY_qt9A { grid-template-columns: auto auto minmax(0, 1fr) auto; } .ZPOmUYInwZp1HUDfgc7R { width: 13px; height: 13px; border: 1px solid var(--line2); border-radius: 4px; display: block; } .kvOotXd1p5Rkcl6iMqWQ { min-width: 0; } .kvOotXd1p5Rkcl6iMqWQ b { display: block; max-width: 100%; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); } .kvOotXd1p5Rkcl6iMqWQ span { display: block; max-width: 100%; font-size: 11px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xUV9hJ8nDwDr36urf42U { color: var(--mute); } .JGAs1QJ4PzDSUtepLoXk { display: flex; gap: 5px; flex-wrap: wrap; } .c68CdqOLQCoIcDnLDzeo { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--mute); min-height: 16px; } .STDt33jUjjin9EnlNMPX { display: inline-flex; align-items: center; gap: 5px; } .vVEDkBeJqnqLjDFZV7tH { display: inline-flex; align-items: center; gap: 3px; color: var(--purple); font-weight: 500; } .ZhoTu52TH1gF6csu_Z3C { margin-left: auto; color: var(--ghostC); } /* la card è un bottone da trascinare: il testo non si seleziona mentre la si prende */ .RMqscW7hmzll_4GN_7Js { width: 100%; flex: 0 0 auto; cursor: grab; user-select: none; -webkit-user-select: none; transition: box-shadow var(--dFb) var(--ease), transform var(--dFb) var(--ease), border-color var(--dFb) var(--ease), opacity var(--dState) var(--ease); } .RMqscW7hmzll_4GN_7Js:hover { border-color: var(--line3); box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--ink) 34%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--ink) 8%, transparent); transform: translateY(-1px); } .RMqscW7hmzll_4GN_7Js:hover .xUV9hJ8nDwDr36urf42U { color: var(--purple); } .RMqscW7hmzll_4GN_7Js:hover .ZhoTu52TH1gF6csu_Z3C { color: var(--mute); } .RMqscW7hmzll_4GN_7Js:active { cursor: grabbing; } .RMqscW7hmzll_4GN_7Js:focus-visible { outline-offset: 1px; } .RMqscW7hmzll_4GN_7Js.JXEKbma4_9B9IMxCpgTY { border-color: var(--purple); box-shadow: var(--ring); } .RMqscW7hmzll_4GN_7Js.BGAKOnH0cBSChJTfH8BH { opacity: 0.22; } .RMqscW7hmzll_4GN_7Js.U8wxxFvhPnqWYK62ilsq { opacity: 0.35; border-style: dashed; box-shadow: none; transform: none; } .VxElqvkh4IelI_snluAU { position: absolute; left: 0; top: 0; z-index: 30; pointer-events: none; border-color: var(--soft); box-shadow: 0 34px 60px -26px color-mix(in srgb, var(--ink) 55%, transparent), var(--ring); } /* vista elenco */ .X6hTn39ZD0PX6XmV6OkZ { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; margin-bottom: 18px; } .X6hTn39ZD0PX6XmV6OkZ thead th { position: sticky; top: 0; background: var(--paper); z-index: 1; } .duP26bfV4GR2V5lvtCVY { display: flex; gap: 9px; align-items: center; border-radius: var(--r6); } .duP26bfV4GR2V5lvtCVY:hover b { color: var(--purple); } .ErgRRyPItH1AMv_Xy6Ek { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .ErgRRyPItH1AMv_Xy6Ek i { width: 7px; height: 7px; border-radius: 50%; display: block; } .cGbuujiWXlTHFKBWe49g { padding: 18px 8px; font-size: 12.5px; color: var(--mute); } /* ═══════════ tabelle ═══════════ */ .BdOza68j2wKWltDab3w6, .eUPOKiCMvV2QRFds6IKK { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; } .X6hTn39ZD0PX6XmV6OkZ .eUPOKiCMvV2QRFds6IKK { margin-top: 0; } .BdOza68j2wKWltDab3w6 th, .BdOza68j2wKWltDab3w6 td, .eUPOKiCMvV2QRFds6IKK th, .eUPOKiCMvV2QRFds6IKK td { padding: 9px 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; font-weight: 400; } .BdOza68j2wKWltDab3w6 td, .eUPOKiCMvV2QRFds6IKK td { white-space: nowrap; } .BdOza68j2wKWltDab3w6 tbody tr:last-child > *, .eUPOKiCMvV2QRFds6IKK tbody tr:last-child > * { border-bottom: none; } .BdOza68j2wKWltDab3w6 thead th, .eUPOKiCMvV2QRFds6IKK thead th { font-size: 11.5px; color: var(--mute); border-bottom: 1px solid var(--line2); white-space: nowrap; } .LiXLNKfoYBas2awUNd6d { width: 62px; } .Rs6FXTWXoFHhATN9INz5 { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); flex-wrap: nowrap; white-space: nowrap; min-width: 0; } .Rs6FXTWXoFHhATN9INz5 > :first-child { overflow: hidden; text-overflow: ellipsis; } .emNiuUA1tjF97CUXkgDV { display: block; font-size: 11.5px; color: var(--mute); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zzarutKBxiaJLHhxqXDD { white-space: nowrap; } .zzarutKBxiaJLHhxqXDD b, ._z1CzdLwQ7pXSjTn0MA9 b { font-weight: 500; } .O35aDSdSFmjWy_jRC7fu { font-size: 11.5px; color: var(--mute); } .TgZGZ6jc6pjOYN0u3LS9 { white-space: nowrap; color: var(--ink); } .g7IUid0dlIS6c_iseLbV { border: 1px solid var(--line2); border-radius: var(--r6); padding: 4px 7px; font-size: 11.5px; display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; color: var(--ink); } .yctvvhIn7EbbsEQEEy6a { width: 22px; color: var(--mute); } .M7GVLOcsETANDmQL7p8t { display: flex; align-items: center; gap: 9px; } .M7GVLOcsETANDmQL7p8t b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .M7GVLOcsETANDmQL7p8t span span { display: block; font-size: 11.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @container app (max-width: 900px) { .BdOza68j2wKWltDab3w6 .cqbIMELQhwNHxqSa36bn, .BdOza68j2wKWltDab3w6 .LiXLNKfoYBas2awUNd6d { display: none; } } @container app (max-width: 620px) { .BdOza68j2wKWltDab3w6 ._z1CzdLwQ7pXSjTn0MA9, .BdOza68j2wKWltDab3w6 .TgZGZ6jc6pjOYN0u3LS9, .BdOza68j2wKWltDab3w6 .yctvvhIn7EbbsEQEEy6a, .eUPOKiCMvV2QRFds6IKK .yctvvhIn7EbbsEQEEy6a, .xZAEaF2M01mJdjdZZZS4, .h0NHjk1IExuT1IAECakO { display: none; } } .d0tTg9hVrIamEE6b8ceF { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 7px; border-radius: var(--pill); background: var(--soft); color: var(--purple); font-weight: 500; line-height: 1.4; white-space: nowrap; } .d0tTg9hVrIamEE6b8ceF i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; display: block; } .yZ26L2k9yLusJKcN9x6k, .ghusRHVB4vkK9FgGbd50 { background: var(--paper3); color: var(--mute); } .lrRbZKs0MoHAamsc8u4m { background: var(--warnSoft); color: var(--warnFg); } /* ═══════════ avatar ═══════════ */ .BubDyNopjFtsNWbk0dVo { display: block; flex: 0 0 auto; border-radius: 50%; } .fvzRTy3q9lnhg3vNdLiw { display: inline-flex; align-items: center; } .fvzRTy3q9lnhg3vNdLiw .BubDyNopjFtsNWbk0dVo { box-shadow: 0 0 0 2px var(--paper); } .fvzRTy3q9lnhg3vNdLiw .BubDyNopjFtsNWbk0dVo + .BubDyNopjFtsNWbk0dVo { margin-left: -7px; } .I0ZKdZV3R44JA6sbwpoH { display: grid; place-items: center; border-radius: 50%; background: var(--purple); color: var(--paper); margin-left: -7px; box-shadow: 0 0 0 2px var(--paper); font-size: 13px; font-weight: 500; } /* ═══════════ livelli di fit: Alto viola, Medio verde, Distante grigio ═══════════ */ .bwvMLcR9Bqw92Pi560nM { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--pill); font-weight: 500; white-space: nowrap; line-height: 1.1; } .zW478xY1nzUSt6swedlm { font-size: 12px; padding: 4px 9px; } .zclwVQOOYduyjboUTeCu { font-size: 11px; padding: 3px 7px; } .r_uMFvXbwXAysVflInF1 { background: var(--soft); color: var(--purple); } .tbPqTGEIjCec7jiifjpy { background: var(--fitMidSoft); color: var(--fitMidFg); } .k5rnODSsqa_kEdLMQiBg { background: var(--paper3); color: var(--ink); } .zfA5181Ut_PD3ChpzcSQ { background: var(--paper); color: var(--mute); box-shadow: inset 0 0 0 1px var(--line2); } .S5FEadBVHzIsWBN39ZVW { display: flex; flex-direction: column; } .vGYDajhzGfGgTf5dIJ9A { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--ink); } .rvuA0UALdLlTyM60_sMO { display: inline-flex; gap: 6px; align-items: center; } .QDSd7feh8yJ3gj3m6DYl { font-weight: 500; letter-spacing: 0.06em; font-size: 12px; } .qJ9xmRJQdL26F939Ipiy .QDSd7feh8yJ3gj3m6DYl { color: var(--purple); } .uuE99VcHJovUOTHXMIFi .QDSd7feh8yJ3gj3m6DYl { color: var(--fitMidFg); } .JkkaA7wnMxpVKMXxF1nF .QDSd7feh8yJ3gj3m6DYl, .CM049Lfru9m2ar6HzJ8y .QDSd7feh8yJ3gj3m6DYl { color: var(--mute); } .Uphy_JhpPUsVDrj9r3FJ { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 9px 0 7px; } .Uphy_JhpPUsVDrj9r3FJ i { height: 6px; border-radius: var(--pill); background: var(--paper3); display: block; transform-origin: left; } .qJ9xmRJQdL26F939Ipiy .Uphy_JhpPUsVDrj9r3FJ i.PoPs9p_CtcFqM6xcrMxl { background: var(--purple); } .uuE99VcHJovUOTHXMIFi .Uphy_JhpPUsVDrj9r3FJ i.PoPs9p_CtcFqM6xcrMxl { background: var(--fitMid); } .JkkaA7wnMxpVKMXxF1nF .Uphy_JhpPUsVDrj9r3FJ i.PoPs9p_CtcFqM6xcrMxl { background: var(--mute); } .O5d3Qo3MkM1YftrPGQLG { font-size: 12px; color: var(--mute); } /* ═══════════ piano ═══════════ */ .lcDjI01Rx0OjRAQ2K5JW { display: grid; grid-template-columns: repeat(40, 1fr); gap: 2px; } .lcDjI01Rx0OjRAQ2K5JW i { height: 7px; border-radius: 2px; background: var(--paper3); display: block; } .lcDjI01Rx0OjRAQ2K5JW i.PoPs9p_CtcFqM6xcrMxl { background: var(--purple); } .AAI1VeaHYH48BMnmx44K { font-size: 12.5px; color: var(--ink); } .xvkJIGv4oknmkDgtvKdu { font-size: 11.5px; color: var(--mute); margin-top: 8px; } .krM1O2AYOVHxZo0Xv390 { display: flex; justify-content: center; align-items: center; gap: 7px; border: 1px solid var(--line2); border-radius: var(--r6); padding: 7px; margin-top: 10px; font-size: 12.5px; color: var(--ink); } /* ═══════════ dashboard e grafico ═══════════ */ .oJO4ougB6SjEUvS__XVi { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 12px; align-items: start; } .SvqPTkX_9tciBd38QsNO { display: flex; flex-direction: column; gap: 12px; } @container app (max-width: 900px) { .oJO4ougB6SjEUvS__XVi { grid-template-columns: minmax(0, 1fr); } .SvqPTkX_9tciBd38QsNO { display: grid; grid-template-columns: 1fr 1fr; } } @container app (max-width: 560px) { .SvqPTkX_9tciBd38QsNO { grid-template-columns: 1fr; } } .Nc7FX6BhVLCMQAbRPGGC { display: flex; gap: 10px; align-items: center; font-size: 11.5px; color: var(--mute); flex-wrap: wrap; } .CEPOEPaZU4zZ3yjWQAuZ { display: inline-flex; align-items: center; gap: 5px; } .CEPOEPaZU4zZ3yjWQAuZ i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } ._wRJr_oBDPXxv7NHoBhA i { background: var(--purple); } .PJs7A3L9z84uMnAiKYSU i { background: var(--crescita); } .F8s9aXgIMQAz_IsppMVh { display: inline-flex; gap: 4px; } .F8s9aXgIMQAz_IsppMVh span { padding: 4px 8px; border-radius: var(--r6); border: 1px solid var(--line2); color: var(--ink); } .F8s9aXgIMQAz_IsppMVh .PoPs9p_CtcFqM6xcrMxl { background: var(--soft); color: var(--purple); border-color: var(--soft); } .MZ262LqJfJkQzQsY8Kvn { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; margin-top: 12px; } .FcPsvq4GRDWR8tqgBtRn { position: relative; height: 190px; font-size: 10.5px; color: var(--mute); } .FcPsvq4GRDWR8tqgBtRn span { position: absolute; right: 0; transform: translateY(-50%); line-height: 1; } .bhKwB6V2DI4NWLpzdK4U { position: relative; height: 190px; } .ls4_I9h1UL9pt2fPIrAq { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .HqmeZQjdcsR6gsuJ9Th_ { clip-path: inset(-12px -12px -12px -12px); } .I32c0QYfgu3FUsGYMLcg { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; } .sHUAVxWt03PHKtRkPd5N { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; } .ogfRbvIXB8e8yDdHQmWt { stroke: var(--purple); } .YRvNyJLCvqZMng9Ako8G { stroke: var(--crescita); stroke-width: 1.6; } .MyrYrreBlhZPwwogKWiw { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--paper); border: 1.6px solid var(--purple); } .NuUDkisuKdwHvBSrnncA { grid-column: 2; display: flex; justify-content: space-between; font-size: 11px; color: var(--mute); margin-top: 7px; } .NuUDkisuKdwHvBSrnncA span { width: 0; display: flex; justify-content: center; white-space: nowrap; } /* ═══════════ profilo culturale e allineamento ═══════════ */ .rNinNXeFNmGfQFhGiDlh { color: var(--mute); font-weight: 400; } .KPWRHWUO1t4uoI539a6W { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--mute); margin-top: 12px; } .KPWRHWUO1t4uoI539a6W span { display: inline-flex; align-items: center; gap: 6px; } .s3lk1gBQi_gJCmmkGeQr { width: 22px; height: 9px; border-radius: var(--pill); background: color-mix(in srgb, var(--purple) 26%, transparent); display: inline-block; } .lsXcHGBcWlhmo9cEbg2E { width: 8px; height: 8px; border-radius: 50%; background: var(--purple); display: inline-block; } .DFqJJY7RLrFoLhuRo01Y { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .SXOp8kL2j07QmKsVUs2Q { border: 1px solid var(--line2); border-radius: var(--r11); background: var(--paper); } .aHtBp9If0xKGffYqiTdY { width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px 12px; font-size: 13px; font-weight: 500; color: var(--ink); border-radius: var(--r11); min-height: 40px; transition: background-color var(--dFb) var(--ease); } .aHtBp9If0xKGffYqiTdY:hover { background: var(--paper2); } .rm68JMHXG6R92cv1I0fw { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; } .wJVLn_n269MOYI3Ctn2D { margin-left: auto; color: var(--mute); transition: transform var(--dState) var(--ease); } .SXOp8kL2j07QmKsVUs2Q.fZAyUAb9ZtLn1vQ7ZGSw .wJVLn_n269MOYI3Ctn2D { transform: rotate(180deg); } .ATc7x5pHPGy5rHGmS8OY { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--dState) var(--ease), visibility 0s linear var(--dState); } .SXOp8kL2j07QmKsVUs2Q.fZAyUAb9ZtLn1vQ7ZGSw .ATc7x5pHPGy5rHGmS8OY { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--dState) var(--ease), visibility 0s; } .pezgF7ApqKAz6O41foGu { overflow: hidden; min-height: 0; } .SXOp8kL2j07QmKsVUs2Q.fZAyUAb9ZtLn1vQ7ZGSw .pezgF7ApqKAz6O41foGu { border-top: 1px solid var(--line); background: var(--paper2); border-radius: 0 0 var(--r11) var(--r11); } .Hq_7LB6_41hAC5is1puu { padding: 10px 12px; } .Hq_7LB6_41hAC5is1puu + .Hq_7LB6_41hAC5is1puu { border-top: 1px solid var(--line); } .wKoW9Fy6s_J9mXRM8vbK { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; min-height: 24px; } .wWjRAd83CUhJH4q7PhXl { font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; } .r4kQRDcuEheygD2N6QIL { color: var(--mute); } .C2yaCB1ttZfQSQn73Jzy { font-weight: 400; color: var(--mute); } .NSRuRiHB3LFfxms8jSwZ { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; color: var(--mute); padding: 3px 8px; border-radius: var(--pill); font-weight: 500; } .NSRuRiHB3LFfxms8jSwZ.PoPs9p_CtcFqM6xcrMxl { background: var(--soft); color: var(--purple); } .yUhXkmR7hPYxUmOKeKVi { display: grid; grid-template-columns: 96px minmax(0, 1fr) 96px; align-items: center; gap: 12px; margin-top: 7px; } .TorfdiopeIdJGQR9BmZp { font-size: 11px; color: var(--mute); line-height: 1.25; } .wPEkNyxO4oSJjTpPM759 { text-align: right; } .Vek048nSJ8ulvp2yTh6g { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--mute); margin-top: 6px; } .Cvy8y8plnKRCK7Qbyp2C .FCSdlIWSMN3Eg_CZVSgw { margin-top: 8px; } /* la scala della pagina Metodo: nome a sinistra, traccia e poli a destra */ /* Misure di ciò che la mock rende davvero: lì `.dr` (10 / 12 di padding, filo fra una riga e l'altra) è caricato dopo `.dr-scale` e vince, quindi le scale hanno quel padding e quel filo. Interlinea 1.55 ereditata dalla pagina. */ .JJ3g21m4w3VtEWopyl5h { display: grid; grid-template-columns: minmax(130px, 0.5fr) minmax(0, 1.5fr); gap: clamp(14px, 2.5vw, 32px); align-items: center; padding: 10px 12px; line-height: 1.55; } .JJ3g21m4w3VtEWopyl5h .wWjRAd83CUhJH4q7PhXl { font-size: 15px; font-weight: 500; letter-spacing: -0.015em; } .JJ3g21m4w3VtEWopyl5h .Vek048nSJ8ulvp2yTh6g { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mute); } @media (max-width: 900px) { .JJ3g21m4w3VtEWopyl5h { grid-template-columns: minmax(0, 1fr); gap: 8px; } } @container (max-width: 560px) { .yUhXkmR7hPYxUmOKeKVi { grid-template-columns: 1fr 1fr; gap: 5px 10px; } .yUhXkmR7hPYxUmOKeKVi .FCSdlIWSMN3Eg_CZVSgw { grid-column: 1 / -1; grid-row: 2; } .v9qYUzqbdylqqH6rL1Zq .wWjRAd83CUhJH4q7PhXl { display: block; } .wPEkNyxO4oSJjTpPM759 { text-align: left; grid-row: 1; } .SCA3JCnmkLQve2YpdB2A { text-align: right; grid-row: 1; } } /* la traccia: fascia del team, pallini, marcatore della persona */ .FCSdlIWSMN3Eg_CZVSgw { position: relative; height: 20px; min-width: 0; container-type: inline-size; } .rVeyXPo0MFxtTtvnkESX { position: absolute; inset: 0; border: 1px solid var(--line2); border-radius: var(--pill); background: var(--paper); transform-origin: left; display: block; } .T9gAYWG4FRU7FADjIHAy { position: absolute; top: 3px; bottom: 3px; border-radius: var(--pill); background: color-mix(in srgb, var(--purple) 26%, transparent); display: block; } .CSXUPuVIMLlgino_qtKN .T9gAYWG4FRU7FADjIHAy { background: color-mix(in srgb, var(--fitMid) 22%, transparent); } .tOR_6mbVVWJUsu438Uyn .T9gAYWG4FRU7FADjIHAy { background: color-mix(in srgb, var(--mute) 28%, transparent); } /* la traccia bassa delle scale di Metodo */ .Emr1vQSHRqrcm1pz4Mk6 { height: 14px; } .Emr1vQSHRqrcm1pz4Mk6 .T9gAYWG4FRU7FADjIHAy { top: 2px; bottom: 2px; } .Emr1vQSHRqrcm1pz4Mk6 .CLPqQzhvuylYBDWS6e2S { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; } /* i pallini stanno al loro posto con left; il movimento parte dal centro della fascia con una traslazione in cqw (larghezza della traccia) */ .qJlQvyXrk5hx6RXBy4Bx, .wudMQXZy_h_4vjUrMZLj { position: absolute; left: calc(var(--x) * 1%); top: 0; bottom: 0; width: 0; display: block; } .CLPqQzhvuylYBDWS6e2S { position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 2px var(--paper); display: block; } .PLcK5PwcYfEBIJplMPeZ { position: absolute; left: 0; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; box-shadow: 0 0 0 1.5px var(--line3), 0 4px 10px -3px color-mix(in srgb, var(--ink) 35%, transparent); } /* ═══════════ scheda laterale ═══════════ */ .Yc7v6tCoQM50MUdefQ5Y { position: absolute; top: 44px; right: 0; bottom: 0; z-index: 25; width: min(380px, 94%); background: var(--paper); border-left: 1px solid var(--line2); box-shadow: -40px 0 80px -40px color-mix(in srgb, var(--ink) 35%, transparent); padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; scrollbar-width: thin; } .Yc7v6tCoQM50MUdefQ5Y > * { flex-shrink: 0; } .jLav5A3jiDgf7ixApZPq { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; } .I8l4nPInw2fh81HhDWAE b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.018em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .I8l4nPInw2fh81HhDWAE span { display: block; font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .W_xPALZu9CJaDAVaYNAy { width: 34px; height: 34px; border-radius: var(--r6); display: grid; place-items: center; color: var(--mute); transition: background-color var(--dFb) var(--ease), color var(--dFb) var(--ease); } .W_xPALZu9CJaDAVaYNAy:hover { background: var(--paper3); color: var(--ink); } .H2bjDppZ3wZRyMtYz69P { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--mute); } .Lqy04KNUkcJrxBH6NIvG { position: relative; display: block; } .Lqy04KNUkcJrxBH6NIvG select { width: 100%; font: inherit; font-size: 13px; color: var(--ink); background: var(--paper); border: 1px solid var(--line3); border-radius: var(--r6); padding: 8px 32px 8px 11px; min-height: 36px; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color var(--dFb) var(--ease), box-shadow var(--dFb) var(--ease); } .Lqy04KNUkcJrxBH6NIvG select:focus { outline: none; border-color: var(--purple); box-shadow: var(--ring); } .ZYAe9nBB_UZ8dfO1qpSK { position: absolute; right: 10px; top: 50%; margin-top: -7px; pointer-events: none; color: var(--mute); } .pDhSmzdBsVzKFhudmQ5w { display: flex; flex-direction: column; gap: 16px; padding: 14px; border: 1px solid var(--line2); border-radius: var(--r10); } .Cow4qhI2AqZ7nyEa9FrE { border: 1px solid var(--line2); border-radius: var(--r10); background: var(--paper2); overflow: hidden; } .pUMlsV87JJzSdM39cV4_ { font-size: 12.5px; font-weight: 500; padding: 12px 12px 2px; } .Yiw6iAhRoO2EgaJOySI1 { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 12px 4px; } .qHw9KHQzbT3MOvRXmrcv b { font-weight: 600; } .H48THXHTuOW00cMZpgMT .Hq_7LB6_41hAC5is1puu { padding: 10px 12px; } .ETTaRGcFyBo4kmdZJxo5 { display: flex; gap: 8px; align-items: flex-start; padding: 6px 12px 14px; font-size: 12.5px; color: var(--mute); line-height: 1.5; } .ETTaRGcFyBo4kmdZJxo5 .hbbfw1vYVEZ5rXiZyCzT { margin-top: 2px; } .euYL_0jGzh_rfO89Ucxw { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--mute); } ._pPwZE3psm_8gFMu8jUx { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 500; color: var(--purple); margin-top: auto; align-self: flex-start; padding: 6px 0; } ._pPwZE3psm_8gFMu8jUx .hbbfw1vYVEZ5rXiZyCzT { transition: transform var(--dFb) var(--ease); } ._pPwZE3psm_8gFMu8jUx:hover .hbbfw1vYVEZ5rXiZyCzT { transform: translateX(3px); } .fCn451uxExJQureRUQ_X { display: none; position: absolute; inset: 0; z-index: 24; background: var(--hu-color-overlay); } /* ═══════════ sul telefono: fasi a schede, una colonna alla volta ═══════════ */ ._xPHA8KbANcJq6uCxoDK { display: none; } .rFgLYajjPgQKXfn7Z0qU { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .rFgLYajjPgQKXfn7Z0qU .G7I7_dKrE4KoYwObnCWF { padding: 0; border: 0; background: none; border-radius: 0; } .rFgLYajjPgQKXfn7Z0qU .LJHMbV9f0hnIWNTakcfD, .rFgLYajjPgQKXfn7Z0qU .IYIMYpd2UC8W0v2cnZrT { padding: 10px 11px 11px; box-shadow: none; } .rFgLYajjPgQKXfn7Z0qU .IYIMYpd2UC8W0v2cnZrT { border-radius: var(--r10); border: 1px solid var(--line2); } .rFgLYajjPgQKXfn7Z0qU .nwxBAhwaZ2pyu04TDrH7 { font-size: 12px; gap: 6px; white-space: nowrap; } .rFgLYajjPgQKXfn7Z0qU .nwxBAhwaZ2pyu04TDrH7 .OtRAkBmN8LErQrTYP899, .rFgLYajjPgQKXfn7Z0qU .plxLbHHYprPsA3b8E9dI, .rFgLYajjPgQKXfn7Z0qU .Q2hUrlBnRupZxDU8xxxP, .rFgLYajjPgQKXfn7Z0qU .HIpMKXrvMrPsdsoRdwAD { display: none; } .rFgLYajjPgQKXfn7Z0qU .cjL7SHjbSwhaYZHmmJpl { gap: 5px; margin-top: 8px; } .rFgLYajjPgQKXfn7Z0qU .cBGYsH3jxMVFJvBmjngJ { grid-template-columns: 50px minmax(0, 1fr) 17px; gap: 6px; font-size: 11.5px; } .rFgLYajjPgQKXfn7Z0qU button.cBGYsH3jxMVFJvBmjngJ { padding: 1px 4px; margin: 0 -4px; width: calc(100% + 8px); } .rFgLYajjPgQKXfn7Z0qU .CXIMBy_XrHj1Ho9iEaQA { height: 6px; } @container app (max-width: 300px) { .rFgLYajjPgQKXfn7Z0qU { grid-template-columns: minmax(0, 1fr); } } ._xPHA8KbANcJq6uCxoDK .TWuFt_yO8rPcSs1H2HbB { margin: 0 -12px; padding: 1px 40px 2px 12px; scroll-padding: 0 12px; } ._66WugwgXp0W5YbWZrl0m { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 5px 5px 9px; border-radius: var(--pill); border: 1px solid var(--line2); background: var(--paper); font-size: 12px; color: var(--ink); white-space: nowrap; line-height: 1.3; transition: background-color var(--dFb) var(--ease), border-color var(--dFb) var(--ease), color var(--dFb) var(--ease); } ._66WugwgXp0W5YbWZrl0m > i { width: 7px; height: 7px; border-radius: 50%; display: block; } ._66WugwgXp0W5YbWZrl0m .pdQkWmS9f29vbUjlhqnH { font-size: 11px; color: var(--ink); background: var(--paper3); border-radius: var(--pill); padding: 1px 6px; min-width: 20px; text-align: center; } ._66WugwgXp0W5YbWZrl0m.PoPs9p_CtcFqM6xcrMxl { border-color: var(--soft); background: var(--soft); color: var(--purple); font-weight: 500; } ._66WugwgXp0W5YbWZrl0m.PoPs9p_CtcFqM6xcrMxl .pdQkWmS9f29vbUjlhqnH { background: var(--paper); color: var(--purple); } /* nell'hero le fasi sono bottoni e prendono l'altezza da tocco; nelle schermate ferme sono etichette */ button._66WugwgXp0W5YbWZrl0m { min-height: 36px; } .g5ReGOXgpbUKSEJkMbjq { display: flex; flex-direction: column; gap: 8px; } .g5ReGOXgpbUKSEJkMbjq .Z4hGvaU9w5XwpgVdKOD4 { min-height: 0; cursor: pointer; } /* la card sul telefono: chi è sopra, le due letture e la data sulla stessa riga. Niente casella e niente maniglia: al tocco non si seleziona e non si trascina */ .g5ReGOXgpbUKSEJkMbjq .Z4hGvaU9w5XwpgVdKOD4 { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px 10px; padding: 11px 12px; } .g5ReGOXgpbUKSEJkMbjq .c0pi10deje5_MVN0e3lU { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; } .g5ReGOXgpbUKSEJkMbjq .ZPOmUYInwZp1HUDfgc7R, .g5ReGOXgpbUKSEJkMbjq .ZhoTu52TH1gF6csu_Z3C { display: none; } .g5ReGOXgpbUKSEJkMbjq .kvOotXd1p5Rkcl6iMqWQ b { font-size: 13.5px; } .g5ReGOXgpbUKSEJkMbjq .kvOotXd1p5Rkcl6iMqWQ span { font-size: 11.5px; white-space: normal; line-height: 1.35; } .g5ReGOXgpbUKSEJkMbjq .xUV9hJ8nDwDr36urf42U { align-self: start; margin-top: 3px; } .g5ReGOXgpbUKSEJkMbjq .c68CdqOLQCoIcDnLDzeo { min-height: 0; justify-content: flex-end; gap: 10px; } .hBOmHdjupJg_Nr8Rhxya { align-self: center; display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 500; color: var(--purple); padding: 0 16px; min-height: 40px; border-radius: var(--pill); border: 1px solid var(--soft); background: var(--paper); margin-top: 2px; } @container app (max-width: 640px) { .dqYzYOhNG8TLBMdp7FLV { display: none; } ._xPHA8KbANcJq6uCxoDK { display: flex; flex-direction: column; gap: 12px; padding-bottom: 18px; } .xpkBjLounZoGSjI8Hnnr { flex: none; } .BsfLwGxm_Gv6oavDLQ8A { display: none; } /* come in Piattaforma: persone del team a destra del titolo, i numeri sotto */ .YwNy7CpG_3Q_BfkqOypx .ZYI4q0SNS_KRTo4pxEGQ { flex: 1; justify-content: space-between; font-size: 19px; } ._xPHA8KbANcJq6uCxoDK .X_NvN2x2WwqGnEFBPjsM { margin-top: -4px; } /* la scheda sale dal basso, come un foglio */ .Yc7v6tCoQM50MUdefQ5Y { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 88%; border-left: 0; border-top: 1px solid var(--line2); border-radius: var(--r16) var(--r16) 0 0; box-shadow: 0 -30px 60px -30px color-mix(in srgb, var(--ink) 45%, transparent); padding: 24px 16px 18px; } .Yc7v6tCoQM50MUdefQ5Y::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--line3); } .fCn451uxExJQureRUQ_X { display: block; } } /* ═══════════ movimento ═══════════ Solo transform e opacity. Le entrate partono al montaggio: - `haIntro`: la sequenza della board quando entra in vista la prima volta; - `anim`: le schermate e l'allineamento, ogni volta che compaiono. Con prefers-reduced-motion non parte niente e tutto è già al suo posto. */ @media (prefers-reduced-motion: no-preference) { .YwNy7CpG_3Q_BfkqOypx { animation: tcqH0qSdCnMz0CydAaFV 420ms var(--ease); } .Yc7v6tCoQM50MUdefQ5Y { animation: hTrxqWb0HMqpyjO85uRC var(--dState) var(--ease); } .fCn451uxExJQureRUQ_X { animation: N3sHxG8ovJDZEHSchGD2 var(--dState) var(--ease); } .mMPxsObt37ghRnw2kXAA { animation: kj_LglJy9UHNLqatLzcj 260ms var(--ease); } .g5ReGOXgpbUKSEJkMbjq .Z4hGvaU9w5XwpgVdKOD4 { animation: H_R4szZYybp9k4B7nLLw 420ms var(--ease) backwards; animation-delay: calc(var(--k, 0) * 50ms); } @container app (max-width: 640px) { .Yc7v6tCoQM50MUdefQ5Y { animation-name: PDeCsAsNnXhOmuD5pE8g; } } /* sequenza d'entrata della board */ .MtGC_m3Z_6vCRs7WQVVA .VNwFT7ayNvNbAP1x6IS9, .MtGC_m3Z_6vCRs7WQVVA .TY8tLVAaZlubpJ0grHKa { animation: N3sHxG8ovJDZEHSchGD2 500ms var(--ease) both; } .MtGC_m3Z_6vCRs7WQVVA .Owdy842kIL4fIcHzRMFg, .MtGC_m3Z_6vCRs7WQVVA .e7Fl8dfu57Qs_HIWRDqe { animation: N3sHxG8ovJDZEHSchGD2 500ms var(--ease) 60ms both; } .MtGC_m3Z_6vCRs7WQVVA .oB3qOAU6WWhlgT0cvrqq { animation: H_R4szZYybp9k4B7nLLw 600ms var(--ease) both; } .MtGC_m3Z_6vCRs7WQVVA .oB3qOAU6WWhlgT0cvrqq:nth-child(1) { animation-delay: 150ms; } .MtGC_m3Z_6vCRs7WQVVA .oB3qOAU6WWhlgT0cvrqq:nth-child(2) { animation-delay: 210ms; } .MtGC_m3Z_6vCRs7WQVVA .oB3qOAU6WWhlgT0cvrqq:nth-child(3) { animation-delay: 270ms; } .MtGC_m3Z_6vCRs7WQVVA .oB3qOAU6WWhlgT0cvrqq:nth-child(4) { animation-delay: 330ms; } .MtGC_m3Z_6vCRs7WQVVA .CXIMBy_XrHj1Ho9iEaQA i { animation: h6tsmafDmxcvxOrStovN 800ms var(--ease) both; animation-delay: calc(450ms + var(--k, 0) * 90ms); } .MtGC_m3Z_6vCRs7WQVVA .y6bd3sR9ntc8Z5WW58bA { animation: H_R4szZYybp9k4B7nLLw 600ms var(--ease) both; animation-delay: calc(450ms + var(--c, 0) * 70ms); } .MtGC_m3Z_6vCRs7WQVVA .y6bd3sR9ntc8Z5WW58bA .Z4hGvaU9w5XwpgVdKOD4 { animation: N3sHxG8ovJDZEHSchGD2 420ms var(--ease) both; animation-delay: calc(600ms + var(--c, 0) * 70ms + var(--k, 0) * 40ms); } .MtGC_m3Z_6vCRs7WQVVA .rFgLYajjPgQKXfn7Z0qU, .MtGC_m3Z_6vCRs7WQVVA .TWuFt_yO8rPcSs1H2HbB { animation: H_R4szZYybp9k4B7nLLw 600ms var(--ease) 60ms both; } .MtGC_m3Z_6vCRs7WQVVA .g5ReGOXgpbUKSEJkMbjq .Z4hGvaU9w5XwpgVdKOD4 { animation-delay: calc(200ms + var(--k, 0) * 70ms); } /* traccia: la rotaia si disegna, la fascia si apre, i pallini arrivano dal centro */ /* --base è il ritardo della scena (le composizioni partono 260 ms dopo, per lasciare entrare prima i frammenti), --t0 quello del pezzo dentro la scena */ .hXEaITlyc9jeMEkHg2_q .rVeyXPo0MFxtTtvnkESX { animation: h6tsmafDmxcvxOrStovN 500ms var(--ease) calc(var(--base, 0ms) + var(--t0, 0ms)) both; } .hXEaITlyc9jeMEkHg2_q .T9gAYWG4FRU7FADjIHAy { animation: dRa1tYbiD9q4eurv6slg 500ms var(--ease) calc(var(--base, 0ms) + var(--t0, 0ms) + 260ms) both; } .hXEaITlyc9jeMEkHg2_q .qJlQvyXrk5hx6RXBy4Bx { animation: wJuotQWjlAKpNU594V0A 500ms var(--ease) calc(var(--base, 0ms) + var(--t0, 0ms) + 700ms + var(--k, 0) * 40ms) both; } .hXEaITlyc9jeMEkHg2_q .wudMQXZy_h_4vjUrMZLj { animation: wJuotQWjlAKpNU594V0A 600ms var(--ease) calc(var(--base, 0ms) + var(--t0, 0ms) + 760ms) both; } .hXEaITlyc9jeMEkHg2_q .wAUTpjMwvBiIIqiy5Y4_ { animation: UiWJkrIrD2wRUuD1CXRp 320ms var(--ease) calc(var(--base, 0ms) + var(--t0, 0ms) + 1380ms) both; } /* barre dei fit e righe delle tabelle */ .hXEaITlyc9jeMEkHg2_q .CXIMBy_XrHj1Ho9iEaQA i { animation: h6tsmafDmxcvxOrStovN 800ms var(--ease) calc(var(--base, 0ms) + var(--t0, 0ms) + 200ms + var(--k, 0) * 90ms) both; } .hXEaITlyc9jeMEkHg2_q .Uphy_JhpPUsVDrj9r3FJ i.PoPs9p_CtcFqM6xcrMxl { animation: h6tsmafDmxcvxOrStovN 500ms var(--ease) calc(var(--base, 0ms) + 300ms + var(--k, 0) * 110ms) both; } .hXEaITlyc9jeMEkHg2_q .wMVdL3cn1ZAniMGWqZ3g { animation: N3sHxG8ovJDZEHSchGD2 500ms var(--ease) calc(var(--base, 0ms) + 300ms + var(--k, 0) * 60ms) both; } /* board ferma: le colonne da sinistra, le card in cascata dentro ogni colonna */ .hXEaITlyc9jeMEkHg2_q .y6bd3sR9ntc8Z5WW58bA { animation: GvYoJtWkOCUSpePj3cke 500ms var(--ease) calc(var(--base, 0ms) + var(--c, 0) * 70ms) both; } .hXEaITlyc9jeMEkHg2_q .y6bd3sR9ntc8Z5WW58bA .Z4hGvaU9w5XwpgVdKOD4 { animation: N3sHxG8ovJDZEHSchGD2 400ms var(--ease) calc(var(--base, 0ms) + var(--c, 0) * 70ms + 200ms + var(--k, 0) * 40ms) both; } /* schermate sul telefono: numeri, righe e fasi salgono in cascata */ .hXEaITlyc9jeMEkHg2_q .CyrfjrqPzybXwhOazM7s, .hXEaITlyc9jeMEkHg2_q .gxLpT85TWZ9KVcdvFufh, .hXEaITlyc9jeMEkHg2_q .g5ReGOXgpbUKSEJkMbjq .Z4hGvaU9w5XwpgVdKOD4, .hXEaITlyc9jeMEkHg2_q .gizohKOO4CEdXmL0jnFI, .hXEaITlyc9jeMEkHg2_q .TWuFt_yO8rPcSs1H2HbB { animation: o4GsCVL8EXUq8crD4X27 500ms var(--ease) calc(var(--base, 0ms) + 160ms + var(--k, 0) * 70ms) both; } /* composizioni: il primario entra per primo, il secondario 120 ms dopo */ .hXEaITlyc9jeMEkHg2_q .Uw9bQd9Hf4ssN7r9EKl5 { animation: H_R4szZYybp9k4B7nLLw 700ms var(--ease) both; } .hXEaITlyc9jeMEkHg2_q .hv0YimSurkSaDTU7rXYV { animation-delay: 120ms; } /* la candidata del passo 03 è centrata con un translate: entra senza perderlo */ @media (min-width: 901px) { .hXEaITlyc9jeMEkHg2_q .cXYtT_uN32NuzT7r8xio .hv0YimSurkSaDTU7rXYV { animation-name: xEo5vqK3fkoNSjsdbszh; } } /* domande del kit: la riga "Perché" arriva 200 ms dopo la domanda, come un pensiero che segue */ .hXEaITlyc9jeMEkHg2_q .gyewlW0dLFYwBrnsEQzD { animation: yMFGwx5VJz4Dtza82pIC 600ms var(--ease) calc(var(--base, 0ms) + var(--k, 0) * 140ms) both; } .hXEaITlyc9jeMEkHg2_q .lBlZDCKjcS2b1I54Ewd2 { animation: N3sHxG8ovJDZEHSchGD2 500ms var(--ease) calc(var(--base, 0ms) + var(--k, 0) * 140ms + 200ms) both; } /* il team di destinazione: l'anello arriva quando il blocco è in scena */ .hXEaITlyc9jeMEkHg2_q .EeqYVzsFUuR3oK5hEXPS { animation: W2CNeKFrNEYTYNqtLESc 700ms var(--ease) calc(var(--base, 0ms) + 700ms) both; } /* composizioni sul telefono: primario, poi il secondario che gli si appoggia, il mazzo in cascata */ .hXEaITlyc9jeMEkHg2_q .ipkqiv7C2c3q1wNw2klY { animation: zllIjLqA4eBlZ7Tm4www 700ms var(--ease) both; } .hXEaITlyc9jeMEkHg2_q .gkxwP7qd9io6EdTb7RMk { animation: zllIjLqA4eBlZ7Tm4www 600ms var(--ease) calc(var(--base, 0ms) + 420ms) both; } .hXEaITlyc9jeMEkHg2_q .VvaanTZ72GhsvLfXUmZK { animation: NQzofIubBcJLwh8f93Ff 700ms var(--ease) calc(var(--base, 0ms) + var(--d, 0) * 110ms) both; } /* la scena aspetta fuori vista: tutto fermo al primo fotogramma (quindi nascosto) finché l'ospite non toglie `animPre` */ .DUmxEIZaRUyYLdBWBF7G, .DUmxEIZaRUyYLdBWBF7G * { animation-play-state: paused !important; } /* grafico: prima la curva viola, la rosa 120 ms dopo, poi l'area, poi i punti */ .hXEaITlyc9jeMEkHg2_q .HqmeZQjdcsR6gsuJ9Th_ { animation: YhoovmKmIs4LOU3jUmvw 1200ms var(--ease) 200ms both; } .hXEaITlyc9jeMEkHg2_q .vUA3X87ccKc9HEsvFVjM { animation-delay: 320ms; } .hXEaITlyc9jeMEkHg2_q .s6VLF0ODgtbIBPZWMBBB { animation: N3sHxG8ovJDZEHSchGD2 700ms var(--ease) 1000ms both; } .hXEaITlyc9jeMEkHg2_q .MyrYrreBlhZPwwogKWiw { animation: N3sHxG8ovJDZEHSchGD2 300ms var(--ease) calc(300ms + var(--k, 0) * 180ms) both; } } @keyframes H_R4szZYybp9k4B7nLLw { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes N3sHxG8ovJDZEHSchGD2 { from { opacity: 0; } to { opacity: 1; } } @keyframes tcqH0qSdCnMz0CydAaFV { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes kj_LglJy9UHNLqatLzcj { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } } @keyframes h6tsmafDmxcvxOrStovN { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes dRa1tYbiD9q4eurv6slg { from { transform: scaleX(0); } to { transform: none; } } @keyframes YhoovmKmIs4LOU3jUmvw { from { clip-path: inset(-12px 100% -12px -12px); } to { clip-path: inset(-12px -12px -12px -12px); } } @keyframes hTrxqWb0HMqpyjO85uRC { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes PDeCsAsNnXhOmuD5pE8g { from { transform: translateY(48px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes wJuotQWjlAKpNU594V0A { from { transform: translateX(calc((var(--from) - var(--x)) * 1cqw)); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes GvYoJtWkOCUSpePj3cke { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes o4GsCVL8EXUq8crD4X27 { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes yMFGwx5VJz4Dtza82pIC { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes W2CNeKFrNEYTYNqtLESc { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } } @keyframes zllIjLqA4eBlZ7Tm4www { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes NQzofIubBcJLwh8f93Ff { from { opacity: 0; transform: translateY(calc(var(--d) * 15px + 28px)) scale(calc(1 - var(--d) * 0.05)); } to { opacity: 1; transform: translateY(calc(var(--d) * 15px)) scale(calc(1 - var(--d) * 0.05)); } } @keyframes xEo5vqK3fkoNSjsdbszh { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes UiWJkrIrD2wRUuD1CXRp { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } } /* ═══════════════════════════════════════════════════════════════════ Il form nuova posizione: campi veri, che si mettono a fuoco. ═══════════════════════════════════════════════════════════════════ */ .LHM1wf8zPKvreQ00CFGX { min-width: 0; } .WnYMRucr4wCSiHqgqo1p { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } .LVfNnoAOqT8C42JDWGJa { display: grid; gap: 12px; align-items: end; } .LVfNnoAOqT8C42JDWGJa.duFLZuKF2a8BfO8VxFF5 { grid-template-columns: minmax(0, 1fr); } .LVfNnoAOqT8C42JDWGJa.pONhiz_grmJw86B3egMK { grid-template-columns: repeat(3, minmax(0, 1fr)); } .LVfNnoAOqT8C42JDWGJa.Jk3h7Pxr7SBMIs0fQCcj { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .LVfNnoAOqT8C42JDWGJa.tRLM_DFjv3AjfzdP5Qz3 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); margin-top: 6px; } .Cvii80GY1ABwDE05GKyL { min-width: 0; } .zJBLg7WEG2WR2S6AiXsk { color: var(--mute); padding-bottom: 9px; } .vZymSvAvzFCbacTYsQ2p { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; } .ZXMldyUL01Gdtx9AB66V { font-size: 12.5px; font-weight: 500; color: var(--ink); display: flex; gap: 8px; align-items: baseline; justify-content: space-between; padding: 0; } .mkoXZcTl0avfgRdeZqI1 { font-size: 11.5px; font-weight: 400; color: var(--mute); margin-right: auto; } .uQ9qohEmzA2Bur7SQAZ0 { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 400; color: var(--mute); } /* l'etichetta resta per chi legge con lo schermo, a vista basta il prefisso */ .dyyH3aWajPgHfoPSVK4w .ZXMldyUL01Gdtx9AB66V { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .Y4WYz0iefsIjj2KpJw1U { position: relative; display: block; } .Y4WYz0iefsIjj2KpJw1U input, .Lqy04KNUkcJrxBH6NIvG select { width: 100%; font: inherit; font-size: 13px; color: var(--ink); background: var(--paper); border: 1px solid var(--line3); border-radius: 9px; padding: 8px 11px; min-height: 36px; transition: border-color var(--dFb) var(--ease), box-shadow var(--dFb) var(--ease); } /* lo spazio della freccia: va ridetto qui, la regola sopra lo azzererebbe */ .Lqy04KNUkcJrxBH6NIvG select { padding-right: 32px; } .Y4WYz0iefsIjj2KpJw1U input::placeholder { color: var(--ghostC); } .Y4WYz0iefsIjj2KpJw1U input:focus, .Lqy04KNUkcJrxBH6NIvG select:focus { outline: none; border-color: var(--purple); box-shadow: var(--ring); } .oTwjlgCuYdXjw8JJrbMM input { padding-left: 46px; } .nV7k6MZviyNHnVKJmv7F select { padding-left: 38px; } .k0U1EouX7IC5Jzj1MPBY { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; } .ToBov96AXTYh0bhYVPzc { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--mute); pointer-events: none; } .MoMel1343cd60YS9u3Rb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .F9_oExyk2wT7nfp4yj1Z { position: relative; display: block; } .F9_oExyk2wT7nfp4yj1Z input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; } .F9_oExyk2wT7nfp4yj1Z span { display: flex; align-items: center; justify-content: center; border: 1px solid var(--line3); border-radius: 9px; padding: 6px; font-size: 12.5px; min-height: 36px; color: var(--ink); transition: border-color var(--dFb) var(--ease), background-color var(--dFb) var(--ease), color var(--dFb) var(--ease); } .F9_oExyk2wT7nfp4yj1Z input:checked + span { border-color: var(--purple); background: var(--purpleSoft); color: var(--purple); font-weight: 500; } .F9_oExyk2wT7nfp4yj1Z input:focus-visible + span { outline: 2px solid var(--purple); outline-offset: 2px; } /* al tocco i controlli veri prendono i 44 px, come nella mock */ @media (pointer: coarse) { .Y4WYz0iefsIjj2KpJw1U input, .Lqy04KNUkcJrxBH6NIvG select, .F9_oExyk2wT7nfp4yj1Z span, .aHtBp9If0xKGffYqiTdY { min-height: 44px; } } .mcZyIzXlI3Jr0iLVQqqP { position: relative; } .xomk8ospMNRGNr2A_uF_ { position: relative; margin-top: 12px; } /* l'anello di attenzione: qui si decide il profilo su cui verrà letto il fit */ .EeqYVzsFUuR3oK5hEXPS { position: absolute; inset: -5px; border-radius: 13px; border: 2px solid var(--purpleLine); pointer-events: none; display: block; } /* ═══════════════════════════════════════════════════════════════════ Il kit colloquio. ═══════════════════════════════════════════════════════════════════ */ .ji1bneSRu1AZl7adlaC2 { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--purple); background: var(--purpleSoft); border: 1px solid var(--purpleLine); border-radius: var(--r6); padding: 2px 7px; letter-spacing: 0; } .Qn_6RCucVpUMsMnkNuNi { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; } .gyewlW0dLFYwBrnsEQzD { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; background: var(--paper2); border: 1px solid var(--line); border-radius: var(--r10); padding: 12px 13px; } .bO2cVFNmLzMourABT0dI { width: 13px; height: 13px; border: 1px solid var(--line2); border-radius: 4px; margin-top: 2px; display: block; background: var(--paper); } .X6MNKvjKwd9nlxyNACID { display: inline-flex; gap: 5px; align-items: center; font-size: 11.5px; font-weight: 500; } .tzwFlK7hM96dpRdpW0Zc { color: var(--techFg); } .t3FOFbwZ8o2AR2vxUyfQ { color: var(--purple); } .bm5Ud1NPBrSPWD_kSDgK { font-size: 12.5px; color: var(--ink); margin-top: 5px; line-height: 1.52; } .lBlZDCKjcS2b1I54Ewd2 { font-size: 11.5px; color: var(--mute); margin-top: 6px; line-height: 1.5; } /* ═══════════════════════════════════════════════════════════════════ Le composizioni: frammenti staccati dal contesto, uno primario. ═══════════════════════════════════════════════════════════════════ */ .AbhnDpV1um3aTNDXPu52 { position: relative; border-radius: var(--r20); border: 1px solid var(--line); overflow: hidden; margin: 0; background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--purple) 12%, var(--paper)) 0%, transparent 55%), linear-gradient(160deg, color-mix(in srgb, var(--purple) 5%, var(--paper)) 0%, var(--paper) 45%, var(--paper2) 100%); height: clamp(460px, 43vw, 580px); font-size: 13px; color: var(--ink); isolation: isolate; /* nella mock la scena eredita interlinea e tracking della pagina (1.55 e -0.011em su 16 px): fissati qui, perché dentro Webflow la pagina è un'altra */ line-height: 1.55; letter-spacing: -0.176px; box-shadow: var(--hu-shadow-panel); --base: 260ms; } .Uw9bQd9Hf4ssN7r9EKl5 { position: absolute; border-radius: var(--r14); } .uDqlv5fmPkF2QqMOmYD8 { container-type: inline-size; container-name: frag; } .Uw9bQd9Hf4ssN7r9EKl5 > .LJHMbV9f0hnIWNTakcfD, .Uw9bQd9Hf4ssN7r9EKl5 > .G7I7_dKrE4KoYwObnCWF { box-shadow: var(--shFrag); } .hv0YimSurkSaDTU7rXYV > .LJHMbV9f0hnIWNTakcfD, .hv0YimSurkSaDTU7rXYV > .G7I7_dKrE4KoYwObnCWF, .hv0YimSurkSaDTU7rXYV > .Z4hGvaU9w5XwpgVdKOD4 { box-shadow: var(--shFragBack); filter: saturate(0.94); } /* taglio pulito: il primario esce dal riquadro sfumando, mai tranciato di netto */ .EsE_RfZ3ffWkA0BRrvpI { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 72%, transparent 97%); mask-image: linear-gradient(to bottom, #000 0, #000 72%, transparent 97%); } .YLlelpjxcqNrGmHgbMY1 .uDqlv5fmPkF2QqMOmYD8 { left: 15%; right: 4.5%; top: 32px; } .YLlelpjxcqNrGmHgbMY1 .hv0YimSurkSaDTU7rXYV { left: 3%; bottom: 22px; width: min(272px, 50%); } .Iz62LIksq0jXCYN_pTLp .uDqlv5fmPkF2QqMOmYD8 { left: 5%; right: 12%; top: 28px; } .Iz62LIksq0jXCYN_pTLp .hv0YimSurkSaDTU7rXYV { right: 3.5%; bottom: 18px; width: min(380px, 66%); } .cXYtT_uN32NuzT7r8xio .uDqlv5fmPkF2QqMOmYD8 { left: 5%; right: 5%; top: clamp(80px, 8.4vw, 118px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cXYtT_uN32NuzT7r8xio .uDqlv5fmPkF2QqMOmYD8 > .LJHMbV9f0hnIWNTakcfD { padding: 18px 20px 22px; box-shadow: var(--shFrag); } .cXYtT_uN32NuzT7r8xio .nwxBAhwaZ2pyu04TDrH7 { font-size: 14px; } .cXYtT_uN32NuzT7r8xio .cjL7SHjbSwhaYZHmmJpl { gap: 11px; margin-top: 14px; } .cXYtT_uN32NuzT7r8xio .cBGYsH3jxMVFJvBmjngJ { font-size: 13.5px; grid-template-columns: 64px minmax(0, 1fr) 26px; } .cXYtT_uN32NuzT7r8xio .CXIMBy_XrHj1Ho9iEaQA { height: 9px; } .cXYtT_uN32NuzT7r8xio .Q2hUrlBnRupZxDU8xxxP { font-size: 12px; margin-top: 12px; } .cXYtT_uN32NuzT7r8xio .hv0YimSurkSaDTU7rXYV { left: 50%; top: clamp(262px, 24.6vw, 304px); width: min(320px, 62%); transform: translateX(-50%); } .NStgCKbD5B7S1dtBKr6p .uDqlv5fmPkF2QqMOmYD8 { left: 6%; right: 6%; top: 32px; } /* il profilo da solo (pagina Metodo): la scena cresce col pannello, niente taglio */ .R5EHn1pHtx0dXJE1ezXz { height: auto; padding: clamp(20px, 3vw, 40px); --base: 200ms; } .R5EHn1pHtx0dXJE1ezXz .Uw9bQd9Hf4ssN7r9EKl5 { position: relative; inset: auto; } .Uw9bQd9Hf4ssN7r9EKl5 .LJHMbV9f0hnIWNTakcfD { padding: 16px 18px; } .Uw9bQd9Hf4ssN7r9EKl5 .bm5Ud1NPBrSPWD_kSDgK { font-size: 13.5px; } .Uw9bQd9Hf4ssN7r9EKl5 .lBlZDCKjcS2b1I54Ewd2 { font-size: 12px; } .Uw9bQd9Hf4ssN7r9EKl5 .izNB4SiB0TY0rMcLW5_Y { font-size: 14px; } .plxLbHHYprPsA3b8E9dI { color: var(--ghostC); } .Q2hUrlBnRupZxDU8xxxP { font-size: 11.5px; color: var(--mute); margin-top: 9px; display: flex; gap: 5px; align-items: center; } .eYeE0OQC736zIOmXVJ7O { max-width: 100%; } /* Sotto i 900 px la scena non regge la sovrapposizione: i frammenti tornano in colonna, uno sotto l'altro, e il riquadro cresce con loro. */ @media (max-width: 900px) { .AbhnDpV1um3aTNDXPu52 { height: auto; padding: 22px 16px 24px; display: flex; flex-direction: column; gap: 14px; } .AbhnDpV1um3aTNDXPu52 .Uw9bQd9Hf4ssN7r9EKl5 { position: relative; inset: auto; width: auto; transform: none; } .AbhnDpV1um3aTNDXPu52 .EsE_RfZ3ffWkA0BRrvpI { -webkit-mask-image: none; mask-image: none; } .cXYtT_uN32NuzT7r8xio .uDqlv5fmPkF2QqMOmYD8 { grid-template-columns: minmax(0, 1fr); } .YLlelpjxcqNrGmHgbMY1 .hv0YimSurkSaDTU7rXYV, .Iz62LIksq0jXCYN_pTLp .hv0YimSurkSaDTU7rXYV, .cXYtT_uN32NuzT7r8xio .hv0YimSurkSaDTU7rXYV { margin: -38px 0 0 auto; width: min(86%, 320px); z-index: 2; } .YLlelpjxcqNrGmHgbMY1 .hv0YimSurkSaDTU7rXYV { margin-left: 0; } .LVfNnoAOqT8C42JDWGJa.pONhiz_grmJw86B3egMK, .LVfNnoAOqT8C42JDWGJa.Jk3h7Pxr7SBMIs0fQCcj { grid-template-columns: minmax(0, 1fr); } } /* ═══════════════════════════════════════════════════════════════════ I pezzi che servono alle schermate ferme della pagina Piattaforma. Portati da styles/product.css e styles/app.css del sito di riferimento. ═══════════════════════════════════════════════════════════════════ */ /* la shell ferma: qui l'altezza non è contesa come nella board dell'hero, la pagina cresce col contenuto e ha aria in fondo */ .cruJrHs0exhtsI9greDr .dJI6UXHC5OCo5FjiNZjJ { overflow: visible; padding: 18px 20px 24px; } /* la colonna laterale della shell (il pannello di Meso sulla scheda) */ .b6GNGFSHnAAjfhh62sZA { font-size: 12px; color: var(--mute); } /* legenda dei livelli di fit */ .RHeesqWKf_zC66DMGwnb { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--mute); flex-wrap: wrap; } .RHeesqWKf_zC66DMGwnb span { display: inline-flex; align-items: center; gap: 5px; } .RHeesqWKf_zC66DMGwnb .BfwHeWeU9bhIWvtcF_Om, .h8Dn3kFkkqB0eavwO5O7 .BfwHeWeU9bhIWvtcF_Om { width: 1px; height: 12px; background: var(--line2); } .dua0WUSuR8CH5AZYTRA5 { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .YGhbVqWnmpmobrxV7C2C { background: var(--purple); } .OI1C9LNDiusWsBj1HiPk { background: var(--fitMid); } .H6p0hI455e9gDQwg3vGW { background: var(--ghostC); } /* interruttore e ricerca della barra dei filtri, in versione ferma */ .Uh0colQkfWhVJwvRD7yH { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .XEPJQMAc4PhqMDmdWRVG { width: 28px; height: 16px; border-radius: var(--pill); background: var(--purple); position: relative; display: inline-block; } .XEPJQMAc4PhqMDmdWRVG i { position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); } /* ─────────── scheda candidato ─────────── */ .L18LOGBQlzpGmGQ1ZVFM { display: grid; grid-template-columns: 250px minmax(0, 1fr) 248px; gap: 12px; align-items: start; } .GXPDMKwzsSHLWxuGGHle, .xdcKy77E7a9umYdpAIZr { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .fXyNa53MewxJwE822F0j { display: flex; flex-direction: column; gap: 10px; } .HYhlUidZtljYvYuAi60Q { display: flex; align-items: center; gap: 11px; } .HYhlUidZtljYvYuAi60Q b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.018em; } .HYhlUidZtljYvYuAi60Q span span { display: block; font-size: 12px; color: var(--mute); } .fXyNa53MewxJwE822F0j .ji1bneSRu1AZl7adlaC2 { align-self: flex-start; } .nqizEl1pITNWgUIK51N7 { font-size: 12.5px; color: var(--ink); line-height: 1.55; } .n2tjwcUdGZfSwJaav77e { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ink); } .n2tjwcUdGZfSwJaav77e li { display: flex; align-items: center; gap: 7px; min-width: 0; } .n2tjwcUdGZfSwJaav77e li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .n2tjwcUdGZfSwJaav77e .akPaB6IG2VwrKnt3kJCV { color: var(--mute); } .n2tjwcUdGZfSwJaav77e .hbbfw1vYVEZ5rXiZyCzT { color: var(--mute); flex: 0 0 auto; } .NPGg_7gLVS4IxGNwUicT { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line2); border-radius: var(--r10); padding: 7px 10px; font-size: 12.5px; } .NPGg_7gLVS4IxGNwUicT > i { width: 7px; height: 7px; border-radius: 50%; background: var(--fitMid); display: block; } .NPGg_7gLVS4IxGNwUicT .hbbfw1vYVEZ5rXiZyCzT { margin-left: auto; color: var(--mute); } .Uq8N4PDzAJHRws8EFF4c { display: flex; justify-content: center; align-items: center; gap: 7px; background: var(--purple); color: var(--paper); border-radius: var(--r10); padding: 8px; font-size: 12.5px; font-weight: 500; } .OHrVWY9cYfo1nsdPAWmb { border: 1px solid var(--line2); border-radius: var(--r12); background: var(--paper); min-width: 0; } /* schede interne e segmentati */ .OcfjNHfYeXxeWCSj7fE_ { display: flex; gap: 2px; background: var(--paper3); border-radius: var(--r10); padding: 3px; align-self: flex-start; max-width: 100%; overflow: hidden; } .OcfjNHfYeXxeWCSj7fE_ span { padding: 5px 10px; border-radius: 8px; font-size: 12.5px; color: var(--mute); white-space: nowrap; } .OcfjNHfYeXxeWCSj7fE_ .PoPs9p_CtcFqM6xcrMxl { background: var(--paper); color: var(--ink); box-shadow: var(--shCard); font-weight: 500; } .Ys2EWJHCgUbWVy755Fsv { display: inline-flex; gap: 3px; border: 1px solid var(--line2); border-radius: 8px; padding: 2px; font-size: 11.5px; } .Ys2EWJHCgUbWVy755Fsv span { padding: 3px 8px; border-radius: 6px; color: var(--mute); } .Ys2EWJHCgUbWVy755Fsv .PoPs9p_CtcFqM6xcrMxl { background: var(--soft); color: var(--purple); font-weight: 500; } /* la sintesi */ .mFZ7eSCS17eiCLD94KD8 { background: var(--soft); border-radius: var(--r10); padding: 11px 13px; margin-top: 10px; } .mFZ7eSCS17eiCLD94KD8 p { font-size: 12.5px; color: var(--ink); line-height: 1.55; } .jBDs_C8hA01uhwES7wbi { display: flex; align-items: center; gap: 6px; color: var(--purple); font-weight: 500; margin-bottom: 5px; } .eHlG9WHs0trZOcLtE8Qg { font-size: 11.5px; color: var(--mute); margin-top: 10px; } /* l'allineamento: stessa impaginazione del profilo culturale del team */ .h8Dn3kFkkqB0eavwO5O7 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--mute); margin-top: 12px; } .h8Dn3kFkkqB0eavwO5O7 span { display: inline-flex; align-items: center; gap: 6px; } .smSaB8vEntLJD6KgYrBQ { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .KkNt0492A3YtKF7b0_nt.oVMTNOHBCAJOLRHVdJDI { color: var(--purple); border-color: var(--purpleLine); background: var(--purpleSoft); } .z70AZ5vuo02krM_bdHGb { font-size: 11.5px; color: var(--mute); margin-top: 12px; } /* ─────────── il pannello di Meso ─────────── */ .TqoFaq0kM_M_CzgBWM64 { display: flex; flex-direction: column; height: 100%; min-height: 420px; padding: 12px; font-size: 12.5px; } .jxcCu5ne881Q3tdS6XDl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--paper3); border-radius: var(--r10); padding: 3px; } .jxcCu5ne881Q3tdS6XDl span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px; border-radius: 8px; color: var(--mute); } .jxcCu5ne881Q3tdS6XDl .PoPs9p_CtcFqM6xcrMxl { background: var(--paper); color: var(--ink); box-shadow: var(--shCard); } .rWzf2VYPO7nJQH0e0NZm { display: flex; align-items: center; gap: 4px; margin-top: 12px; font-weight: 500; } .DeSDBV2zYkUbvgJaRFkM { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 6px 12px; flex: 1; justify-content: center; } .RkbEk60TFk224YD_zhnK { width: 38px; height: 38px; border-radius: var(--r11); background: var(--soft); color: var(--purple); display: grid; place-items: center; } .MVtFlEl7TqnJOJau6oBQ { font-size: 15px; font-weight: 500; margin-top: 10px; letter-spacing: -0.018em; } .ljY26fIbclJH_NZZIABg { color: var(--mute); margin-top: 4px; max-width: 26ch; } .yUcAgzpntylfHJJbSf7R { font-size: 11.5px; color: var(--mute); margin-top: 18px; } .TtnVY5mfgux9y2YUNuil { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; width: 100%; } .TtnVY5mfgux9y2YUNuil li { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line2); border-radius: 8px; padding: 7px 9px; text-align: left; font-size: 12px; color: var(--ink); } .C__lrpTKW6LDDuF5mIbb { border: 1px solid var(--line2); border-radius: var(--r12); padding: 9px 10px; } .L_eI1HI2rCxnw69KKhdy { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--mute); } .L_eI1HI2rCxnw69KKhdy b { color: var(--ink); font-weight: 500; } .TIBjUhehoBEcee00ZWv9 { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 8px; min-height: 44px; color: var(--mute); } .dXm0aFoAr40bxpeLcpfc { width: 26px; height: 26px; border-radius: 8px; background: var(--purpleLine); color: var(--paper); display: grid; place-items: center; } /* sotto i 1060 px di cornice la scheda diventa una colonna sola */ @container app (max-width: 1060px) { .L18LOGBQlzpGmGQ1ZVFM { grid-template-columns: 230px minmax(0, 1fr); } .OHrVWY9cYfo1nsdPAWmb { display: none; } } @container app (max-width: 760px) { .L18LOGBQlzpGmGQ1ZVFM { grid-template-columns: minmax(0, 1fr); } .GXPDMKwzsSHLWxuGGHle { display: grid; grid-template-columns: 1fr 1fr; } .fXyNa53MewxJwE822F0j { grid-column: 1 / -1; } } @container app (max-width: 520px) { .GXPDMKwzsSHLWxuGGHle { grid-template-columns: 1fr; } .n2tjwcUdGZfSwJaav77e, .nqizEl1pITNWgUIK51N7 { display: none; } } /* ═══════════════════════════════════════════════════════════════════ Le schermate sul telefono. Ogni schermata ha una versione pensata per 360 px: testo a grandezza vera, una colonna, un punto focale, tagliata in basso con una sfumatura. Lo scambio è qui in CSS, quindi vale anche senza JavaScript e la versione nascosta esce dall'albero accessibile. Portate da styles/mobile.css del riferimento. ═══════════════════════════════════════════════════════════════════ */ .wri3dt_pBRT50gJodsV0 { display: none; } @media (max-width: 760px) { .Tvax_7JdlR5IAupkVdrJ { display: none; } .wri3dt_pBRT50gJodsV0 { display: block; } } /* la finestra dell'app sul telefono */ .XNI2F8B5axryaAp88gV3 { margin: 0; border-radius: var(--r16); background: var(--paper); border: 1px solid var(--line2); overflow: hidden; box-shadow: var(--hu-shadow-panel); container-type: inline-size; container-name: app; text-align: left; color: var(--ink); font-size: 13px; line-height: 1.45; letter-spacing: -0.008em; } .XNI2F8B5axryaAp88gV3 .voGucIxKBzkDBBuqtFKV { height: 30px; padding: 0 12px; } .XNI2F8B5axryaAp88gV3 .t5q3a8T5GQNtGQZRy9uO, .XNI2F8B5axryaAp88gV3 .y4ZOD2BjdqU9JmVsDy7b { width: 38px; } .XNI2F8B5axryaAp88gV3 .t5q3a8T5GQNtGQZRy9uO { gap: 5px; } .XNI2F8B5axryaAp88gV3 .t5q3a8T5GQNtGQZRy9uO i { width: 7px; height: 7px; } .yMi5bT9G3kb1fR8DCJd9 { height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); } .JjeakNOj74dMjSZzuI9g { display: flex; align-items: center; font-size: 12px; color: var(--mute); min-width: 0; white-space: nowrap; overflow: hidden; } /* si vedono le ultime due briciole; se non entrano, cede la penultima */ .JjeakNOj74dMjSZzuI9g > span { display: inline-block; white-space: nowrap; flex: 0 0 auto; } .JjeakNOj74dMjSZzuI9g > span .hbbfw1vYVEZ5rXiZyCzT { display: inline-block; vertical-align: -1.5px; margin: 0 5px; } .JjeakNOj74dMjSZzuI9g > span:not(:nth-last-child(-n + 2)) { display: none; } .JjeakNOj74dMjSZzuI9g > span:nth-last-child(2) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .JjeakNOj74dMjSZzuI9g > span:nth-last-child(2) > .hbbfw1vYVEZ5rXiZyCzT:first-child { display: none; } .JjeakNOj74dMjSZzuI9g > span:last-child { color: var(--ink); font-weight: 500; } /* la finestra sul telefono è un contenitore `app` stretto, e lì il badge di Meso sparirebbe come nella shell: qui invece resta, come nella mock */ .XNI2F8B5axryaAp88gV3 .n0cZPnhotu3UKfO8Zwv_ { display: inline-flex; flex: 0 0 auto; font-size: 11.5px; padding: 3px 8px; } .NdN7VPsX0HzgrZ8rtLdg { height: var(--mh, 560px); overflow: hidden; padding: 16px 14px 0; display: flex; flex-direction: column; gap: 12px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent calc(100% - 8px)); mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent calc(100% - 8px)); } .NdN7VPsX0HzgrZ8rtLdg > * { flex-shrink: 0; } .f5s2mEAu5spQl5aHVXXR { width: 28px; height: 28px; border-radius: 8px; background: var(--soft); color: var(--purple); display: grid; place-items: center; flex: 0 0 auto; } .eDUVlOqcvUdsbFW3jxVw { display: inline-flex; align-items: center; gap: 3px; border-radius: var(--pill); font-size: 10.5px; line-height: 1.5; padding: 0 6px; background: var(--warnSoft); color: var(--warnFg); font-weight: 500; } .isxqwEu5BOQkdUAN2k6p { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .besuR5BS_bcrPagbF2ck { font-size: 19px; font-weight: 500; letter-spacing: -0.026em; line-height: 1.2; color: var(--ink); display: flex; align-items: center; gap: 8px; } .KHCf0QY9f9RZLB9yrciY { width: 32px; height: 32px; border-radius: var(--r10); background: var(--purple); color: var(--paper); display: grid; place-items: center; flex: 0 0 auto; } .X_NvN2x2WwqGnEFBPjsM { font-size: 12.5px; color: var(--mute); margin-top: -6px; } .X_NvN2x2WwqGnEFBPjsM b { color: var(--ink); font-weight: 500; } /* dashboard */ .iC0CbUTrLmAItWss3ApO { border: 1px solid var(--line2); border-radius: var(--r12); background: var(--paper); } .CyrfjrqPzybXwhOazM7s { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 11px 12px; } .CyrfjrqPzybXwhOazM7s + .CyrfjrqPzybXwhOazM7s { border-top: 1px solid var(--line); } .Nlh5JHdrlyC8hyrMBoWn b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.3; } .Nlh5JHdrlyC8hyrMBoWn > span { display: block; font-size: 12px; color: var(--mute); line-height: 1.35; margin-top: 2px; } .iio6FCUGWWCE1XqXQWwv { font-size: 25px; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); line-height: 1; } .j1BM_kg9L67IaKJPSCiQ { padding: 13px 12px 12px; } .j1BM_kg9L67IaKJPSCiQ .Nc7FX6BhVLCMQAbRPGGC { margin-top: 8px; } .j1BM_kg9L67IaKJPSCiQ .MZ262LqJfJkQzQsY8Kvn { grid-template-columns: 20px minmax(0, 1fr); column-gap: 6px; margin-top: 10px; } .j1BM_kg9L67IaKJPSCiQ .FcPsvq4GRDWR8tqgBtRn, .j1BM_kg9L67IaKJPSCiQ .bhKwB6V2DI4NWLpzdK4U { height: 132px; } /* posizioni */ .Ph1qj1M0DxNpQ7dI2xQE { display: flex; gap: 8px; overflow-x: auto; margin: 0 -14px; padding: 0 14px 2px; scroll-snap-type: x mandatory; scroll-padding: 0 14px; scrollbar-width: none; } .Ph1qj1M0DxNpQ7dI2xQE::-webkit-scrollbar { display: none; } .gxLpT85TWZ9KVcdvFufh { flex: 0 0 148px; scroll-snap-align: start; border: 1px solid var(--line2); border-radius: var(--r12); padding: 10px 11px; background: var(--paper); display: flex; flex-direction: column; gap: 4px; } .XHCD1G0cbYtrgKnc7qfc { display: flex; gap: 5px; align-items: center; font-size: 11.5px; color: var(--ink); line-height: 1.3; } .XHCD1G0cbYtrgKnc7qfc .hbbfw1vYVEZ5rXiZyCzT { color: var(--purple); flex: 0 0 auto; } .gxLpT85TWZ9KVcdvFufh b { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; } .gxLpT85TWZ9KVcdvFufh small { font-size: 12px; color: var(--mute); font-weight: 400; letter-spacing: 0; } .kn7FuipWy2zsp4mYhjao { font-size: 11.5px; color: var(--mute); line-height: 1.35; } .xtEFhDmG8Bf3eHdHdKbz { border: 1px solid var(--line2); border-radius: var(--r12); background: var(--paper); } .PQJriEfYwI9zxuQqibDo { display: flex; flex-direction: column; gap: 4px; padding: 11px 12px; } .PQJriEfYwI9zxuQqibDo + .PQJriEfYwI9zxuQqibDo { border-top: 1px solid var(--line); } .gpqvE5h8gt4v_TVEJQAc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gpqvE5h8gt4v_TVEJQAc b { font-size: 13.5px; font-weight: 500; color: var(--ink); letter-spacing: -0.012em; } .oqMAtISQOS54j3EqM1Uw { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--mute); } .oqMAtISQOS54j3EqM1Uw b { color: var(--ink); font-weight: 500; } .aoJzaV5Y5qZIXbWRo4sr { display: inline-flex; align-items: center; gap: 3px; color: var(--purple); font-weight: 500; background: var(--purpleSoft); border-radius: var(--r6); padding: 0 5px; } .W4DGJU5nrs54tN2Ugm0D { font-size: 11.5px; color: var(--mute); } /* candidature: le due letture affiancate e le fasi a schede. Le fasi scorrono di lato: la sfumatura a destra dice che ce ne sono altre, e il margine in fondo lascia uscire dalla sfumatura anche l'ultima */ .TWuFt_yO8rPcSs1H2HbB { display: flex; gap: 5px; overflow-x: auto; margin: 0 -14px; padding: 1px 40px 2px 14px; scroll-padding: 0 14px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent 2px, #000 16px, #000 calc(100% - 44px), transparent calc(100% - 6px)); mask-image: linear-gradient(to right, transparent 2px, #000 16px, #000 calc(100% - 44px), transparent calc(100% - 6px)); } .TWuFt_yO8rPcSs1H2HbB::-webkit-scrollbar { display: none; } ._66WugwgXp0W5YbWZrl0m { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 5px 5px 9px; border-radius: var(--pill); border: 1px solid var(--line2); background: var(--paper); font-size: 12px; color: var(--ink); white-space: nowrap; line-height: 1.3; } ._66WugwgXp0W5YbWZrl0m > i { width: 7px; height: 7px; border-radius: 50%; display: block; } ._66WugwgXp0W5YbWZrl0m .pdQkWmS9f29vbUjlhqnH { font-size: 11px; color: var(--ink); background: var(--paper3); border-radius: var(--pill); padding: 1px 6px; min-width: 20px; text-align: center; } ._66WugwgXp0W5YbWZrl0m.PoPs9p_CtcFqM6xcrMxl { border-color: var(--purpleLine); background: var(--purpleSoft); color: var(--purple); font-weight: 500; } ._66WugwgXp0W5YbWZrl0m.PoPs9p_CtcFqM6xcrMxl .pdQkWmS9f29vbUjlhqnH { background: var(--paper); color: var(--purple); } /* scheda candidato */ .X6XtZQLpwOm8QfMUPISj { display: flex; align-items: center; gap: 12px; } .X6XtZQLpwOm8QfMUPISj b { display: block; font-size: 16.5px; font-weight: 500; letter-spacing: -0.022em; color: var(--ink); } .X6XtZQLpwOm8QfMUPISj span span { display: block; font-size: 12.5px; color: var(--mute); } .gizohKOO4CEdXmL0jnFI { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .gizohKOO4CEdXmL0jnFI .NPGg_7gLVS4IxGNwUicT { padding: 5px 11px; gap: 7px; } .gizohKOO4CEdXmL0jnFI .NPGg_7gLVS4IxGNwUicT .hbbfw1vYVEZ5rXiZyCzT { margin-left: 2px; } .o9qWZNkFMvfBDpcD7wdy { display: flex; flex-direction: column; gap: 16px; padding: 13px 12px; } .W5EXc_XHlAdZQtGWUj9t { padding: 13px 12px 2px; } .W5EXc_XHlAdZQtGWUj9t .h8Dn3kFkkqB0eavwO5O7 { margin-top: 8px; gap: 12px; } .W5EXc_XHlAdZQtGWUj9t .Hq_7LB6_41hAC5is1puu { padding: 10px 0; } .Bpe1rKEpkCdDK6p8EPBk { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; margin-top: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); color: var(--ink); } .Bpe1rKEpkCdDK6p8EPBk > i { width: 7px; height: 7px; border-radius: 50%; display: block; } /* nella scheda laterale dell'hero l'area rientra di 12 px come le sue righe */ .H48THXHTuOW00cMZpgMT .Bpe1rKEpkCdDK6p8EPBk { margin: 8px 12px 0; } /* ═══════════════════════════════════════════════════════════════════ Le composizioni sul telefono (MobileComps): un primario a grandezza vera tagliato in basso, un secondario che gli si appoggia sopra. Altezza fissa per passo (--mh). Portate da styles/mobile.css del riferimento. ═══════════════════════════════════════════════════════════════════ */ .w73EzlnHysBOtYVCJC1Z { position: relative; margin: 0; border-radius: var(--r20); border: 1px solid var(--line); overflow: hidden; isolation: isolate; container-type: inline-size; background: radial-gradient(120% 70% at 90% 0%, color-mix(in srgb, var(--purple) 12%, var(--paper)) 0%, transparent 60%), linear-gradient(170deg, color-mix(in srgb, var(--purple) 5%, var(--paper)) 0%, var(--paper) 50%, var(--paper2) 100%); height: var(--mh, 460px); padding: 18px 14px 0; font-size: 13px; color: var(--ink); text-align: left; line-height: 1.45; letter-spacing: -0.008em; --base: 200ms; } .w73EzlnHysBOtYVCJC1Z .LJHMbV9f0hnIWNTakcfD { padding: 14px 14px 12px; } .w73EzlnHysBOtYVCJC1Z .ipkqiv7C2c3q1wNw2klY > .LJHMbV9f0hnIWNTakcfD, .w73EzlnHysBOtYVCJC1Z .LJHMbV9f0hnIWNTakcfD.ipkqiv7C2c3q1wNw2klY { box-shadow: var(--shFrag); } .w73EzlnHysBOtYVCJC1Z .ipkqiv7C2c3q1wNw2klY { position: relative; max-height: calc(var(--mh, 460px) - 18px); overflow: hidden; } .w73EzlnHysBOtYVCJC1Z .gkxwP7qd9io6EdTb7RMk { position: absolute; z-index: 2; } .w73EzlnHysBOtYVCJC1Z .gkxwP7qd9io6EdTb7RMk.LJHMbV9f0hnIWNTakcfD, .w73EzlnHysBOtYVCJC1Z .gkxwP7qd9io6EdTb7RMk > .Z4hGvaU9w5XwpgVdKOD4 { box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--ink) 45%, transparent), 0 0 0 1px color-mix(in srgb, var(--ink) 4%, transparent); } .ykRvAYSNi9ipbPuJc9qR .ipkqiv7C2c3q1wNw2klY, .M02XYb8ZfrqRVLyf97ZK .ipkqiv7C2c3q1wNw2klY { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), transparent calc(100% - 10px)); mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), transparent calc(100% - 10px)); } /* passo 01 */ .ykRvAYSNi9ipbPuJc9qR .KPWRHWUO1t4uoI539a6W { margin-top: 8px; gap: 12px; } .ykRvAYSNi9ipbPuJc9qR .Hq_7LB6_41hAC5is1puu { padding: 10px 0; } .ykRvAYSNi9ipbPuJc9qR .Hq_7LB6_41hAC5is1puu + .Hq_7LB6_41hAC5is1puu { border-top: 1px solid var(--line); } .ykRvAYSNi9ipbPuJc9qR .gkxwP7qd9io6EdTb7RMk { right: 12px; bottom: 16px; } .rd87F_xqrSTOfrwIL7Q4 { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--line2); border-radius: var(--r14); padding: 10px 16px 10px 10px; box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--ink) 45%, transparent); } .SYbw36jkJAtUbb7hOntv > span { display: block; font-size: 12px; color: var(--ink); line-height: 1.2; } .SYbw36jkJAtUbb7hOntv b { display: block; font-size: 24px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); } .SYbw36jkJAtUbb7hOntv small { font-size: 14px; color: var(--mute); font-weight: 400; } /* passo 02 */ .U8haulUH23iUSxWrIuFn { display: flex; flex-direction: column; gap: 11px; margin-top: 12px; } .dchBaNaQRqc2D0YXE7Hf { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .zllIjLqA4eBlZ7Tm4www { position: relative; display: flex; align-items: center; gap: 8px; min-height: 38px; border: 1px solid var(--line3); border-radius: 9px; padding: 0 32px 0 11px; font-size: 13px; color: var(--ink); background: var(--paper); white-space: nowrap; overflow: hidden; } .xGUU7B2Pt7qF8X40U4i5 { position: absolute; right: 10px; top: 50%; margin-top: -7px; color: var(--mute); } .ZdNpAOzqNRtzl42_YnQ4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .sz3qG9wK32TdQQRsDsSr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; } .sz3qG9wK32TdQQRsDsSr span { display: flex; justify-content: center; align-items: center; min-height: 36px; border: 1px solid var(--line3); border-radius: 9px; font-size: 12.5px; color: var(--ink); background: var(--paper); white-space: nowrap; } .sz3qG9wK32TdQQRsDsSr .PoPs9p_CtcFqM6xcrMxl { border-color: var(--purple); background: var(--purpleSoft); color: var(--purple); font-weight: 500; } .M02XYb8ZfrqRVLyf97ZK .gkxwP7qd9io6EdTb7RMk { left: 26px; right: 10px; bottom: 16px; } .M02XYb8ZfrqRVLyf97ZK .gkxwP7qd9io6EdTb7RMk .LYPcZu7qUbwjnSKDI2eD { margin-top: 4px; } .M02XYb8ZfrqRVLyf97ZK .xomk8ospMNRGNr2A_uF_ { margin-top: 10px; } /* passo 03 */ .jPpIGKNLfQXwNuLQD3h8 { padding-top: 20px; } .jPpIGKNLfQXwNuLQD3h8 .gkxwP7qd9io6EdTb7RMk { left: 26px; right: 12px; bottom: 18px; } .jPpIGKNLfQXwNuLQD3h8 .rFgLYajjPgQKXfn7Z0qU .LJHMbV9f0hnIWNTakcfD { box-shadow: var(--shFrag); } /* passo 04: il mazzo */ .phbNMvYLrDcI3ZimUZYE { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .phbNMvYLrDcI3ZimUZYE .izNB4SiB0TY0rMcLW5_Y { font-size: 14px; } .jxdKDp9lHH4G2JLuFFJ4 { position: relative; height: calc(var(--mh, 460px) - 96px); } .VvaanTZ72GhsvLfXUmZK { position: absolute; left: 0; right: 0; top: 0; height: calc(100% - 30px); transform-origin: 50% 100%; transform: translateY(calc(var(--d) * 15px)) scale(calc(1 - var(--d) * 0.05)); z-index: calc(3 - var(--d)); } .VvaanTZ72GhsvLfXUmZK .gyewlW0dLFYwBrnsEQzD { height: 100%; overflow: hidden; background: var(--paper); border-color: var(--line2); padding: 14px; grid-template-rows: minmax(0, 1fr); box-shadow: 0 26px 50px -26px color-mix(in srgb, var(--ink) 40%, transparent); } .VvaanTZ72GhsvLfXUmZK .LW9hDOan_fLuJRzyHXAh { min-height: 0; overflow: hidden; } .VvaanTZ72GhsvLfXUmZK:first-child .LW9hDOan_fLuJRzyHXAh { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); } .VvaanTZ72GhsvLfXUmZK + .VvaanTZ72GhsvLfXUmZK .gyewlW0dLFYwBrnsEQzD { box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--ink) 30%, transparent); } .VvaanTZ72GhsvLfXUmZK:nth-child(3) .gyewlW0dLFYwBrnsEQzD { background: var(--paper2); } /* Metodo sul telefono: il profilo si esplora, niente taglio */ .x_vr8TwrwnrEwU7JB6rW { height: auto; padding: 12px; background: linear-gradient(170deg, color-mix(in srgb, var(--purple) 5%, var(--paper)) 0%, var(--paper) 60%); } .x_vr8TwrwnrEwU7JB6rW > .LJHMbV9f0hnIWNTakcfD { box-shadow: var(--shFrag); } .w73EzlnHysBOtYVCJC1Z .bm5Ud1NPBrSPWD_kSDgK { font-size: 13.5px; line-height: 1.5; } .w73EzlnHysBOtYVCJC1Z .lBlZDCKjcS2b1I54Ewd2 { font-size: 12px; } /* ═══════════ il ritaglio della schermata ═══════════ */ /* La schermata è alta per davvero: nella pagina se ne mostra la parte alta, tagliata da una sfumatura invece che da una linea netta (riferimento styles/pages.css .screen-crop). */ .QY2YcDGdDB5WWB2whq9w { --base: 120ms; position: relative; height: clamp(520px, 50vw, 700px); overflow: hidden; border-radius: var(--r16); -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 100%); } @media (max-width: 900px) { .QY2YcDGdDB5WWB2whq9w { height: clamp(460px, 110vw, 640px); } }