/* ========================================================================== tokens.css · massimo+marafante Design tokens del sito. File unico da modificare per cambiare colori, font, dimensioni e spazi in tutto il sito. Nomenclatura (come nel Design System in Figma): type / element / prominence / state Figma color/text/primary-option → CSS --color-text-primary-option Stato di questa versione: COPIA FEDELE DEL SITO ONLINE. I valori sono quelli del sito di oggi. Dove un valore differisce dal Design System, il commento riporta il valore del DS ("DS: ..."). Le sezioni marcate "NON NEL DS" contengono ruoli che il Design System non ha ancora. Tema: unico (light). Le modalità dark/light del DS non sono usate nel sito. ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1. PRIMITIVI (identici al Design System) ------------------------------------------------------------------------ */ /* color/neutral/* */ --color-neutral-100: #F0F0F0; --color-neutral-200: #D3D3D3; --color-neutral-300: #B7B7B7; --color-neutral-400: #9C9C9C; --color-neutral-500: #818181; --color-neutral-600: #686868; --color-neutral-700: #4F4F4F; --color-neutral-800: #383838; --color-neutral-900: #222222; --color-neutral-1000: #0B0B0B; /* color/neutral-sand/* (grigio con un velo di sabbia: in prova, affianca la scala neutral; 900 = #222222 come neutral) */ --color-neutral-sand-100: #F7F6F3; --color-neutral-sand-200: #D9D8D6; --color-neutral-sand-300: #BCBBB9; --color-neutral-sand-400: #A09F9E; --color-neutral-sand-500: #848483; --color-neutral-sand-600: #6A6969; --color-neutral-sand-700: #515050; --color-neutral-sand-800: #383838; --color-neutral-sand-900: #222222; --color-neutral-sand-1000: #0A0A0A; /* color/fuchsia/* (riservato: la copia fedele non lo usa ancora) */ --color-fuchsia-100: #fdd7e7; --color-fuchsia-200: #fbabcc; --color-fuchsia-300: #f97fb2; --color-fuchsia-400: #f85798; --color-fuchsia-500: #f8367e; --color-fuchsia-600: #e92767; --color-fuchsia-700: #bc1d53; --color-fuchsia-800: #8f1440; --color-fuchsia-900: #630a2c; --color-fuchsia-1000: #360317; /* color/orange/* (riservato: la copia fedele non lo usa ancora) */ --color-orange-100: #ffe0bf; --color-orange-200: #ffcd99; --color-orange-300: #ffba73; --color-orange-400: #ffa84d; --color-orange-500: #ff9526; --color-orange-600: #ff8200; --color-orange-700: #d96f00; --color-orange-800: #b35b00; --color-orange-900: #8c4800; --color-orange-1000: #663400; /* color/ial/* (IAL · Idea Agenzia per il Lavoro; base #57ad12 = 600; passi uguali del 18% verso bianco / nero) */ --color-ial-100: #eef7e7; --color-ial-200: #d0e8bd; --color-ial-300: #b2d992; --color-ial-400: #93cb67; --color-ial-500: #75bc3d; --color-ial-600: #57ad12; --color-ial-700: #478e0f; --color-ial-800: #386f0c; --color-ial-900: #285008; --color-ial-1000: #183005; /* number/raw/* (valori grezzi del DS) */ --number-raw-00: 0; --number-raw-04: 4px; /* ------------------------------------------------------------------------ 2. COLORI SEMANTICI (collection "Semantic" di Figma · i componenti usano solo questi) Scala dei neutri: Lightest | Lighter | Medium | Darker | Darkest (si legge da sinistra a destra, senza colore di riferimento). Scala di Brand e Project: Ultralight | Light | Default | Dark | Ultradark (si legge dal centro, Default è il colore di riferimento). ------------------------------------------------------------------------ */ --color-solid-white: #ffffff; /* Figma color/solid/white (fisso, non cambia mai) */ --color-solid-black: #000000; /* Figma color/solid/black (fisso, non cambia mai) */ --color-solid-white-30: #b3b3b3; /* Figma color/solid/white-30 · bianco + 30% nero, opaco (Over del Tertiary) */ --color-solid-black-30: #4d4d4d; /* Figma color/solid/black-30 · nero + 30% bianco, opaco (Over del Secondary) */ /* color/text/* */ --color-text-lightest: var(--color-solid-white); /* testo sulle fasce scure */ --color-text-lighter: var(--color-neutral-400); /* #9c9c9c · etichette, caption, fonti */ --color-text-medium: var(--color-neutral-500); /* #818181 · paragrafi secondari, footer */ --color-text-darker: var(--color-neutral-900); /* #222222 · body */ --color-text-darkest: var(--color-solid-black); /* titoli */ /* color/background/* */ --color-background-lightest: var(--color-solid-white); /* fondo base della pagina */ --color-background-lighter: var(--color-neutral-100); /* #f0f0f0 · fasce alternate, card e forme grigie */ --color-background-medium: var(--color-neutral-300); /* #b7b7b7 (aggiornato in Figma: prima neutral/400) */ --color-background-darker: var(--color-neutral-900); /* #222222 · fasce scure, footer */ --color-background-darkest: var(--color-solid-black); /* Card-Evidence nera */ /* color/stroke/* */ --color-stroke-lightest: var(--color-solid-white); --color-stroke-lighter: var(--color-neutral-200); /* #d3d3d3 · bordo dei chip */ --color-stroke-medium: var(--color-neutral-400); --color-stroke-darker: var(--color-neutral-900); --color-stroke-darkest: var(--color-solid-black); /* linee e sottolineature dei filtri */ /* collection Brand (modo M+M): colori fissi del brand · light, dark e on sono segnaposto (#ffffff) come in Figma */ --brand-orange-ultralight: var(--color-orange-100); --brand-orange-light: var(--color-brown-300); /* Figma: →color/brown/300 (forse voleva essere orange/300) */ --brand-orange-default: var(--color-orange-600); --brand-orange-dark: var(--color-orange-800); --brand-orange-ultradark: var(--color-orange-900); --brand-orange-over: var(--color-orange-800); /* Figma Brand orange/over → color/orange/800 · #b35b00 */ --brand-orange-selected: var(--color-orange-100); /* Figma Brand orange/selected → color/orange/100 · #ffe0bf */ --brand-orange-on: #ffffff; --brand-fucsia-ultralight: var(--color-fuchsia-100); --brand-fucsia-light: #ffffff; --brand-fucsia-default: var(--color-fuchsia-600); --brand-fucsia-dark: #ffffff; --brand-fucsia-ultradark: var(--color-fuchsia-900); --brand-fucsia-on: #ffffff; /* collection Project, modo M+M (predefinito): cambia con data-project (vedi in fondo al file) */ --project-ultralight: var(--color-orange-100); --project-light: var(--color-orange-300); --project-default: var(--color-orange-600); --project-dark: var(--color-orange-800); --project-ultradark: var(--color-orange-900); --project-on: #ffffff; --project-over: var(--brand-orange-over); /* Figma Project color/over [M+M] → Brand orange/over */ --project-selected: #ffffff; /* segnaposto come in Figma (non ancora usato) */ /* collection Semantic · color/interaction/…: tutti gli oggetti cliccabili (pulsanti, filtri, link). Tre livelli × quattro stati */ --color-interaction-primary-default: var(--brand-orange-default); --color-interaction-primary-over: var(--brand-orange-over); --color-interaction-primary-selected: var(--brand-orange-selected); --color-interaction-primary-disabled: #ffffff; /* segnaposto come in Figma */ --color-interaction-secondary-default: var(--color-solid-black); --color-interaction-secondary-over: var(--color-solid-black-30); --color-interaction-secondary-selected: var(--color-neutral-100); --color-interaction-secondary-disabled: #ffffff; /* segnaposto come in Figma */ --color-interaction-tertiary-default: var(--color-solid-white); --color-interaction-tertiary-over: var(--color-solid-white-30); --color-interaction-tertiary-selected: var(--color-neutral-300); --color-interaction-tertiary-disabled: #ffffff; /* segnaposto come in Figma */ /* Filtri (Figma 2223:4109) */ /* Filter [Orange, Fucsia] — collection a parte (Figma Filter: text/* e background/* per default, over, selected, disabled). Il modo Orange è quello base; il modo Fucsia (.filter--fucsia) cambia sfondo default/over/selected e il testo di selected. */ --filter-text-default: var(--color-solid-white); --filter-text-over: var(--color-solid-white); --filter-text-selected: var(--color-orange-600); --filter-text-disabled: var(--color-neutral-500); --filter-background-default: var(--color-orange-600); --filter-background-over: var(--color-orange-800); --filter-background-selected: var(--color-orange-100); --filter-background-disabled: var(--color-neutral-300); --gradient-brand: linear-gradient(90deg, var(--color-fuchsia-600) 0%, var(--color-orange-600) 95.821%); /* DS: color/gradient/primary · da sinistra a destra, l'arancio arriva al 95,821% (letto da Figma) */ /* ---- NON NEL DS (da decidere: integrare nel DS o cancellare) ---- */ --color-accent-new: #eb3662; /* etichetta "New" */ --color-button-primary: #000000; /* bottone */ --color-button-primary-hover: #333333; /* bottone al passaggio del mouse */ --color-background-overlay-menu: rgba(0, 0, 0, 0.95); /* menu a schermo intero */ --color-background-overlay-card: rgba(0, 0, 0, 0.8); /* velo sulle card */ --color-background-overlay-hero: rgba(0, 0, 0, 0.8); /* velo sull'immagine dell'hero delle pagine interne */ /* ---- Colori del progetto Frisia, come nella pagina originale (NON NEL DS) ---- */ /* Scale colore (10 step 100–1000): stessa luminosità OKLCH per step in tutte le scale (0,96 → 0,24, passi da 0,08). Colori di riferimento: red #F24822 (rosso di stato, tonalità 27°) · brown #C97B4A · salmon #E58573 · ochre #C79A3C/#E0AE63 · green #4F9E72/#7BC298 · mauve #8D6A6A · teal #3D8FA0 · blue #6FA3D2 (NON NEL DS: da allineare alle variabili Figma) */ --color-red-100: #FFEDEB; --color-red-200: #FFC8C1; --color-red-300: #FFA096; --color-red-400: #FF7266; --color-red-500: #F2433D; --color-red-600: #CA3732; --color-red-700: #A42C28; --color-red-800: #7F211D; --color-red-900: #5C1613; --color-red-1000: #3B0C0A; --color-brown-100: #FFEEE5; --color-brown-200: #F8CDB5; --color-brown-300: #EDAE89; --color-brown-400: #DB9063; --color-brown-500: #C37645; --color-brown-600: #A36239; --color-brown-700: #844E2D; --color-brown-800: #663C21; --color-brown-900: #492A16; --color-brown-1000: #2E190C; --color-salmon-100: #FFEDEA; --color-salmon-200: #FFC9BE; --color-salmon-300: #FCA392; --color-salmon-400: #E68674; --color-salmon-500: #C57262; --color-salmon-600: #A55E51; --color-salmon-700: #864B40; --color-salmon-800: #683930; --color-salmon-900: #4B2721; --color-salmon-1000: #311712; --color-ochre-100: #FCF0E0; --color-ochre-200: #F4D2A2; --color-ochre-300: #E6B469; --color-ochre-400: #CA9D3F; --color-ochre-500: #AC8534; --color-ochre-600: #906F29; --color-ochre-700: #74591F; --color-ochre-800: #5A4415; --color-ochre-900: #41300C; --color-ochre-1000: #291D05; --color-green-100: #E7F6EC; --color-green-200: #BCE2CA; --color-green-300: #93CEAA; --color-green-400: #70B78D; --color-green-500: #509F73; --color-green-600: #42845F; --color-green-700: #346B4C; --color-green-800: #27523A; --color-green-900: #1B3A29; --color-green-1000: #0F2418; --color-mauve-100: #F8EFEF; --color-mauve-200: #E5D3D2; --color-mauve-300: #D1B6B6; --color-mauve-400: #BC9C9B; --color-mauve-500: #A58282; --color-mauve-600: #8D6A6A; --color-mauve-700: #725555; --color-mauve-800: #574141; --color-mauve-900: #3E2E2E; --color-mauve-1000: #261C1C; --color-teal-100: #E6F5F9; --color-teal-200: #B9DFE8; --color-teal-300: #8EC9D6; --color-teal-400: #67B2C2; --color-teal-500: #4899AA; --color-teal-600: #3B7F8E; --color-teal-700: #2F6772; --color-teal-800: #234F58; --color-teal-900: #18383F; --color-teal-1000: #0D2328; --color-blue-100: #E9F3FD; --color-blue-200: #BCDCF9; --color-blue-300: #94C3EE; --color-blue-400: #76AAD9; --color-blue-500: #6491BA; --color-blue-600: #52799B; --color-blue-700: #41617E; --color-blue-800: #314A62; --color-blue-900: #213547; --color-blue-1000: #13212D; --color-frisia-orange: #e4673e; --color-coachlavoro-orange: #ff8000; --color-frisia-blue: #2a588d; --color-supplhi-primary: #0082c2; /* blu SupplHI: stroke delle card del progetto SupplHI (Figma color/stroke/supplhi-primary; NON NEL DS GLOBALE) */ /* Scala Value+ (10 step). Dal 200 al 1000 luminosità OKLCH equidistante (passi di 0,094; tonalità 261–264°); il 100 è un azzurro quasi bianco (luminosità 0,97), più vicino al 200 di un passo intero. 400 = #96acd6 e 800 = #143981 sono i due colori di brand esatti — NON NEL DS */ --color-valueplus-100: #b8caed; --color-valueplus-200: #90a7d4; --color-valueplus-300: #6b87bc; --color-valueplus-400: #4c6ba7; --color-valueplus-500: #2e5193; --color-valueplus-600: #143981; --color-valueplus-700: #10306e; --color-valueplus-800: #0c275a; --color-valueplus-900: #091d46; --color-valueplus-1000: #051432; --color-valueplus-primary: var(--color-valueplus-600); /* Value+: blu di brand (fascia piena, filetti, card) — NON NEL DS */ --color-frisia-orange-tint: rgba(228, 103, 62, 0.2); --color-status-green: #66d575; --color-status-red: #f24822; --color-status-amber: #ff9e42; --color-text-strong: #65d474; /* Figma color/text/strong (verde, luminosità OKLCH 0,78) */ --color-text-moderate: #ff9e42; /* Figma color/text/moderate (ambra, luminosità OKLCH 0,78: colore di riferimento) */ --color-text-weak: #f34b43; /* Figma color/text/weak (rosso, bilanciato su ambra e verde) */ --color-background-strong: #65d474; /* Figma color/background/strong (usato a 10% nell'icona di Card-Full-Outcome) */ --color-background-moderate: #ff9e42; /* Figma color/background/moderate */ --color-background-weak: #f34b43; /* Figma color/background/weak (#f34b43 da get_variable_defs; moderate/strong dai fallback del codice Figma) */ --color-status-green-tint: rgba(102, 213, 117, 0.06); --color-status-red-tint: rgba(242, 72, 34, 0.04); --color-status-amber-tint: rgba(255, 158, 66, 0.04); /* ------------------------------------------------------------------------ 3. TIPOGRAFIA ------------------------------------------------------------------------ */ --font-family-heading: "Montserrat", sans-serif; --font-family-body: "DM Sans", sans-serif; --font-family-filter: "DM Sans", sans-serif; /* Figma font/family/filter */ --font-family-button: "DM Sans", sans-serif; --font-family-number: "Montserrat", sans-serif; /* Figma font/family/number: numeri in Element-Number */ --number-font-weight-light: 300; /* citazione (Figma: Light Italic) */ --number-font-weight-regular: 400; --number-font-weight-semibold: 600; /* testo fascia versione (Figma: SemiBold) */ --number-font-weight-bold: 700; --number-font-weight-extrabold: 800; /* label del pulsante (Figma) */ /* Dimensioni UI e testo */ --number-font-size-card: 14px; /* testo di Card-Text-Button e Block-Default-Closer (Figma) */ --number-font-size-button: 11px; /* label del pulsante (Figma; prima 10px) */ --number-font-size-button-m: 11px; /* pulsante M (Figma: come L) */ --number-font-size-button-s: 9px; /* pulsante S (Figma) */ --number-font-size-button-xs: 9px; /* pulsante XS (Figma: come S) */ --number-font-size-xs: 10px; /* etichette, filtri, bottone */ --number-font-size-sm: 12px; /* copyright, link del footer */ --number-line-height-caption: 18px; /* Caption Figma 12/18 */ --number-font-size-md: 15px; /* testo del body */ --number-line-height-body: 25px; /* Titoli (dimensione / interlinea) */ --number-font-size-heading-1: 48px; --number-line-height-heading-1: 54px; --number-font-size-heading-2: 36px; --number-line-height-heading-2: 48px; --number-font-size-heading-3: 30px; --number-line-height-heading-3: 36px; --number-font-size-heading-4: 24px; --number-line-height-heading-4: 30px; --number-font-size-heading-5: 18px; --number-line-height-heading-5: 24px; --number-font-size-heading-6: 16px; --number-line-height-heading-6: 18px; --number-font-size-display: 100px; /* titolo grande della home */ /* Spaziatura lettere */ --number-letter-spacing-label: 3px; --number-letter-spacing-button-m: 0.88px; --number-letter-spacing-button-s: 0.54px; --number-letter-spacing-button-xs: 0.54px; --number-letter-spacing-version-band: 0.4px; /* testo fascia versione (Figma) */ --number-letter-spacing-card: 0.28px; /* testo di Card-Text-Button e Block-Default-Closer (Figma) */ --number-letter-spacing-button: 0.88px; /* Figma: pulsante aggiornato (prima 2px) */ /* ------------------------------------------------------------------------ 4. SPAZI E LAYOUT ------------------------------------------------------------------------ */ --number-space-xs: 10px; --number-space-heading-gap: var(--number-spacing-12); /* spazio sotto i titoli, prima del contenuto; anche testo + immagine (NON NEL DS) */ --number-space-box-gap: var(--number-spacing-32); /* spazio tra un testo e il box (immagine nel riquadro, box grigio) che lo segue (NON NEL DS) */ --grid-gap-wide: var(--number-spacing-32); /* griglie di card/colonne: distanza ampia, 32px (righe e colonne) — NON NEL DS */ --grid-gap-tight: var(--number-spacing-08); /* griglie di card/colonne: distanza stretta, 8px (righe e colonne) — NON NEL DS */ --number-space-card-gap: var(--number-spacing-32); /* spazio tra il testo (body) e la card che lo segue (NON NEL DS) */ --number-space-sm: 20px; --number-space-md: 40px; --number-space-lg: var(--number-spacing-72); /* prima 75px */ /* Valori numerici come nel Figma (number/spacing/NN, number/stroke/NN) */ --number-spacing-16: 16px; --number-spacing-04: 4px; --number-spacing-08: 8px; --number-spacing-06: 6px; --number-spacing-12: 12px; --number-spacing-14: 14px; --number-spacing-05: 5px; --number-spacing-09: 9px; --number-spacing-10: 10px; --number-spacing-20: 20px; --number-spacing-24: 24px; --number-spacing-28: 28px; --number-spacing-32: 32px; --number-spacing-48: 48px; --number-spacing-72: 72px; --number-spacing-104: 104px; /* Figma: Block-Default-Closer, spazio sopra */ --number-spacing-152: 152px; --number-spacing-56: 56px; --number-spacing-64: 64px; --number-spacing-80: 80px; /* margini laterali del testo nella fascia img+quote (Figma) */ /* padding sopra/sotto della fascia con pulsante (Figma) */ --number-stroke-02: 2px; --number-space-xl: var(--number-spacing-152); /* fasce grandi: sopra e sotto (prima 150px) */ --number-space-h1-gap: var(--number-spacing-72); /* spazio sotto l'H1 delle pagine progetto (Figma Header-Project: 72) */ --number-space-lead-gap: var(--number-spacing-32); /* spazio sotto i testi "lead" (Figma Header-Project: 32; prima 56) */ --number-space-paragraph: var(--number-spacing-12); /* paragraph spacing dello stile Body (Figma: 12; prima 20) */ --number-space-block-closer-header-bottom: var(--number-spacing-12); /* Block-Closer-Header: spazio sotto il testo (Figma) */ --number-size-block-closer-header-height: 150px; /* Block-Closer-Header: altezza totale (Figma) */ --number-size-chip-font-large: 12px; /* Chip Large (Figma Chip/Ch1 12/18, spaziatura 0.48px) */ --number-letter-spacing-chip-large: 0.48px; --number-size-chip-font: 10px; /* Badge Medium (Figma Badge/Ch2-Regular 10/15, spaziatura 0.4px) */ --number-letter-spacing-chip: 0.4px; --number-line-height-cap-trim: 0.7; /* altezza della maiuscola di DM Sans: equivale al text-box-trim cap/alphabetic di Figma */ --number-size-chip-font-small: 10px; /* Badge Small (Figma 2066:1896 aggiornato): 10/15, spaziatura 4% = 0.4px (prima 9px) */ --number-letter-spacing-chip-small: 0.4px; --number-space-h5-gap: var(--number-spacing-06); /* spazio sotto i titoli H5 (NON NEL DS) */ --number-space-h3: var(--number-spacing-72); /* spazio sopra i titoli H3 (NON NEL DS) */ --number-space-h5: var(--number-spacing-28); /* spazio sopra i titoli H5 (NON NEL DS) */ /* PRIORITÀ DEI PADDING (Figma Rules / Priorità dei padding; PROVA, solo body.spacing-v2 = Frisia sintetica) Ordine: Heading > Lead > Card = Block = Element > Body. ">" = vince su, "=" = stessa priorità. Regola di base: tra due componenti vicini la distanza è il padding del componente con la priorità più alta. 1. Heading e Card/Block/Element vicini: vale il padding del Heading, sopra e sotto. 2. Heading e Body vicini: vale il padding del Heading. 2b. Heading e Lead vicini: vale il padding del Heading. Lead e Card/Block/Element vicini: vale il padding del Lead. Lead: sotto 32px, sopra nessuno (Figma 2107:2582; DM Sans Regular 24/36, Primary #222). 3. Card/Block/Element e Body vicini: vale il padding della Card/Block/Element. 4. Card/Block/Element vicini tra loro: valgono i padding del componente; in conflitto vince quello che segue (IN PROVA). 5. Il padding di un componente non si somma mai a quello di un altro: ne vale uno solo, il più prioritario. Body: dopo un Body 20px sotto; dopo un componente senza padding proprio 28px sopra (non vale dopo un altro Body = 12px tra paragrafi, dopo un Heading, né dentro un componente: lì valgono le regole del componente). */ /* SCALA SPAZI TITOLI (PROVA, solo body.spacing-v2; Figma Rules 2102:1901): sopra 72/64/56/48/40/32 (H1→H6), sotto 24/14/12/10/8 (Figma Rules 2102:1901) (NON NEL DS) */ --number-space-title-h2-below: 24px; --number-space-title-h2-above: 64px; --number-space-title-h3-below: 14px; --number-space-title-h3-above: 56px; --number-space-title-h4-below: 12px; --number-space-title-h4-above: 48px; --number-space-title-h5-below: 10px; --number-space-title-h5-above: 40px; --number-space-title-h6-below: 8px; --number-space-title-h6-above: 32px; /* Contenitore: cambia con la larghezza dello schermo (vedi components.css) */ --number-container-lg: 1280px; /* oltre 1600px */ --number-container-md: 900px; /* fino a 1600px */ --number-container-sm: 800px; /* fino a 1466px e righe strette */ /* Breakpoint (in components.css i media query usano questi stessi valori) */ --number-breakpoint-xs: 479px; --number-breakpoint-sm: 767px; --number-breakpoint-md: 1024px; --number-breakpoint-lg: 1466px; --number-breakpoint-xl: 1600px; --number-header-height: 100px; --number-logo-height: 60px; --number-gutter-lg: var(--number-spacing-48); /* margine laterale fino a 1024px (48px; prima 50px) */ --number-gutter-sm: var(--number-spacing-32); /* margine laterale fino a 479px (32px; prima 30px) */ /* Angoli (nel DS: radius/sm 8, radius/xxl 24· usato dal button) */ --number-radius-2xs: 4px; /* DS: radius/2xs · chip Small */ --number-radius-xs: 6px; --number-radius-surface: var(--number-radius-xl); /* angoli di card, box, blocchi e immagini: 20px (NON NEL DS) */ --number-padding-surface: var(--number-spacing-16); /* padding interno di card, box e blocchi: 16px (NON NEL DS) */ --number-radius-sm: 8px; --number-radius-mds: 10px; /* DS: radius/mds · chip XLarge */ --number-radius-md: 12px; --number-radius-lg: 16px; --number-radius-xl: 20px; --number-radius-xxl: 24px; --number-radius-max: 999px; /* DS: radius/max · estremità completamente tonde (valore da confermare con Figma) */ --number-duration-default: 300ms; } /* collection Project: modo Ial (Figma) · si attiva con data-project="ial" su un elemento (pagina o fascia) */ [data-project="ial"] { --project-ultralight: var(--color-ial-100); --project-light: #ffffff; --project-default: var(--color-ial-600); --project-dark: #ffffff; --project-ultradark: var(--color-ial-900); --project-on: #ffffff; --project-over: #ffffff; /* segnaposto in Figma (Ial) */ --project-selected: #ffffff; } /* collection Project: modo Valueplus (Figma) · si attiva con data-project="valueplus" su un elemento (pagina o fascia) */ [data-project="valueplus"] { --project-ultralight: var(--color-valueplus-100); --project-light: #ffffff; /* segnaposto in Figma (Valueplus) */ --project-default: var(--color-valueplus-600); --project-dark: #ffffff; /* segnaposto in Figma (Valueplus) */ --project-ultradark: var(--color-valueplus-900); --project-on: #ffffff; --project-over: #ffffff; /* segnaposto in Figma (Valueplus) */ --project-selected: #ffffff; /* segnaposto in Figma (Valueplus) */ } /* Filter · modo Fucsia: ridefinisce solo le variabili che cambiano rispetto al modo Orange (le altre restano uguali, come in Figma) */ .filter--fucsia { --filter-text-selected: var(--color-fuchsia-600); --filter-background-default: var(--color-fuchsia-600); --filter-background-over: var(--color-fuchsia-800); --filter-background-selected: var(--color-fuchsia-100); }