:root { font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } :root { --column-gap: 2.13%; --column-width-multiplier: 8.333; } :root { /* Spacing */ --spacing-space-0: 0rem; --spacing-space-1: 0.125rem; --spacing-space-2: 0.25rem; --spacing-space-3: 0.375rem; --spacing-space-4: 0.5rem; --spacing-space-5: 0.75rem; --spacing-space-6: 1rem; --spacing-space-7: 1.25rem; --spacing-space-8: 1.5rem; --spacing-space-9: 2rem; --spacing-space-10: 2.5rem; --spacing-space-11: 3rem; --spacing-space-12: 3.5rem; --spacing-space-13: 4rem; --spacing-space-14: 5rem; --spacing-space-15: 6rem; --spacing-space-16: 7rem; --spacing-space-17: 8rem; /* Border Radius */ --radius-radius-0: 0rem; --radius-radius-1: 0.125rem; --radius-radius-2: 0.25rem; --radius-radius-3: 0.375rem; --radius-radius-4: 0.5rem; --radius-radius-5: 0.75rem; --radius-radius-full: 62.4375rem; /* Stroke */ --stroke-stroke-0: 0rem; --stroke-stroke-1: 0.0625rem; --stroke-stroke-2: 0.125rem; /* Gap */ --gap-gap-0: 0rem; --gap-gap-1: 0.125rem; --gap-gap-2: 0.25rem; --gap-gap-3: 0.375rem; --gap-gap-4: 0.5rem; --gap-gap-5: 0.75rem; /* Font Sizes */ --typography-font-size-font-size-11: 0.6875rem; --typography-font-size-font-size-12: 0.75rem; --typography-font-size-font-size-14: 0.875rem; --typography-font-size-font-size-16: 1rem; --typography-font-size-font-size-18: 1.125rem; --typography-font-size-font-size-20: 1.25rem; --typography-font-size-font-size-22: 1.375rem; --typography-font-size-font-size-24: 1.5rem; --typography-font-size-font-size-28: 1.75rem; --typography-font-size-font-size-30: 1.875rem; --typography-font-size-font-size-32: 2rem; --typography-font-size-font-size-36: 2.25rem; --typography-font-size-font-size-40: 2.5rem; --typography-font-size-font-size-48: 3rem; --typography-font-size-font-size-56: 3.5rem; --typography-font-size-font-size-64: 4rem; --typography-font-size-font-size-72: 4.5rem; --typography-font-size-font-size-78: 4.875rem; /* Collection-only sizes (not in Italia scale) */ --typography-font-size-font-size-31: 1.9375rem; --typography-font-size-font-size-52: 3.25rem; /* Font Weights — FIX: unitless values, not rem */ --typography-font-weight-fw-thin: 300; --typography-font-weight-fw-regular: 400; --typography-font-weight-fw-medium: 500; --typography-font-weight-fw-semibold: 600; --typography-font-weight-fw-bold: 700; /* Line Heights */ --typography-line-height-line-height-12: 0.75rem; --typography-line-height-line-height-16: 1rem; --typography-line-height-line-height-20: 1.25rem; --typography-line-height-line-height-24: 1.5rem; --typography-line-height-line-height-28: 1.75rem; --typography-line-height-line-height-32: 2rem; --typography-line-height-line-height-36: 2.25rem; --typography-line-height-line-height-40: 2.5rem; --typography-line-height-line-height-44: 2.75rem; --typography-line-height-line-height-48: 3rem; --typography-line-height-line-height-56: 3.5rem; --typography-line-height-line-height-64: 4rem; --typography-line-height-line-height-72: 4.5rem; --typography-line-height-line-height-80: 5rem; /* Letter Spacing */ --typography-tracking-letter-spacing-tight: -0.025rem; --typography-tracking-letter-spacing-slight: -0.0125rem; --typography-tracking-letter-spacing-normal: 0rem; --typography-tracking-letter-spacing-ui: 0.0125rem; --typography-tracking-letter-spacing-ui-gentle: 0.009375rem; --typography-tracking-letter-spacing-wide: 0.0375rem; --typography-tracking-letter-spacing-overline: 0.05rem; --typography-tracking-letter-spacing-display: 0.125rem; } :root { /* Semantic color aliases */ ----accent-1: var(--accent-1---accent-1-50); ----accent-2: var(--accent-2---accent-2-300); ----bridge-blue: var(--tertiary---tertiary-950); ----bridge-red: var(--quaternary---quaternary-800); ----dark-blue: var(--quinary---quinary-950); ----dark-red: var(--senary---senary-950); ----primary-blue: var(--primary---primary-700); ----primary-red: var(--secondary---secondary-600); ----pure-black: #000000; ----pure-white: #ffffff; ----pure-white-trans: #ffffff4d; /* Primary (Blue) */ --primary---primary-50: #e8f7ff; --primary---primary-100: #d5efff; --primary---primary-200: #b3e0ff; --primary---primary-300: #85c8ff; --primary---primary-400: #56a2ff; --primary---primary-500: #2f7bff; --primary---primary-600: #0c4eff; --primary---primary-700: #0043ff; --primary---primary-800: #063dcd; --primary---primary-900: #103b9f; --primary---primary-950: #0a215c; /* Secondary (Red) */ --secondary---secondary-50: #fff1f0; --secondary---secondary-100: #ffdfdd; --secondary---secondary-200: #ffc4c0; --secondary---secondary-300: #ff9c94; --secondary---secondary-400: #ff6357; --secondary---secondary-500: #ff3323; --secondary---secondary-600: #ff1200; --secondary---secondary-700: #d70f00; --secondary---secondary-800: #b10f03; --secondary---secondary-900: #92140a; --secondary---secondary-950: #500600; /* Tertiary */ --tertiary---tertiary-50: #edfaff; --tertiary---tertiary-100: #d6f2ff; --tertiary---tertiary-200: #b7e9ff; --tertiary---tertiary-300: #85deff; --tertiary---tertiary-400: #4cc9ff; --tertiary---tertiary-500: #23abff; --tertiary---tertiary-600: #0b8dff; --tertiary---tertiary-700: #0574f0; --tertiary---tertiary-800: #0b5dc2; --tertiary---tertiary-900: #105098; --tertiary---tertiary-950: #0c2749; /* Quaternary */ --quaternary---quaternary-50: #fff1f2; --quaternary---quaternary-100: #ffe0e3; --quaternary---quaternary-200: #ffc6cc; --quaternary---quaternary-300: #ff9ea8; --quaternary---quaternary-400: #ff6675; --quaternary---quaternary-500: #fd364a; --quaternary---quaternary-600: #eb172c; --quaternary---quaternary-700: #c60f21; --quaternary---quaternary-800: #aa1120; --quaternary---quaternary-900: #871520; --quaternary---quaternary-950: #4a050c; /* Quinary (Dark Blue) */ --quinary---quinary-50: #e4f6ff; --quinary---quinary-100: #cfedff; --quinary---quinary-200: #a8dbff; --quinary---quinary-300: #74c1ff; --quinary---quinary-400: #3e94ff; --quinary---quinary-500: #1366ff; --quinary---quinary-600: #0053ff; --quinary---quinary-700: #0053ff; --quinary---quinary-800: #004ae4; --quinary---quinary-900: #0033b0; --quinary---quinary-950: #000e35; /* Senary */ --senary---senary-50: #fff0f0; --senary---senary-100: #ffdddd; --senary---senary-200: #ffc1c1; --senary---senary-300: #ff9696; --senary---senary-400: #ff5a5a; --senary---senary-500: #ff2727; --senary---senary-600: #fb0707; --senary---senary-700: #d40101; --senary---senary-800: #ae0606; --senary---senary-900: #900c0c; --senary---senary-950: #660000; /* Accent 1 (Warm/Gold) */ --accent-1---accent-1-50: #f7f5ee; --accent-1---accent-1-100: #f2efe2; --accent-1---accent-1-200: #e3dcc5; --accent-1---accent-1-300: #d1c4a0; --accent-1---accent-1-400: #bea779; --accent-1---accent-1-500: #b0925f; --accent-1---accent-1-600: #a38053; --accent-1---accent-1-700: #886846; --accent-1---accent-1-800: #6e553e; --accent-1---accent-1-900: #5a4634; --accent-1---accent-1-950: #30241a; /* Accent 2 (Cool/Sky) */ --accent-2---accent-2-50: #f2f8fd; --accent-2---accent-2-100: #e3f0fb; --accent-2---accent-2-200: #c1e1f6; --accent-2---accent-2-300: #a3d4f2; --accent-2---accent-2-400: #4cace4; --accent-2---accent-2-500: #2592d2; --accent-2---accent-2-600: #1774b2; --accent-2---accent-2-700: #145d90; --accent-2---accent-2-800: #144f78; --accent-2---accent-2-900: #164364; --accent-2---accent-2-950: #0f2b42; /* Neutral */ --neutral---neutral-50: #f6f6f6; --neutral---neutral-50-trans: #f6f6f64d; --neutral---neutral-100: #e7e7e7; --neutral---neutral-200: #d1d1d1; --neutral---neutral-300: #b0b0b0; --neutral---neutral-400: #888888; --neutral---neutral-500: #6d6d6d; --neutral---neutral-600: #5d5d5d; --neutral---neutral-700: #4f4f4f; --neutral---neutral-800: #454545; --neutral---neutral-800-trans: #4545451a; --neutral---neutral-900: #3d3d3d; --neutral---neutral-950: #232323; } :root { /* Font Families */ --base-font-family: Gotham; --title-font-family: "Miller Display"; /* Weights (constant across breakpoints) */ --weight-display-weight: var(--typography-font-weight-fw-thin); --weight-body-weight: var(--typography-font-weight-fw-regular); --weight-caption-weight: var(--typography-font-weight-fw-regular); --weight-helper-weight: var(--typography-font-weight-fw-regular); --weight-lead-weight: var(--typography-font-weight-fw-regular); --weight-h1-weight: var(--typography-font-weight-fw-regular); --weight-h2-weight: var(--typography-font-weight-fw-regular); --weight-placeholder-weight: var(--typography-font-weight-fw-medium); --weight-small-weight: var(--typography-font-weight-fw-regular); --weight-badge-weight: var(--typography-font-weight-fw-semibold); --weight-button-l-weight: var(--typography-font-weight-fw-medium); --weight-button-m-weight: var(--typography-font-weight-fw-medium); --weight-button-s-weight: var(--typography-font-weight-fw-medium); --weight-h4-weight: var(--typography-font-weight-fw-medium); --weight-h5-weight: var(--typography-font-weight-fw-medium); --weight-h6-weight: var(--typography-font-weight-fw-semibold); --weight-label-weight: var(--typography-font-weight-fw-medium); --weight-nav-weight: var(--typography-font-weight-fw-medium); --weight-overline-weight: var(--typography-font-weight-fw-semibold); --weight-h3-weight: var(--typography-font-weight-fw-bold); /* Tracking (constant across breakpoints) */ --tracking-display-tracking: var(--typography-tracking-letter-spacing-tight); --tracking-body-tracking: var(--typography-tracking-letter-spacing-normal); --tracking-h4-tracking: var(--typography-tracking-letter-spacing-normal); --tracking-h5-tracking: var(--typography-tracking-letter-spacing-normal); --tracking-helper-tracking: var(--typography-tracking-letter-spacing-normal); --tracking-label-tracking: var(--typography-tracking-letter-spacing-normal); --tracking-lead-tracking: var(--typography-tracking-letter-spacing-normal); --tracking-nav-primary-tracking: var(--typography-tracking-letter-spacing-normal); --tracking-badge-tracking: var(--typography-tracking-letter-spacing-ui); --tracking-button-l-tracking: var(--typography-tracking-letter-spacing-ui-gentle); --tracking-button-m-tracking: var(--typography-tracking-letter-spacing-ui-gentle); --tracking-button-s-tracking: var(--typography-tracking-letter-spacing-ui-gentle); --tracking-caption-tracking: var(--typography-tracking-letter-spacing-ui-gentle); --tracking-h1-tracking: var(--typography-tracking-letter-spacing-display); --tracking-h2-tracking: var(--typography-tracking-letter-spacing-ui-gentle); --tracking-h3-tracking: var(--typography-tracking-letter-spacing-wide); --tracking-h6-tracking: var(--typography-tracking-letter-spacing-ui); --tracking-nav-secondary-tracking: var(--typography-tracking-letter-spacing-ui-gentle); --tracking-small-tracking: var(--typography-tracking-letter-spacing-ui-gentle); --tracking-overline-tracking: var(--typography-tracking-letter-spacing-overline); /* Sizes — Mobile */ --size-badge-size: var(--typography-font-size-font-size-11); --size-caption-size: var(--typography-font-size-font-size-11); --size-helper-size: var(--typography-font-size-font-size-11); --size-overline-size: var(--typography-font-size-font-size-11); --size-nav-footer-size: var(--typography-font-size-font-size-12); --size-body-size: var(--typography-font-size-font-size-14); --size-button-m-size: var(--typography-font-size-font-size-14); --size-button-s-size: var(--typography-font-size-font-size-14); --size-h6-size: var(--typography-font-size-font-size-14); --size-nav-secondary-size: var(--typography-font-size-font-size-14); --size-placeholder-s-size: var(--typography-font-size-font-size-14); --size-small-size: var(--typography-font-size-font-size-14); --size-button-l-size: var(--typography-font-size-font-size-16); --size-h3-card-size: var(--typography-font-size-font-size-16); --size-h5-size: var(--typography-font-size-font-size-16); --size-label-size: var(--typography-font-size-font-size-16); --size-nav-primary-size: var(--typography-font-size-font-size-16); --size-h4-size: var(--typography-font-size-font-size-18); --size-lead-size: var(--typography-font-size-font-size-18); --size-placeholder-m-size: var(--typography-font-size-font-size-20); --size-h3-size: var(--typography-font-size-font-size-22); --size-h2-size: var(--typography-font-size-font-size-30); --size-h1-size: var(--typography-font-size-font-size-36); --size-display-size: var(--typography-font-size-font-size-48); /* Line Heights — Mobile */ --line-height-badge-line-height: var(--typography-line-height-line-height-16); --line-height-button-m-line-height: var(--typography-line-height-line-height-16); --line-height-button-s-line-height: var(--typography-line-height-line-height-16); --line-height-caption-line-height: var(--typography-line-height-line-height-16); --line-height-h3-card-line-height: var(--typography-line-height-line-height-16); --line-height-helper-line-height: var(--typography-line-height-line-height-16); --line-height-nav-secondary-line-height: var(--typography-line-height-line-height-16); --line-height-overline-line-height: var(--typography-line-height-line-height-16); --line-height-small-line-height: var(--typography-line-height-line-height-16); --line-height-body-line-height: var(--typography-line-height-line-height-20); --line-height-button-l-line-height: var(--typography-line-height-line-height-20); --line-height-h6-line-height: var(--typography-line-height-line-height-20); --line-height-label-line-height: var(--typography-line-height-line-height-20); --line-height-nav-primary-line-height: var(--typography-line-height-line-height-20); --line-height-placeholder-s-line-height: var(--typography-line-height-line-height-20); --line-height-h3-line-height: var(--typography-line-height-line-height-24); --line-height-h4-line-height: var(--typography-line-height-line-height-24); --line-height-h5-line-height: var(--typography-line-height-line-height-24); --line-height-lead-line-height: var(--typography-line-height-line-height-24); --line-height-placeholder-m-line-height: var(--typography-line-height-line-height-24); --line-height-h2-line-height: var(--typography-line-height-line-height-32); --line-height-h1-line-height: var(--typography-line-height-line-height-40); --line-height-display-line-height: var(--typography-line-height-line-height-56); } :root { /* Sizes */ --size-badge-size: var(--typography-font-size-font-size-12); --size-caption-size: var(--typography-font-size-font-size-12); --size-helper-size: var(--typography-font-size-font-size-12); --size-overline-size: var(--typography-font-size-font-size-12); --size-body-size: var(--typography-font-size-font-size-16); --size-h3-size: var(--typography-font-size-font-size-24); --size-h2-size: var(--typography-font-size-font-size-40); --size-h1-size: var(--typography-font-size-font-size-48); --size-display-size: var(--typography-font-size-font-size-56); /* Line Heights */ --line-height-small-line-height: var(--typography-line-height-line-height-20); --line-height-body-line-height: var(--typography-line-height-line-height-24); --line-height-h3-line-height: var(--typography-line-height-line-height-32); --line-height-h2-line-height: var(--typography-line-height-line-height-44); --line-height-h1-line-height: var(--typography-line-height-line-height-56); --line-height-display-line-height: var(--typography-line-height-line-height-64); } :root { /* Sizes — riduzione tipografia desktop (≥18px), 06/2026. Headers e lead più "lounge", mantenendo il carattere editoriale Collection (h1/display tengono il "wow" a 64px). */ --size-h3-card-size: var(--typography-font-size-font-size-16); --size-h4-size: var(--typography-font-size-font-size-18); --size-lead-size: var(--typography-font-size-font-size-18); --size-placeholder-m-size: var(--typography-font-size-font-size-18); --size-h3-size: var(--typography-font-size-font-size-28); --size-h2-size: var(--typography-font-size-font-size-40); --size-h1-size: var(--typography-font-size-font-size-64); --size-display-size: var(--typography-font-size-font-size-64); /* Line Heights */ --line-height-h4-line-height: var(--typography-line-height-line-height-24); --line-height-lead-line-height: var(--typography-line-height-line-height-24); --line-height-h2-line-height: var(--typography-line-height-line-height-48); --line-height-h1-line-height: var(--typography-line-height-line-height-72); --line-height-display-line-height: var(--typography-line-height-line-height-72); } :root { --block-block-gap: var(--spacing-space-6); --block-block-padding-x: var(--spacing-space-7); --block-block-padding-y: var(--spacing-space-10); --container-padding-inline: var(--spacing-space-6); --container-min-width-cards: 20rem; --container-max-width-cards-avatar: 47.9375rem; --container-max-width-cards-text: 47.9375rem; --container-max-width-cards: 47.9375rem; --container-max-width-text: 47.5rem; --container-max-width: 47.9375rem; --section-padding-block-header: var(--spacing-space-4); --section-section-gap: var(--spacing-space-9); --section-section-gap-l: var(--spacing-space-12); --section-padding-block-m: var(--spacing-space-11); --section-padding-block-l: var(--spacing-space-14); --section-min-height-hero: 40rem; ----card-bento-padding-mobile: var(--spacing-space-6); ----card-bento-padding-desktop: var(--spacing-space-8); } :root { --block-block-gap: var(--spacing-space-8); --block-block-padding-x: var(--spacing-space-9); --block-block-padding-y: var(--spacing-space-12); --container-min-width-cards: 48.75rem; --container-max-width-cards-avatar: 8.75rem; --container-max-width-cards-text: 25rem; --container-max-width-cards: 32rem; --container-max-width-text: 48.75rem; --container-max-width: 64rem; --section-padding-block-header: var(--spacing-space-5); --section-section-gap: var(--spacing-space-10); --section-section-gap-l: var(--spacing-space-13); --section-padding-block-m: var(--spacing-space-13); --section-padding-block-l: var(--spacing-space-15); --section-min-height-hero: 42.5rem; } :root { --block-block-padding-x: var(--spacing-space-11); --block-block-padding-y: var(--spacing-space-13); --container-min-width-cards: 27.5rem; --container-max-width-cards-avatar: 8.75rem; --container-max-width-cards-text: 25rem; --container-max-width-cards: 42.25rem; --container-max-width-text: 52.5rem; --container-max-width: 80rem; --section-padding-block-header: var(--spacing-space-6); --section-section-gap: var(--spacing-space-11); --section-section-gap-l: var(--spacing-space-14); --section-padding-block-m: var(--spacing-space-15); --section-padding-block-l: var(--spacing-space-17); --section-min-height-hero: 45rem; } :root { /* Border Radius */ --border-radius---radius-tabs-item-bottom: var(--radius-radius-0); --border-radius---radius-link: var(--radius-radius-1); --border-radius---radius-navigation: var(--radius-radius-1); --border-radius---radius-container-generic: var(--radius-radius-2); --border-radius---radius-image: var(--radius-radius-2); --border-radius---radius-tabs-item-top: var(--radius-radius-3); --border-radius---radius-card-mobile: var(--spacing-space-8); --border-radius---radius-card-desktop: var(--spacing-space-11); --border-radius---radius-button-l: var(--radius-radius-full); --border-radius---radius-button-m: var(--radius-radius-full); --border-radius---radius-button-s: var(--radius-radius-full); --border-radius---radius-image-avatar: var(--radius-radius-full); --border-radius---radius-link-focus: var(--radius-radius-full); --border-radius---radius-pill: var(--radius-radius-full); /* Gap */ --gap---gap-button: var(--spacing-space-0); --gap---gap-breadcrumbs: var(--spacing-space-2); --gap---gap-button-l: var(--spacing-space-4); --gap---gap-button-m: var(--spacing-space-4); --gap---gap-navigation: var(--spacing-space-4); --gap---gap-tabs-item: var(--spacing-space-4); --gap---gap-container-generic: var(--spacing-space-8); /* NOTE: Button heights (--height---height-button-*) intentionally removed. Button height is determined by content + padding + line-height. Do NOT use fixed height on buttons. */ /* Icon Sizes */ --icons---icon-chip: var(--spacing-space-5); --icons---icon-button-s: var(--spacing-space-6); --icons---icon-button-m: var(--spacing-space-7); --icons---icon-button-l: var(--spacing-space-8); /* Padding X */ --padding-x---padding-x-button: var(--spacing-space-1); --padding-x---padding-x-button-text-icon-s: var(--spacing-space-2); --padding-x---padding-x-link: var(--spacing-space-2); --padding-x---padding-x-navigation-footer: var(--spacing-space-3); --padding-x---padding-x-button-icon-s: var(--spacing-space-4); --padding-x---padding-x-button-text-s: var(--spacing-space-4); --padding-x---padding-x-navigation-secondary: var(--spacing-space-4); --padding-x---padding-x-navigation-primary: var(--spacing-space-5); --padding-x---padding-x-button-m: var(--spacing-space-6); --padding-x---padding-x-button-s-text: var(--spacing-space-6); --padding-x---padding-x-tabs-item: var(--spacing-space-6); --padding-x---padding-x-button-l: var(--spacing-space-7); --padding-x---padding-x-button-m-text: var(--spacing-space-7); --padding-x---padding-x-container-generic: var(--spacing-space-7); --padding-x---padding-x-button-l-text: var(--spacing-space-8); /* Padding Y */ --padding-y---padding-y-navigation-footer: var(--spacing-space-1); --padding-y---padding-y-button-text-s: var(--spacing-space-2); --padding-y---padding-y-navigation-secondary: var(--spacing-space-2); --padding-y---padding-y-navigation-primary: var(--spacing-space-3); --padding-y---padding-y-tabs-item: var(--spacing-space-3); --padding-y---padding-y-button-s: var(--spacing-space-4); --padding-y---padding-y-button-l: var(--spacing-space-5); --padding-y---padding-y-button-m: var(--spacing-space-5); --padding-y---padding-y-container-generic: var(--spacing-space-9); } :root { /* Focus Rings */ ----accent-focus-ring: var(--accent-1---accent-1-200); ----primary-focus-ring: var(--primary---primary-300); /* Semantic Named */ ----text-color-primary: var(--primary---primary-700); ----text-color-secondary: var(--secondary---secondary-600); /* Text */ --text---text-color: var(--neutral---neutral-950); --text---text-color-primary: var(--primary---primary-700); --text---text-color-weak: var(--neutral---neutral-600); /* neutral-400 (#888) → 3.54:1 on white, below WCAG 1.4.3. Bumped to neutral-500 (#6d6d6d ≈ 4.77:1). */ --text---text-color-weaker: var(--neutral---neutral-500); --text---text-color-weakest: var(--neutral---neutral-200); --text---text-color-white: var(----pure-white); /* Borders */ --borders---border-color: var(--neutral---neutral-950); --borders---border-color-weak: var(--neutral---neutral-300); /* Surfaces */ --surfaces---bg-light: var(--accent-1---accent-1-50); --surfaces---bg-dark: var(----pure-black); --surfaces---bg-extra-dark: #0c2749e5; --surfaces---bg-white: var(----pure-white); --surfaces---bg-primary: var(--primary---primary-700); --surfaces---bg-secondary: var(--secondary---secondary-700); --surfaces---bg-secondary-dark: var(--senary---senary-900); --surfaces---bg-section-transparent: #0b5dc2d9; --surfaces---bg-trans-dark: var(--neutral---neutral-800-trans); --surfaces---bg-trans-light: var(----pure-white-trans); --surfaces---bg-card-on-primary: #3369ff; /* white 20% su #0043ff (primary blue) */ --surfaces---bg-card-on-dark: #333333; /* white 20% su #000000 (black) */ --surfaces---bg-chip-dark: var(--neutral---neutral-900); --surfaces---bg-chip-default: var(--neutral---neutral-800-trans); --surfaces---bg-chip-primary: var(--primary---primary-200); /* Links */ --link---text-link-color: var(--primary---primary-700); --link---border-link-color: var(--primary---primary-700); --link---bg-link-hover: var(--primary---primary-700); --link---link-focus: var(----primary-focus-ring); /* Inputs */ --input---input-bg: #fffffff2; --input---input-disabled-bg: #ffffffbf; /* Navigation */ --navigation---nav-text: var(--neutral---neutral-900); --navigation---nav-text-hover: var(--neutral---neutral-900); --navigation---nav-text-selected: var(--primary---primary-700); --navigation---nav-bg-hover: var(--neutral---neutral-100); --navigation---nav-focus-ring: var(----primary-focus-ring); /* Tabs */ --tabs---tabs-item-text: var(--neutral---neutral-900); --tabs---tabs-item-text-hover: var(--neutral---neutral-900); --tabs---tabs-item-selected: var(--primary---primary-700); --tabs---tabs-item-hover: var(--neutral---neutral-800-trans); --tabs---tabs-item-focus-ring: var(----primary-focus-ring); /* Buttons: Primary — Collection: black default, blue hover */ --buttons-primary---btn-primary-bg: var(----pure-black); --buttons-primary---btn-primary-bg-hover: var(--primary---primary-700); --buttons-primary---btn-primary-bg-disabled: var(--neutral---neutral-200); --buttons-primary---btn-primary-bg-icon: #ffffff33; --buttons-primary---btn-primary-text: var(----pure-white); --buttons-primary---btn-primary-text-disabled: var(--neutral---neutral-600); --buttons-primary---btn-primary-text-outline: var(----pure-black); --buttons-primary---btn-primary-border: var(----pure-black); --buttons-primary---btn-primary-border-hover: var(--primary---primary-700); --buttons-primary---btn-primary-border-disabled: var(--neutral---neutral-400); --buttons-primary---btn-primary-focus: var(----primary-focus-ring); /* Buttons: Secondary */ --buttons-secondary---btn-secondary-bg: var(--secondary---secondary-700); --buttons-secondary---btn-secondary-bg-hover: var(--secondary---secondary-600); --buttons-secondary---btn-secondary-bg-disabled: var(--neutral---neutral-200); --buttons-secondary---btn-secondary-bg-icon: #ffffff33; --buttons-secondary---btn-secondary-text: var(----pure-white); --buttons-secondary---btn-secondary-text-disabled: var(--neutral---neutral-500); --buttons-secondary---btn-secondary-text-outline: var(--secondary---secondary-700); --buttons-secondary---btn-secondary-border: var(--secondary---secondary-700); --buttons-secondary---btn-secondary-border-hover: var(--secondary---secondary-600); --buttons-secondary---btn-secondary-border-disabled: var(--neutral---neutral-200); --buttons-secondary---btn-secondary-focus: var(--secondary---secondary-300); /* Buttons: Neutral */ --buttons-neutral---btn-neutral-bg: var(----pure-white); --buttons-neutral---btn-neutral-bg-hover: var(--neutral---neutral-100); --buttons-neutral---btn-neutral-bg-disabled: var(--neutral---neutral-200); --buttons-neutral---btn-neutral-bg-icon: #2323231a; --buttons-neutral---btn-neutral-text: var(--neutral---neutral-950); --buttons-neutral---btn-neutral-text-disabled: var(--neutral---neutral-500); --buttons-neutral---btn-neutral-text-icon: var(--neutral---neutral-950); --buttons-neutral---btn-neutral-border: var(--neutral---neutral-200); --buttons-neutral---btn-neutral-border-hover: var(--neutral---neutral-300); --buttons-neutral---btn-neutral-border-disabled: var(--neutral---neutral-200); --buttons-neutral---btn-neutral-focus: var(--accent-1---accent-1-200); /* Buttons: Accent */ --buttons-accent---btn-accent-bg: var(--accent-1---accent-1-50); --buttons-accent---btn-accent-bg-hover: var(--accent-1---accent-1-200); --buttons-accent---btn-accent-bg-disabled: var(--neutral---neutral-100); --buttons-accent---btn-accent-bg-icon: #2323231a; --buttons-accent---btn-accent-text: var(--neutral---neutral-950); --buttons-accent---btn-accent-text-disabled: var(--neutral---neutral-400); --buttons-accent---btn-accent-text-outline: var(--neutral---neutral-950); --buttons-accent---btn-accent-border: var(--accent-1---accent-1-200); --buttons-accent---btn-accent-border-hover: var(--accent-1---accent-1-300); --buttons-accent---btn-accent-border-disabled: var(--neutral---neutral-300); --buttons-accent---btn-accent-focus: var(----accent-focus-ring); } @scope (.hubspot-scope) { /* Theme base styles */ /* Tools Any animations, or functions used throughout the project. Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here */ /* Generic This is where reset, normalize & box-sizing styles go. */ *, *:before, *:after { box-sizing: border-box; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { box-sizing: content-box; height: 0; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Remove the inheritance of text transform in Edge and Firefox. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Objects Non-cosmetic design patterns including grid and layout classes) */ /* CSS variables */ /* Mobile layout */ .row-fluid { display: flex; flex-wrap: wrap; width: 100%; } .row-fluid .span1, .row-fluid .span2, .row-fluid .span3, .row-fluid .span4, .row-fluid .span5, .row-fluid .span6, .row-fluid .span7, .row-fluid .span8, .row-fluid .span9, .row-fluid .span10, .row-fluid .span11, .row-fluid .span12{ min-height: 1px; width: 100%; } /* Desktop layout */ @media (min-width: 768px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100)); } .row-fluid .span2 { width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100)); } .row-fluid .span3 { width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100)); } .row-fluid .span4 { width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100)); } .row-fluid .span5 { width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100)); } .row-fluid .span6 { width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100)); } .row-fluid .span7 { width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100)); } .row-fluid .span8 { width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100)); } .row-fluid .span9 { width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100)); } .row-fluid .span10 { width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100)); } .row-fluid .span11 { width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100)); } } .content-wrapper { margin: 0 auto; padding: 0 1rem; } @media screen and (min-width: 1380px) { .content-wrapper { padding: 0; } } .dnd-section > .row-fluid { margin: 0 auto; } .dnd-section .dnd-column { padding: 0 1rem; } @media (max-width: 767px) { .dnd-section .dnd-column { padding: 0; } } /*** Remax ***/ .dnd-section .dnd-column { padding: 0; } /* Elements Base HTML elements are styled in this section (,

Stefano Petrillo

Statistics

Results

Certifications obtained

Languages spoken