/* ============================================================ VARIABILI CSS — Engicam Design System Fonte: Engicam_Design_System.pdf, esportazione Figma 4 mag 2026 STRUTTURA TOKEN (two-tier): 1. PRIMITIVE — colori nudi, nessun significato semantico Modificare qui per cambiare i valori del brand 2. SEMANTIC — descrivono dove/come si usa ogni colore I componenti usano SOLO i token semantici ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); :root { /* ---------------------------------------------------------- TIER 1 — PRIMITIVE TOKENS I colori nudi della palette. Non usare direttamente nei componenti — usare i semantic token sotto. ---------------------------------------------------------- */ --primitive-black: #222222; --primitive-grey-dark: #50535a; --primitive-grey-mid: #666666; --primitive-grey-light: #b0b0b0; --primitive-grey-pale: #ededed; --primitive-grey-ghost: #f5f5f5; --primitive-white: #ffffff; --primitive-border: #e6e6e6; --primitive-blue: #0071b8; --primitive-blue-dark: #005fa3; --primitive-blue-acces: #2E8FD1; /* ---------------------------------------------------------- TIER 2 — SEMANTIC TOKENS Ogni token descrive il suo ruolo nell'interfaccia. Cambiano il valore puntando ai primitive, mai a hex diretti. ---------------------------------------------------------- */ /* --- TESTO --- */ --text-primary: var(--primitive-black); /* corpo testo principale */ --text-secondary: var(--primitive-grey-mid); /* didascalie, date, info secondarie */ --text-disabled: var(--primitive-grey-light); /* placeholder, voci disabilitate */ --text-inverse: var(--primitive-white); /* testo su sfondi scuri */ --text-inverse-muted: rgba(237, 237, 237, 0.6); /* testo secondario su sfondi scuri */ --text-accent: var(--primitive-blue); /* link, evidenziazioni */ --text-accent-hover: var(--primitive-blue-dark); /* link hover */ --text-menu-current: var(--primitive-blue-acces); /* --- SFONDI PAGINA E SEZIONI --- */ --bg-page: var(--primitive-white); /* sfondo pagina */ --bg-surface: var(--primitive-white); /* card, box, superfici elevate */ --bg-section-light: var(--primitive-grey-ghost); /* sezioni chiare alternate */ --bg-section-dark: var(--primitive-grey-dark); /* sezioni scure */ --bg-accent: var(--primitive-blue); /* sezioni brand/accent */ /* --- HEADER --- */ --bg-header-top: var(--primitive-black); /* fascia superiore social/login */ --bg-header-nav: var(--primitive-black); /* fascia navigazione */ --text-header: var(--primitive-white); /* testo header */ --text-header-muted: rgba(237, 237, 237, 0.6); /* testo secondario header */ --text-header-light: var(--primitive-grey-pale); --border-header: rgba(255, 255, 255, 0.1); /* bordi interni header */ /* --- INTERATTIVI — bottoni, link --- */ --interactive-primary: var(--primitive-blue); /* sfondo bottone filled */ --interactive-primary-hover: var(--primitive-blue-dark); /* sfondo bottone filled hover */ --interactive-outline: var(--primitive-blue); /* bordo bottone outlined */ --interactive-outline-hover: var(--primitive-blue); /* bordo bottone outlined hover */ --interactive-text: var(--primitive-blue); /* testo link e bottone outlined */ --interactive-text-hover: var(--primitive-blue-dark); /* testo link hover */ /* --- BORDI E DIVISORI --- */ --border-default: var(--primitive-border); /* bordi standard */ --border-strong: var(--primitive-grey-light); /* bordi più evidenti */ --border-inverse: rgba(255, 255, 255, 0.1); /* bordi su sfondo scuro */ /* --- FORM --- */ --input-bg: var(--primitive-white); --input-border: var(--primitive-border); --input-border-focus: var(--primitive-blue); --input-text: var(--primitive-black); --input-placeholder: var(--primitive-grey-light); /* --- TEMA (usati dai componenti via .theme-dark) --- */ --theme-bg: var(--bg-surface); --theme-text: var(--text-primary); --theme-text-muted: var(--text-secondary); --theme-border: var(--border-default); --theme-overlay: rgba(0, 0, 0, 0.06); --theme-overlay-med: rgba(0, 0, 0, 0.12); /* ---------------------------------------------------------- TIPOGRAFIA Font: Inter (Google Fonts) ---------------------------------------------------------- */ --font-family-base: 'Inter', sans-serif; /* Dimensioni */ --font-size-h1-huge: clamp(28px, 3vw, 40px); --font-size-h1: 28px; --font-size-h2: 16px; --font-size-h3: 14px; --font-size-body-large: 20px; --font-size-body: 16px; --font-size-body-small: 12px; --font-size-abstract: 12px; --font-size-nav: 14px; --font-size-title: 18px; --font-size-desc: 14px; /* Pesi */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* Line heights */ --line-height-heading: 1.2; --line-height-body-large: 30px; --line-height-body: 1.6rem; --line-height-body-small: 1.4rem; --line-height-abstract: 18px; /* Letter spacing */ --letter-spacing-nav: 0.02em; --letter-spacing-abstract: 0.04em; /* ---------------------------------------------------------- LAYOUT & GRIGLIA ---------------------------------------------------------- */ --container-max-width: 1200px; --gap-md: 24px; /* gutter base = default griglia */ --container-padding: var(--gap-md); /* il container usa lo stesso valore */ /* Gap scale */ --gap-xs: 8px; --gap-sm: 16px; /* --gap-md: 24px (definito sopra) */ --gap-lg: 40px; --gap-xl: 64px; /* Breakpoint — riferimento per i commenti nei @media NON usare in @media (le var() non funzionano nei media query) --bp-sm: 576px --bp-md: 768px --bp-lg: 992px --bp-xl: 1200px --bp-xxl: 1440px */ --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; --bp-xxl: 1440px; /* ---------------------------------------------------------- SPACING — multipli di 4px ---------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ---------------------------------------------------------- BORDER RADIUS ---------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ---------------------------------------------------------- OMBRE ---------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* ---------------------------------------------------------- TRANSIZIONI ---------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* ---------------------------------------------------------- Z-INDEX ---------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-above: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-search: 500; } /* ============================================================ CONTAINER ============================================================ */ .container { width: 100%; max-width: var(--container-max-width); margin-inline: auto; padding-inline: var(--container-padding); } .full-page .container, .section-full .container, .full-width .container { width: 100%; max-width: 100%; padding-inline: 0; } /* ============================================================ SEZIONI FULL-WIDTH ============================================================ */ .section-full { width: 100%; }