/* ========================================================================== ALBINI E CASTELLI — Design tokens Source: Figma "ALBINI E CASTELLI AEC — DEV SHM" (z2Wh5FBwvgNmMv4ZY12iKf) Every value here is measured from the file. Do not invent values. ========================================================================== */ :root { /* --- Colour — "PALETTE AEC SITO", node 39:454 ------------------------- */ --aec-rosso: #AF1E2D; /* signature: CTA band, links, social, arrows */ --aec-rosso-light: #E57A85; /* "storia AEC" timeline wheel */ --aec-bianco: #FFFFFF; /* page background, negative text */ --aec-beige: #E8E4E0; /* card bg, mega-bar, graphic rules */ --aec-tortora: #8C8279; /* header nav, footer headings, hover state */ --aec-antracite: #1E1E1E; /* body text, footer, dark bands */ /* Semantic aliases — prefer these in component CSS */ --c-text: var(--aec-antracite); --c-text-invert: var(--aec-bianco); --c-text-muted: var(--aec-tortora); --c-accent: var(--aec-rosso); --c-surface: var(--aec-bianco); --c-surface-alt: var(--aec-beige); --c-surface-dark: var(--aec-antracite); --c-rule: var(--aec-beige); /* Distinct from --c-rule: measured off the progetti tabs/cards (177:2449, 177:2530) — a neutral gray, not the warm beige used everywhere else. */ --c-border-light: #DFDFDF; /* --- Typography ------------------------------------------------------- */ --font-sans: "Roboto", "Helvetica Neue", Arial, sans-serif; /* Named Figma type tokens (get_variable_defs — exact). Each is weight / size / line-height. Letter-spacing is 0 throughout. */ --fw-h1-hero: 500; --fs-h1-hero: 56px; --lh-h1-hero: 62px; --fw-cta-big: 500; --fs-cta-big: 40px; --lh-cta-big: 44px; --fw-h2-large: 400; --fs-h2-large: 40px; --lh-h2-large: 45px; --fw-h2-small: 400; --fs-h2-small: 35px; --lh-h2-small: 42px; --fw-h3: 400; --fs-h3: 29px; --lh-h3: 35px; --fw-titoletti: 500; --fs-titoletti: 27px; --lh-titoletti: 38px; --fw-body-lg: 200; --fs-body-lg: 22px; --lh-body-lg: 30px; --fw-body-sm-light: 200; --fs-body-sm-light: 17px; --lh-body-sm-light: 22px; --fw-body-sm-med: 500; --fs-body-sm-med: 17px; --lh-body-sm-med: 22px; --fw-micro: 600; --fs-micro: 15px; --lh-micro: 22px; /* NUMERI BIG — Chi Siamo storia timeline years (2001:2793/2794). Not in the original 10-token get_variable_defs set, but a real named Figma text style (get_design_context reports it by name), same tier as the others above. */ --fw-numeri-big: 700; --fs-numeri-big: 56px; --lh-numeri-big: 61px; /* Unnamed intro-copy style — appears identically on Servizi hub (104:184) and General Contractor's intro paragraph (180:2524), so promoted to a token/utility on the second occurrence rather than re-hardcoded again. */ --fw-copy: 200; --fs-copy: 24px; --lh-copy: 29px; /* Component type NOT covered by a named Figma token — measured directly off the components, so it is still ground truth, just unnamed upstream. */ --fw-nav: 400; --fs-nav: 15px; --lh-nav: 34px; /* 88:304 */ --fw-megabar: 400; --fs-megabar: 16px; --lh-megabar: 34px; /* 77:427 */ --fw-foot-head: 600; --fs-foot-head: 12px; --lh-foot-head: 19px; /* 177:2514 */ --fw-foot-body: 300; --fs-foot-body: 12px; --lh-foot-body: 18px; /* 177:2514 */ --fw-breadcrumb: 600; --fs-breadcrumb: 12px; --lh-breadcrumb: 34px; /* 2001:2826 */ /* --- Layout ----------------------------------------------------------- */ --canvas: 1440px; /* Figma artboard width */ --container: 1280px; /* "Max width 1280 px / Centered layout" */ --gutter: 80px; /* (1440 - 1280) / 2 */ /* Inner padding for every full-bleed band. 0 at the design width (the 1280 column already sits inside a 1440 canvas); below that it becomes a real gutter. 25px matches the mobile frame 104:1380 (logo at x=25). */ --pad-x: 0px; /* Grid columns, measured from the artboards */ --col-3: 411px; /* services/home 3-up, x = 80 / 514 / 949 */ --gap-3: 23.5px; --col-proj: 413px; /* project cards, x = 78 / 513 / 948 */ --gap-proj: 22px; --col-2: 628px; /* 2-up split, x = 80 / 732 */ --gap-2: 24px; --col-narrow: 413px; /* left rail of the asymmetric text split */ /* --- Spacing — from the hidden spacer layers in 77:345 ----------------- */ --space-14: 14px; /* "testo spacing 40_01 SMALL" */ --space-40: 40px; /* "testo spacing 40_01 / _02" */ --space-100: 100px; /* "testo padding 100 top / bottom" */ --space-120: 120px; /* "spacing 120" */ /* --- Radii — "FRAME IMMAGINI" notes in 39:454 -------------------------- */ --radius-frame: 5px; /* "general frame angoli smussati radius 5" */ --radius-chip: 2px; /* "IT/EN menù a tendina angoli smussati radius 2"*/ /* --- Fixed band heights ------------------------------------------------ */ --h-header: 123px; /* 88:305 */ --h-megabar: 60px; /* 77:425 */ --h-footer: 540px; /* 177:2514 */ --h-cta: 219px; /* 177:2528 */ --h-hero-home: 809px; /* 177:2489 */ --h-hero-inner: 686px; /* inner-page hero image */ /* --- Component metrics ------------------------------------------------- */ --logo-w: 190px; /* header logo (194px in the footer) */ --logo-ratio: 1576 / 450; /* intrinsic ratio of the logo PNG */ --arrow-w: 21px; /* line length; the SVG is 21.75 incl. the head */ --arrow-gap: 13px; /* label → arrow gap inside a PULSANTE (133 wide)*/ --z-header: 100; --z-megabar: 90; --z-drawer: 200; --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 240ms; --dur-zoom: 600ms; /* slower than UI feedback (--dur) — reads as a deliberate, smooth image zoom, not a hover flick */ }