/* ========================================================================== INNOVOFOOD · tokens.css Font: Innovofood.fig, llegit directament del binari fig-kiwi. · Colors, espais i radis → col·leccions de variables Primitives, Semantic i Tokens del propi document. · Tipografia → mides REALS del frame «Final», que és el que ha aprovat el client (vegeu la nota a la secció 05). · Efectes → estils d'efecte Glass/*, Button/Primary, Shadow/Card. Cap regla d'estil aquí: només custom properties. ========================================================================== */ :root { /* ------------------------------------------------------------------ 01 · PRIMITIVES (col·lecció «Primitives») ------------------------------------------------------------------ */ --neutral-white: #FFFFFF; --neutral-off-white: #F6F6F6; --neutral-gray-100: #F9FAFB; --neutral-gray-200: #E6E4E5; --neutral-gray-300: #C7C5C7; --neutral-gray-900: #2D2C2C; --neutral-black: #090909; --neutral-pure-black: #000000; --olive-600: #4C503F; --olive-500: #676A5E; --sage-300: #B0B7A1; --olive-accent: #898854; --accent-purple: #7F72BB; --accent-rose: #EFE0E1; --accent-beige: #B4A687; --accent-cream: #F1EDDE; --accent-teal: #93B8BF; --accent-warm-brown: #B88B65; --accent-natural-white: #FEFFFC; /* ------------------------------------------------------------------ 02 · SEMÀNTICS (col·lecció «Semantic») Contrastos mesurats (scripts/contrast.py). Text principal i secundari passen AA sobre tots els fons clars del document, amb UNA excepció: · text-secondary sobre accent-rose → 4.32:1, no apte per a text petit Els accents NO són colors de text petit: beix 2.4, sàlvia 2.1, marró 3.0, porpra 4.2, oliva 3.7 sobre blanc. Decoració, punts, xifres grans. ------------------------------------------------------------------ */ --bg-primary: var(--neutral-white); --bg-secondary: var(--neutral-off-white); /* fons de pàgina */ --bg-surface: var(--accent-natural-white); --bg-dark: var(--neutral-black); --bg-muted: var(--neutral-gray-100); --bg-cream: var(--accent-cream); --text-primary: var(--olive-600); /* 7.7:1 sobre off-white */ --text-secondary: var(--olive-500); /* 5.1:1 sobre off-white */ --text-on-dark: var(--neutral-white); --text-muted: var(--neutral-gray-200); /* només sobre fosc */ --text-dark: var(--neutral-pure-black); --text-quiet-on-dark: var(--neutral-gray-300); /* 8.1:1 sobre gray-900 */ --accent-sage: var(--sage-300); --border-light: var(--neutral-gray-300); --border-dark: var(--neutral-gray-900); /* ------------------------------------------------------------------ 03 · GRADIENTS No són variables al Figma però es repeteixen al frame com a paints. Angles calculats a partir de la matriu de cada gradient. ------------------------------------------------------------------ */ /* Titulars sobre clar: oliva → gairebé negre → oliva */ --grad-ink: linear-gradient(112deg, #51583F 10%, #191916 52%, #51583F 100%); --grad-ink-hero: linear-gradient(140deg, #51583F 10%, #191916 52%, #51583F 100%); /* Text sobre fosc: blanc → rosa pàl·lid → blanc. 10.8:1 al pitjor punt */ --grad-rose: linear-gradient(103deg, #FFFFFF 10%, #EDDCDD 52%, #FFFFFF 100%); /* Superfícies fosques: secció «El reto», targetes de casos, footer */ --grad-dark: linear-gradient(182deg, #2B2B27 3%, #020202 100%); --grad-dark-button: linear-gradient(109deg, #2B2B27 47%, #020202 100%); /* Píndola dels eyebrows: al 24 % d'opacitat, és gairebé transparent */ --grad-pill: linear-gradient(96deg, rgba(227, 226, 226, 0.24) 0%, rgba(191, 190, 196, 0.24) 42%, rgba(184, 183, 189, 0.24) 57%, rgba(151, 150, 162, 0.24) 100%); /* Metall: separadors, línia del procés i orbes. El gradient del Figma va en diagonal (baix-esquerra → dalt-dreta); cada variant n'és la projecció sobre una forma diferent. */ --grad-metal: linear-gradient(90deg, #151515 27.5%, #C4C4BB 91%); --grad-metal-v: linear-gradient(0deg, #151515 28%, #C4C4BB 81%); --grad-metal-orb: linear-gradient(50deg, #151515 28%, #C4C4BB 86%); /* Esfera gran dels orbes: el farciment va al 76 % (les ombres no) */ --grad-metal-orb-soft: linear-gradient(50deg, rgba(21, 21, 21, 0.76) 28%, rgba(196, 196, 187, 0.76) 86%); /* Tub metàl·lic: dues ombres interiors (bisell) i un halo clar */ --shadow-metal: inset 0 3px 1.9px #5C5E5E, inset 0 -1px 1.7px #3B3C34, 0 -1px 8.3px rgba(215, 221, 205, 0.36); --grad-process-bg: linear-gradient(180deg, var(--neutral-off-white) 0%, var(--accent-cream) 100%); /* Vels sobre fotos, per garantir lectura del text */ /* (al Figma el gradient s'allarga fins al 135 % de l'alçada: les parades 20/63/73 queden a 27/85/99 un cop projectades) */ --grad-photo-card: linear-gradient(180deg, rgba(102, 102, 102, 0) 27%, rgba(6, 6, 6, 0.94) 85%, #000000 99%); /* Targeta de servei oberta: el vel arrenca més amunt i no arriba al negre */ --grad-photo-card-open: linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, rgba(0, 0, 0, 0.89) 62%); /* Marc desenfocat de les targetes de servei */ --grad-service-frame: linear-gradient(180deg, rgba(0, 0, 0, 0) 1%, #000000 88%); --grad-photo-band: linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, #000000 100%); /* NO és al Figma: sense aquest vel, el rosa de la targeta de xifres queda sobre la part clara de la foto (1.9:1 a «INNOVOFOOD», 1.7:1 a «1M+»). Amb ell: 4.9:1 i 4.6:1 al píxel més clar. */ --veil-figures: linear-gradient(180deg, rgba(8, 8, 7, 0.5) 0%, rgba(8, 8, 7, 0.2) 100%); /* Fosa entre el capçal de «El reto» i el contingut */ --grad-reto-fade: linear-gradient(0deg, #080807 0%, rgba(8, 8, 7, 0) 100%); /* ------------------------------------------------------------------ 04 · ESPAIS I RADIS (col·lecció «Tokens») ------------------------------------------------------------------ */ --space-4: 0.25rem; --space-8: 0.5rem; --space-12: 0.75rem; --space-16: 1rem; --space-24: 1.5rem; --space-32: 2rem; --space-48: 3rem; --space-72: 4.5rem; --space-96: 6rem; /* Ritme de seccions del frame: no són a la col·lecció Tokens però es repeteixen a totes les seccions (56 a dalt, 40 entre blocs). */ --space-40: 2.5rem; --space-56: 3.5rem; --section-pad: var(--space-56); /* Sota les fletxes d'scroll que tanquen una secció hi ha el mateix aire que a dalt de cada secció fins al títol: la fletxa no queda enganxada al final i el ritme és igual a tota la pàgina. */ --scroll-cue-after: var(--section-pad); --radius-sm: 5px; --radius-md: 6px; --radius-lg: 12px; --radius-full: 100px; /* Amplada del disseny i marge lateral del frame */ --design-width: 376px; --gutter: var(--space-16); /* Entre 430 i 640 px el disseny mòbil es queda en columna centrada (no té sentit estirat). A partir de 640 hi ha els layouts de tauleta i escriptori i la pàgina ocupa tot l'ample (vegeu la secció 09). */ --page-max: 430px; /* Contingut de tauleta i escriptori: 1280 com a màxim. --pad-x és el marge lateral d'una secció a sang perquè el contingut quedi dins del contenidor sense afegir cap embolcall a l'HTML. */ --container: 80rem; --pad-x: max(var(--gutter), (100% - var(--container)) / 2); /* On s'aturen els elements fixos (columnes «sticky») sota la barra */ --sticky-top: calc(var(--nav-height) + var(--space-40)); /* ------------------------------------------------------------------ 05 · TIPOGRAFIA · estils de text del document, un per un Cada capa del frame té enllaçat un estil del DS i és l'estil el que es pinta: la mida que guarda la capa (14, 32…) és un valor antic que Figma ja no fa servir. Comprovat amb la maquetació que Figma desa de cada text (mida dels glifs i salts de línia). Interlineats: el del DS arrodonit a px sencers, que és com el pinta Figma (13 × 1,5 = 19,5 → 20). Així el ritme vertical és el del frame. En rem perquè respectin la mida de lletra de l'usuari (WCAG 1.4.4). ------------------------------------------------------------------ */ /* Inter Tight en lloc de Neue Montreal (vegeu base.css, secció 00) */ --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* Display · 121 · «1M+» */ --fs-display: 7.5625rem; --lh-display: 1.0496; /* 127 */ /* Heading/H1 · Bold 42 · titulars de secció */ --fs-h1: 2.625rem; --lh-h1: 1.0952; /* 46 */ /* Titular de l'hero: el mateix H1 a totes les mides (com al frame) */ --fs-hero: var(--fs-h1); --lh-hero: var(--lh-h1); /* Serif/Display · Italic 42 · última paraula dels titulars, números */ --fs-serif-display: 2.625rem; --lh-serif-display: 1.0952; /* 46 */ /* Heading/H2 · 34 · «Reformular es fácil.», xifres, menú del peu */ --fs-h2: 2.125rem; --lh-h2: 1.1471; /* 39 */ /* Serif/Quote · Italic 34 · cita */ --fs-quote: 2.125rem; --lh-quote: 1.1471; /* 39 */ /* Heading/H3 · 26 · reptes, títols de casos */ --fs-h3: 1.625rem; --lh-h3: 1.2692; /* 33 */ /* Heading/H4 · 20 · serveis (Bold), passos i subtítol del reto (Regular) */ --fs-h4: 1.25rem; --lh-h4: 1.35; /* 27 */ /* Logotip: sense estil al frame (24, no els 26 de Serif/Brand) */ --fs-logo: 1.5rem; --lh-logo: 1.3; /* Body/Default, Serif/Body, Label/Default (camps) · 15 */ --fs-body: 0.9375rem; --lh-body: 1.4; /* 21 */ --lh-label: 1.5333; /* 23 */ /* Button/Default · Medium 15 */ --fs-button: 0.9375rem; --lh-button: 1.4; /* 21 */ /* Body/Small, Label/Small (Medium), Serif/Small · 13 */ --fs-small: 0.8125rem; --lh-small: 1.5385; /* 20 */ --lh-serif-small: 1.3846; /* 18 */ /* Body/XSmall i Body/XSmall/Uppercase · Medium 11 · eyebrows, etiquetes */ --fs-xsmall: 0.6875rem; --lh-xsmall: 1.5455; /* 17 */ --lh-heading: var(--lh-h2); --ls-heading: -0.02em; /* H1–H3, Display, Serif/Display, Serif/Quote */ --ls-h3: var(--ls-heading); --ls-h4: -0.01em; --ls-none: 0; /* Body/Default, Label/Default, Button */ --ls-small: 0.01em; /* Body/Small, Serif/Small */ --ls-label: 0.02em; /* Label/Small, Body/XSmall */ --ls-caps: 0.06em; /* Body/XSmall/Uppercase */ --ls-logo: -0.06em; /* ------------------------------------------------------------------ 06 · EFECTES (estils d'efecte del document) Figma descriu el desenfocament de fons amb un radi; el blur() de CSS amb la meitat dona el mateix aspecte. ------------------------------------------------------------------ */ /* Glass/Navbar: blur 18 + llum interior blanca des de dalt (valors de la instància del frame) */ --glass-navbar-blur: 9px; --glass-navbar-shadow: inset 0 3px 9.2px #FFFFFF; --glass-navbar-bg: rgba(254, 255, 251, 0.61); /* Glass/Card: blur 20.7 + llum interior des de dalt a l'esquerra */ --glass-card-blur: 10.35px; --glass-card-shadow: inset 2px -2px 7px rgba(255, 255, 255, 0.12); /* Glass/Content: blur 26.4 */ --glass-content-blur: 13.2px; /* Botó primari: valors de la instància del frame (l'estil Button/Primary del DS porta uns altres colors; mana el frame) */ --shadow-button: inset 0 -1px 1.1px #5C5252, inset -9px 4px 17.7px #3A3A36; /* Títols dels serveis: halo clar per sobre */ --shadow-title-glow: drop-shadow(0 -1px 5.8px rgba(255, 255, 255, 0.4)); /* Shadow/Card */ --shadow-card: 0 -1px 5.8px rgba(0, 0, 0, 0.08); /* Separator/Default: línia gravada */ --shadow-separator: inset 0 3.03px 1.92px rgba(0, 0, 0, 0.08), inset 0 -1.01px 1.72px rgba(0, 0, 0, 0.05), 0 -1.01px 8.28px rgba(0, 0, 0, 0.06); /* ------------------------------------------------------------------ 07 · MOTION base.css els posa a 0.01ms sota prefers-reduced-motion. ------------------------------------------------------------------ */ --dur-fast: 160ms; --dur-base: 260ms; --dur-slow: 420ms; --dur-reveal: 950ms; --delay-stagger: 110ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* lleuger rebot: orbes, bombolles */ --reveal-shift: 20px; --dur-draw: 1600ms; /* corbes metàl·liques que es dibuixen */ --dur-count: 1400ms; /* xifres que compten */ /* ------------------------------------------------------------------ 08 · FOCUS, ÀREES TÀCTILS, CAPES ------------------------------------------------------------------ */ --focus-ring-color: var(--accent-purple); --focus-ring-width: 2px; --focus-ring-offset: 3px; --tap-target: 44px; --nav-height: 48px; /* Overlay sota el menú obert */ --scrim: rgba(9, 9, 9, 0.6); /* Errors del formulari. NO és del DS (no hi ha cap vermell): 6.1:1 sobre l'off-white i 6.6:1 sobre blanc. */ --color-error: #B3261E; /* Contingut pendent del client (pàgines legals). NO és del DS: és una marca de treball que ha de desaparèixer quan arribin els textos. */ --pending-bg: #FFE45C; --pending-ink: #2D2C2C; --z-below: -1; --z-base: 1; --z-drawer: 200; /* menú obert i overlay: per sota de la barra */ --z-nav: 300; --z-skip: 400; } /* ------------------------------------------------------------------ 09 · TAULETA I ESCRIPTORI Cada mida d'escriptori surt de la seva mida de mòbil (frame) amb la proporció del DS d'escriptori del client, que fa créixer més les mides grans que les petites: mòbil 42 → 72 (Display) hero, titulars de secció, números serif mòbil 34 → 52 (H1) «Reformular…», cita, xifres, menú, peu mòbil 26 → 34 (H2) reptes, casos, resultats, legals mòbil 20 → 24 (H3) serveis, passos, subtítol del reto mòbil 15 → 17 (Body) cos i botons mòbil 13 → 14 text petit mòbil 11 → 12 (Caption) eyebrows i etiquetes mòbil 121 → 200 «1M+» Així la jerarquia és la mateixa a totes les mides: el que és igual a mòbil (l'hero i els titulars de secció) també ho és a escriptori, i cap text es fa més petit en eixamplar la pantalla. Interlineats del DS per a cada nivell; pesos i tracking, els del frame. Entre 640 i 1024 cada mida passa en línia recta del valor de mòbil al d'escriptori (clamp), sense salts. Breakpoints: tauleta ≥ 640 · escriptori ≥ 1024. ------------------------------------------------------------------ */ @media (min-width: 640px) { :root { --gutter: clamp(2rem, 5vw, 4rem); --fs-h1: clamp(2.625rem, 7.8125vw - 0.5rem, 4.5rem); /* 42 → 72 */ --fs-serif-display: clamp(2.625rem, 7.8125vw - 0.5rem, 4.5rem); /* 42 → 72 */ --fs-h2: clamp(2.125rem, 0.25rem + 4.6875vw, 3.25rem); /* 34 → 52 */ --fs-quote: clamp(2.125rem, 0.25rem + 4.6875vw, 3.25rem); /* 34 → 52 */ --fs-h3: clamp(1.625rem, 0.7917rem + 2.0833vw, 2.125rem); /* 26 → 34 */ --fs-h4: clamp(1.25rem, 0.8333rem + 1.0417vw, 1.5rem); /* 20 → 24 */ --fs-body: clamp(0.9375rem, 0.7292rem + 0.5208vw, 1.0625rem); /* 15 → 17 */ --fs-button: clamp(0.9375rem, 0.7292rem + 0.5208vw, 1.0625rem); /* 15 → 17 */ --fs-small: clamp(0.8125rem, 0.7083rem + 0.2604vw, 0.875rem); /* 13 → 14 */ --fs-xsmall: clamp(0.6875rem, 0.5833rem + 0.2604vw, 0.75rem); /* 11 → 12 */ --fs-display: clamp(7.5625rem, 20.5729vw - 0.6667rem, 12.5rem); /* 121 → 200 */ --section-pad: clamp(3.5rem, 0.7rem + 7vw, 7rem); /* 56 → 112 */ } } @media (min-width: 1024px) { :root { --nav-height: 64px; --lh-h1: 1.05; --lh-serif-display: 1.05; --lh-h2: 1.1; --lh-quote: 1.1; --lh-h3: 1.2; --lh-h4: 1.3; --lh-body: 1.65; --lh-xsmall: 1.5; } }