/* * 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); } /* * La pila di card di «Scopri il tuo profilo» (assessment `#/m`, `.ig-pile` e `.sc`). * * Misure e colori sono quelli del riferimento. Lo Shadow DOM non eredita i default * del browser: la radice rifà box-sizing e i margini del paragrafo. */ .nY7zX6iQzhl3cFY9byAV { box-sizing: border-box; position: relative; width: clamp(260px, 26vw, 348px); aspect-ratio: 400 / 490; font-family: var(--hu-font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; --shadow: 0 40px 70px -40px rgba(20, 2, 64, 0.5), 0 12px 28px -18px rgba(20, 2, 64, 0.3); animation: Lu9URE96BBAnvIUyiKpQ 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) 0.18s both; } .nY7zX6iQzhl3cFY9byAV[data-tema="scuro"] { --shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.85), 0 12px 28px -18px rgba(0, 0, 0, 0.6); } .nY7zX6iQzhl3cFY9byAV *, .nY7zX6iQzhl3cFY9byAV *::before, .nY7zX6iQzhl3cFY9byAV *::after { box-sizing: border-box; } .nY7zX6iQzhl3cFY9byAV p { margin: 0; padding: 0; } .jQeoxOFuJo2vUI2m2eVw { position: absolute; inset: 0; transform-origin: 50% 100%; } .j97X0mALPsjEuq9gMTMO { transform: translateY(28px) scale(0.9) rotate(-5deg); } .LvSyjwBlWnZajMKghx1g { transform: translateY(14px) scale(0.95) rotate(4deg); } .cd_wY7yePwmDc6ufJ1UB { animation: g_n_99HOI6nHVL19olW6 5.5s ease-in-out infinite; } .momXOe2gglz5UgzBhhCA { position: relative; width: 100%; height: 100%; border-radius: 32px; background: var(--bg); color: var(--fg); overflow: hidden; container-type: size; box-shadow: var(--shadow), inset 0 0 0 1px var(--edge), inset 0 1px #fff6; user-select: none; } .ZftZRONxQCzkybJzRmeT { --bg: #642ece; --fg: #ffffff; --muted: #d8cbf3; --edge: rgba(255, 255, 255, 0.22); } .bRKlFE4Xs1Z0TJP8Glcn { --bg: #b794f4; --fg: #140240; --muted: #3d276d; --edge: transparent; } .GAWwOuy7wnxFif_iIRcO { --bg: #f1ecff; --fg: #140240; --muted: #4b3d70; --edge: transparent; } .LKRNCJhyuABeqzpWbsaZ { height: 100%; padding: 32px 28px 24px; display: flex; flex-direction: column; } /* nel riferimento il corpo è adattato alla card da uno script: 30.5 px su 348, 24 su 278 */ .Fg99mQO6oYVwgYUsjQ7L { flex: 0 0 auto; font-size: calc(9.29cqw - 1.82px); font-weight: 500; line-height: 1.16; letter-spacing: -0.03em; text-wrap: pretty; } .FR3zRxobMfqbLlHMWsrg { position: relative; flex: 1 1 0%; min-height: 56px; } .z6zADjpcJJVNDXYCntkJ { position: absolute; top: 50%; left: -4px; padding: 4px 18px 6px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 30px; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; white-space: nowrap; transform: translateY(-50%) rotate(-9deg); } .M6DviClZbUjUXAVTDwz0 { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; } .ogZ4Zkv9F7orDG1ugvi3 { font-size: 14px; line-height: 1.3; color: var(--muted); } .GemwYQwhYDNKTs98gWlX { display: flex; flex-direction: column; align-items: flex-end; font-size: 64px; font-weight: 500; line-height: 0.8; letter-spacing: -0.05em; font-variant-numeric: lining-nums tabular-nums; } .GemwYQwhYDNKTs98gWlX small { margin-bottom: 8px; font-size: 12.5px; font-weight: 500; line-height: 1.2; letter-spacing: 0; color: var(--muted); } /* la card si stringe con la sua altezza, come nell'assessment */ @container (max-height: 460px) { .LKRNCJhyuABeqzpWbsaZ { padding: 26px 24px 20px; } .FR3zRxobMfqbLlHMWsrg { min-height: 44px; } .z6zADjpcJJVNDXYCntkJ { font-size: 26px; } .GemwYQwhYDNKTs98gWlX { font-size: 52px; } } @container (max-height: 360px) { .LKRNCJhyuABeqzpWbsaZ { padding: 22px 22px 18px; } .FR3zRxobMfqbLlHMWsrg { min-height: 28px; } .GemwYQwhYDNKTs98gWlX { font-size: 42px; } .GemwYQwhYDNKTs98gWlX small { margin-bottom: 5px; } } @keyframes g_n_99HOI6nHVL19olW6 { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg) translateY(-6px); } } @keyframes Lu9URE96BBAnvIUyiKpQ { 0% { opacity: 0; transform: translateY(18px); } } @media (max-width: 991px) { .nY7zX6iQzhl3cFY9byAV { width: min(74vw, 320px); } } @media (prefers-reduced-motion: reduce) { .nY7zX6iQzhl3cFY9byAV, .cd_wY7yePwmDc6ufJ1UB { animation: none; } }