/* ========================================================================== VIDIM — Design tokens Estratti da Figma: file OaIMMZjq7j8UQ8G1ziKJgm, frame Home 14:522 Fonte: docs/figma-spec/00-design-system.md Nessun valore inventato. I nomi Figma sono riportati in commento. NB: la variabile Figma si chiama "Tertiaty" (refuso originale); qui usiamo --color-tertiary-* e documentiamo l'alias. ========================================================================== */ :root { /* ---------- Colori: Neutrals ---------- */ --color-white: #ffffff; /* Color/Neutrals/50 */ --color-neutral-100: #f5f5f5; /* Color/Neutrals/100 */ --color-neutral-200: #e8e8e8; /* Color/Neutrals/200 */ --color-neutral-300: #d2d2d2; /* Color/Neutrals/300 */ --color-neutral-500: #888888; /* Color/Neutrals/500 */ --color-neutral-600: #666666; /* Color/Neutrals/600 */ --color-black: #000000; /* Color/Neutrals/900 */ /* ---------- Colori: Primary ---------- */ --color-primary-50: #b8dff2; /* Color/Primary/50 */ --color-primary: #008ed0; /* Color/Primary/default */ --color-primary-700: #00618d; /* Color/Primary/700 */ --color-primary-900: #00334b; /* Color/Primary/900 — DA CONFERMARE come variabile (00 §2.2) */ /* ---------- Colori: Tertiary (Figma: "Tertiaty") ---------- */ --color-tertiary: #00122b; /* Color/Tertiaty/default */ --color-tertiary-200: #7a8491; /* Color/Tertiaty/200 */ --color-tertiary-300: #525e6f; /* Color/Tertiaty/300 */ --color-tertiary-400: #29384d; /* Color/Tertiaty/400 */ /* ---------- Ruoli semantici ---------- */ --text-on-dark: var(--color-white); --text-on-dark-muted: var(--color-neutral-300); --text-on-light: var(--color-tertiary); --text-on-light-muted: var(--color-tertiary-300); /* ---------- Tipografia ---------- */ --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; /* Scala — line-height SEMPRE in px espliciti (00 §1.1): il fattore Auto di Inter e 1.21 ma l'arrotondamento del box Figma cambia segno tra 16px e 12px, quindi nessun unitless riproduce i box. */ --type-display-xxl-size: 600px; /* cap-trim -> box 436px */ --type-display-xl-size: 160px; /* cap-trim -> box 116px */ --type-display-l-size: 120px; /* cap-trim -> box 87px */ --type-h1-size: 64px; --type-h1-lh: 77px; --type-h2-size: 48px; --type-h2-lh: 58px; --type-h3-size: 28px; --type-h3-lh: 34px; --type-h4-size: 24px; --type-h4-lh: 29px; --type-body-size: 16px; --type-body-lh: 19px; --type-caption-size: 12px; --type-caption-lh: 15px; --type-micro-size: 8px; --type-micro-lh: 10px; /* Cap-height di Inter, usata dai token cap-trim (00 §1.3) */ --inter-cap-height: 0.727; /* ---------- Spaziature (base-8) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 16px; /* gutter di griglia + gap piu ricorrente */ --space-4: 32px; --space-5: 40px; /* padding interno di TUTTE le card */ --space-6: 80px; --space-7: 160px; /* ---------- Griglia ---------- */ --page-width: 1512px; --page-gutter: 40px; /* margine orizzontale di sezione, senza eccezioni */ --container-width: 1432px; /* 1512 - 40 - 40 */ --col-1: 346px; /* (1432 - 3*16) / 4 */ --col-2: 708px; /* 346*2 + 16 */ --grid-gap: 16px; /* ---------- Border radius ---------- */ --radius-none: 0; --radius-xs: 4px; /* Tag Application Card */ --radius-sm: 6px; /* Lingua: Top e Select */ --radius-md: 8px; /* Pulsante, contenitore Lingua */ --radius-lg: 16px; /* raggio dominante: tutte le card */ --radius-pill: 40px; /* pallini Mover */ --radius-full: 50%; /* ---------- Gradienti ---------- */ /* Gruppo A — pulsante (~102.3deg, normalizzato: 00 §3.2) */ --btn-gradient-angle: 102.3deg; --gradient-btn-primary: linear-gradient(var(--btn-gradient-angle), #008ed0 0%, #00618d 100%); --gradient-btn-primary-hover: linear-gradient(var(--btn-gradient-angle), #00618d 0%, #00334b 100%); --gradient-btn-white: linear-gradient(var(--btn-gradient-angle), #ffffff 0%, #e8e8e8 100%); --gradient-btn-white-hover: linear-gradient(var(--btn-gradient-angle), #e8e8e8 0%, #d2d2d2 100%); /* Gruppo D — sezioni scure verticali (Applications, Vidim Numbers) */ --gradient-section-dark: linear-gradient(180deg, #00122b 0%, #29384d 100%); /* Gruppo B — card Core Capabilities (91.43/91.63 normalizzati a 91.5: 00 §3.2) */ --gradient-card-core: linear-gradient(91.5deg, #00122b 0%, #29384d 100%); /* Card numerate di `Outcome` su Maintenance (63:337 e gemelle). 92.04deg contro i 91.5 di --gradient-card-core: mezzo grado, su una card larga 736 sposta l'asse di ~7px. Impercettibile, ma lo tengo separato per non dire una cosa falsa nel codice. Se un giorno si semplifica la palette, questi due si possono unire senza che nessuno se ne accorga. */ --gradient-card-outcome: linear-gradient(92.04deg, #00122b 0%, #29384d 100%); /* Gruppo C — Why Card (valore in contesto, non il render isolato) */ --gradient-card-why: linear-gradient(137.896deg, #29384d 0%, #00122b 100%); /* How Card — angolo proprio 102.235deg, tenuto separato per fedelta */ --gradient-card-how: linear-gradient(102.235deg, #29384d 0%, #00122b 100%); /* Card del blocco Workflow (Maintenance 63:395 e gemelle sulle altre pagine). 100.22deg contro i 102.235 di --gradient-card-how: due gradi, stessi due colori nello stesso ordine. Sono con ogni probabilita lo stesso gradiente disegnato due volte a mano; li tengo distinti finche il cliente non conferma. */ --gradient-card-workflow: linear-gradient(100.22deg, #29384d 0%, #00122b 100%); /* Hero delle pagine interne (Maintenance 55:347 e gemelli). Quasi verticale — mezzo grado — e con gli stop spostati dentro: scuro in alto, appena piu chiaro in fondo. Diverso da --gradient-hero della Home. */ --gradient-hero-maintenance: linear-gradient(0.519deg, #29384d 0.643%, #00122b 91.175%); /* Gruppo E — angoli propri, NON normalizzare */ --gradient-hero: linear-gradient(0.7307074777917535deg, #29384d 0.64311%, #00122b 91.175%); --gradient-igc: linear-gradient(95.3628319823323deg, #00122b 0%, #29384d 100%); --gradient-footer: linear-gradient(107.99044994505513deg, #00122b 0%, #29384d 100%); --gradient-mover: linear-gradient(90deg, #00122b 0%, #29384d 100%); /* Overlay sulle immagini delle card */ --overlay-card-app: linear-gradient(180deg, rgb(0 18 43 / .7) 0%, rgb(0 18 43 / .2) 30%, #00122b 90%); --overlay-card-easy: linear-gradient(180deg, rgb(0 18 43 / 0) 25%, #00122b 100%); /* ---------- Stroke ---------- */ --stroke-pattern: 5px solid var(--color-tertiary-400); /* + opacity .25 sul layer */ --stroke-hairline: 1px solid var(--color-neutral-200); --stroke-footer-rule: 1px solid var(--color-tertiary-400); }