/* ========================================================================== CRESPI CORREDORIA · tokens.css Font: Crespi_Corredoria.fig (frames «V-4», «V-4-mobile», «Navigation-Desktop», «Navigation-Mobile» i «Solucions»), llegit directament del binari fig-kiwi. Cap regla d'estil aquí: només custom properties. Les correccions sobre el Figma s'expliquen al README («Correccions»). ========================================================================== */ :root { /* ------------------------------------------------------------------ 01 · PRIMITIVES Al Figma hi ha parelles gairebé iguals (#FFCC6F / #F7CF7C, #722E34 / #742F35, #E6E6D9 / #E8E9DA, #181919 / #2D2C2C, #F2F1F1 / #ACA8A8 al 16 %). Aquí n'hi ha un de cada. ------------------------------------------------------------------ */ --white: #FFFFFF; --sand-50: #F5F3F0; /* barra superior, cercles d'icona, Visió, hovers */ --sand-100: #F2F1F1; /* píndoles (eyebrows) sobre clar */ --sand-200: #E6E6D9; /* separadors i vores */ --sand-300: #E9E5DE; /* hover dels cercles d'icona */ --gray-500: #6B6C6C; --gray-600: #59565F; --gray-900: #2D2C2C; --black: #000000; --yellow-400: #FFCC6F; /* accent: CTA i element destacat */ --yellow-500: #F5BC54; /* hover dels botons grocs */ --burgundy-700: #722E34; /* marca: peu, icona activa, hover fort */ --burgundy-800: #5E252A; /* ------------------------------------------------------------------ 02 · SEMÀNTICS · contrastos WCAG 2.2 mesurats ------------------------------------------------------------------ */ --bg-page: var(--white); --bg-muted: var(--sand-50); --bg-pill: var(--sand-100); --bg-accent: var(--yellow-400); --bg-accent-hover: var(--yellow-500); --bg-brand: var(--burgundy-700); --bg-ink: var(--gray-900); --text-primary: var(--gray-900); /* 13.9:1 sobre blanc · 9.4:1 sobre groc */ --text-secondary: var(--gray-600); /* 7.2:1 sobre blanc · 6.5:1 sobre sand-50 · 4.8:1 sobre groc */ --text-tertiary: var(--gray-500); /* 4.8:1 sobre sand-50 (barra superior) */ /* Frase de Visió: la part atenuada. Al Figma és tinta al 40 % (2.3:1, no arriba al 3:1 de text gran). Ara 3.6:1 sobre sand-50 (text gran: mínim 3:1). */ --text-dimmed: #827E7B; --text-on-dark: var(--white); /* 9.7:1 sobre bordeus */ /* Peu: al Figma, blanc al 56 % (4.1:1). Al 76 %: 6.3:1 */ --text-on-dark-muted: rgba(255, 255, 255, 0.76); /* Targetes de xifres: blanc al 72 % sobre el vel fosc (≥ 6:1) */ --text-on-photo-muted: rgba(255, 255, 255, 0.78); --text-hero-lead: rgba(255, 255, 255, 0.86); --border: var(--sand-200); --border-on-dark: rgba(255, 255, 255, 0.24); --icon-circle: var(--sand-50); --icon-circle-hover: var(--sand-300); /* Focus visible: 2 px de tinta (o blanc sobre fosc) amb separació */ --focus-ring: var(--gray-900); --focus-ring-on-dark: var(--white); /* ------------------------------------------------------------------ 03 · GRADIENTS I VELS ------------------------------------------------------------------ */ /* Hero: de transparent (dalt) a negre (baix) sobre la foto */ --veil-hero: linear-gradient(180deg, rgba(35, 37, 33, 0) 0%, rgba(35, 37, 33, 0.15) 30%, rgba(0, 0, 0, 0.92) 100%); /* Targetes de xifres: la foto es fon amb la tinta a la meitat inferior */ --veil-stat: linear-gradient(180deg, rgba(45, 44, 44, 0) 25%, rgba(45, 44, 44, 0.72) 62%, #2D2C2C 100%); /* Franja de logotips: esvaïment als extrems */ --fade-strip: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%); /* Pindola de vidre sobre la foto de l'hero */ --glass-pill: rgba(172, 168, 168, 0.24); --shadow-raised: 0 24px 48px -12px rgba(45, 44, 44, 0.45); --shadow-panel: 0 24px 40px -24px rgba(45, 44, 44, 0.25); /* ------------------------------------------------------------------ 04 · ESPAIS I RADIS Escala de 4 px. Al Figma les seccions tenen 148 a dalt i a baix (escriptori) i 72 (mòbil): 148 surt de l'escala i queda a 144. ------------------------------------------------------------------ */ --space-4: 0.25rem; --space-8: 0.5rem; --space-12: 0.75rem; --space-16: 1rem; --space-20: 1.25rem; --space-24: 1.5rem; --space-32: 2rem; --space-40: 2.5rem; --space-48: 3rem; --space-64: 4rem; --space-72: 4.5rem; --section-y: clamp(4.5rem, 2.829rem + 6.857vw, 9rem); /* 72 → 144 */ --block-gap: clamp(2rem, 1.257rem + 3.048vw, 4rem); /* 32 → 64 */ --radius-sm: 6px; --radius-lg: 16px; --radius-pill: 999px; /* Contenidor: el frame és de 1440 amb 64 de marge (1312 de contingut) */ --container: 82rem; /* 1312 */ --gutter: var(--space-16); --pad-x: max(var(--gutter), (100% - var(--container)) / 2); /* Barra de navegació */ --topbar-h: 0px; /* només a escriptori */ --nav-h: 3.75rem; /* 60 mòbil · 80 escriptori */ --header-h: calc(var(--topbar-h) + var(--nav-h)); /* ------------------------------------------------------------------ 05 · TIPOGRAFIA Inter (variable, OFL), la del Figma. Escala 1,25 en totes dues mides: escriptori a partir de 13,6 i mòbil a partir de 12/15. Cada mida passa en línia recta de 390 a 1440 px (clamp). ------------------------------------------------------------------ */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fs-hero: clamp(2.861rem, 2.419rem + 1.816vw, 4.053rem); /* 45.8 → 64.9 */ --fs-h2: clamp(2.289rem, 1.934rem + 1.453vw, 3.243rem); /* 36.6 → 51.9 */ --fs-stat: clamp(2.861rem, 2.72rem + 0.581vw, 3.243rem); /* 45.8 → 51.9 */ --fs-stat-sm: clamp(2.289rem, 2.2rem + 0.37vw, 2.594rem); /* 36.6 → 41.5 */ --fs-h3: clamp(1.831rem, 1.741rem + 0.3714vw, 2.075rem); /* 29.3 → 33.2 */ --fs-quote: var(--fs-h3); --fs-h4: clamp(1.465rem, 1.393rem + 0.2971vw, 1.66rem); /* 23.4 → 26.6 */ --fs-lead: clamp(1.172rem, 1.114rem + 0.2381vw, 1.328rem); /* 18.8 → 21.3 */ --fs-body: clamp(0.9375rem, 0.8911rem + 0.1905vw, 1.0625rem);/* 15 → 17 */ --fs-small: 0.85rem; /* 13.6 */ --fs-eyebrow: clamp(0.75rem, 0.7129rem + 0.1524vw, 0.85rem); /* 12 → 13.6 */ --fs-brand: clamp(1.25rem, 1.157rem + 0.381vw, 1.5rem); /* 20 → 24 */ --fs-nav: 1.0625rem; /* 17 */ --fs-menu: 1.172rem; /* 18.75 */ --lh-tight: 1.1; --lh-snug: 1.35; --lh-body: 1.5; --lh-label: 1.3; /* Tracking: el Figma posa -6 % a tot, també al cos de 13–17 px. Es manté als titulars (el caràcter del disseny) i s'obre al text llarg. */ --ls-display: -0.06em; --ls-heading: -0.05em; --ls-lead: -0.025em; --ls-body: -0.01em; --ls-label: 0.01em; /* ------------------------------------------------------------------ 06 · MOVIMENT ------------------------------------------------------------------ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 360ms; --marquee-duration: 36s; } @media (min-width: 64rem) { :root { --gutter: var(--space-64); --topbar-h: 2.5rem; /* 40 */ --nav-h: 5rem; /* 80 */ } } @media (min-width: 40rem) and (max-width: 63.99rem) { :root { --gutter: var(--space-32); } }