/* * 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); } /* * Il disegno della storia di Chi siamo (consegna del 03/10/2026, `.about-timeline`). * * I colori sono i token del tema (--hv-*), con i token del sito come ripiego. * Lo Shadow DOM non eredita i default del browser: la radice rifà box-sizing e * i margini del paragrafo. */ .s1sEvArIxB0XWKaLqcZB { box-sizing: border-box; position: relative; font-family: var(--hu-font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .s1sEvArIxB0XWKaLqcZB *, .s1sEvArIxB0XWKaLqcZB *::before, .s1sEvArIxB0XWKaLqcZB *::after { box-sizing: border-box; } .gY3uk0qeFJMFcgma573g { display: block; width: 100%; height: auto; overflow: visible; } .Q2eGBjmS1uBprM1rbZXF { fill: var(--hv-accent-soft-2, var(--hu-color-accent-soft)); } .fix9zvoK0ktCY9tlpq_9 { stroke: var(--hv-accent-text, var(--hu-color-primary)); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; } .QNhxmSfQ93kdCFMau3NA { fill: var(--hv-accent-text, var(--hu-color-primary)); stroke: var(--hv-bg, var(--hu-color-white)); stroke-width: 4; vector-effect: non-scaling-stroke; } .QNhxmSfQ93kdCFMau3NA.gUVo3lTps028RwK4icK7 { fill: var(--hv-bg, var(--hu-color-white)); stroke: var(--hv-accent-text, var(--hu-color-primary)); stroke-width: 2; } .AximXtJQ17of17YZVQ5Q { position: absolute; right: 0; top: -22px; display: flex; gap: 18px; margin: 0; font-size: 13px; line-height: 20px; letter-spacing: -0.02em; color: var(--hv-fg-2, var(--hu-color-text-muted)); } .AximXtJQ17of17YZVQ5Q span { display: inline-flex; align-items: center; gap: 8px; } .AximXtJQ17of17YZVQ5Q span::before { content: ""; width: 22px; height: 10px; border-radius: 10px; background: var(--hv-accent-soft-2, var(--hu-color-accent-soft)); } .AximXtJQ17of17YZVQ5Q .iYxkFBeW9GE9Xw0R95gQ::before { height: 2px; background: var(--hv-accent-text, var(--hu-color-primary)); } /* sul telefono il disegno esce: i quattro momenti scendono lungo la linea nativa della pagina */ @media (max-width: 767px) { .s1sEvArIxB0XWKaLqcZB { display: none; } }