/* * 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 disegni dei numeri di «Scopri il tuo profilo» (assessment `#/m`, `.ig-art`). * * I colori sono i token del tema (--hv-*), con i token del sito come ripiego. * L'acqua della terza fase non ha un token: i due valori del riferimento stanno qui. */ .kmZsAt8s0KBjFf9863ds { box-sizing: border-box; display: flex; color: var(--hv-fg, var(--hu-color-text-default)); --accent: var(--hv-accent-text, var(--hu-color-primary)); --warm: var(--hv-chart-warn, #dd7414); --cool: #0e6f82; --spring: cubic-bezier(0.3, 1.5, 0.5, 1); } .kmZsAt8s0KBjFf9863ds[data-tema="scuro"] { --cool: #5fd4e6; } .kmZsAt8s0KBjFf9863ds *, .kmZsAt8s0KBjFf9863ds *::before, .kmZsAt8s0KBjFf9863ds *::after { box-sizing: border-box; } .WFcigsBPZbhMTo_hGO1S { display: grid; grid-template-columns: repeat(12, 6px); gap: 3px; } .WFcigsBPZbhMTo_hGO1S i { width: 6px; height: 6px; border-radius: 50%; transform: scale(0); transition: transform 0.45s var(--spring) calc(0.2s + var(--i) * 12ms); } .DN8MWSWjeqUkk288bCkE { background: var(--accent); } .IEgOJlbm4xu9uqJaB9NS { background: var(--warm); } .BLWhOv7MbFGA7qT5yB6y { background: var(--cool); } .w2sViaFfVxRlv3qDJyrk { align-items: flex-end; gap: 4px; height: 33px; } .w2sViaFfVxRlv3qDJyrk i { width: 9px; height: 100%; border-radius: 5px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.6s var(--spring) calc(0.2s + var(--i) * 50ms); } .zQl0UqMXyr6VFpQm5lVZ { display: grid; grid-template-columns: repeat(2, 36px); gap: 5px 8px; } .zQl0UqMXyr6VFpQm5lVZ i { position: relative; height: 6px; } .zQl0UqMXyr6VFpQm5lVZ i::before { content: ""; position: absolute; left: 3px; right: 3px; top: 2.5px; height: 1px; background: color-mix(in srgb, currentColor 26%, transparent); } .zQl0UqMXyr6VFpQm5lVZ i::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 3px 3px, var(--accent) 2.6px, transparent 3px), radial-gradient(circle at calc(100% - 3px) 3px, var(--accent) 2.6px, transparent 3px); } .mjSAtGb_jxhB0YiVOJw0 svg { display: block; width: 34px; height: 34px; } .fRS22hEp2ZANZrk98fYO { stroke: var(--accent); stroke-dasharray: 0 100; transition: stroke-dasharray 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s; } .FeoqIVSS3bcbcOJWjpVn.WFcigsBPZbhMTo_hGO1S i, .FeoqIVSS3bcbcOJWjpVn.w2sViaFfVxRlv3qDJyrk i { transform: none; } .FeoqIVSS3bcbcOJWjpVn .fRS22hEp2ZANZrk98fYO { stroke-dasharray: 82 100; } @media (prefers-reduced-motion: reduce) { .WFcigsBPZbhMTo_hGO1S i, .w2sViaFfVxRlv3qDJyrk i { transform: none; transition: none; } .fRS22hEp2ZANZrk98fYO { stroke-dasharray: 82 100; transition: none; } }