/* ========================================================================== Nielsen navigation + footer: design tokens and fonts Source: Webflow project "ob-nielsen" (css/ob-nielsen.css + global embed) Load first. This file only declares @font-face and custom properties on :root. It sets no styles on any element, so it is safe to load site-wide. Every variable from the Webflow project's :root is here, unchanged, including ones the navigation and footer don't use, so later Webflow pages moved across can rely on the same set. ========================================================================== */ /* Fonts: the navigation and footer only use Nielsen Sans (400, 500, 700). */ @font-face { font-family: "Nielsen Sans"; src: url('../fonts/NielsenSans-Medium.woff2') format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Nielsen Sans"; src: url('../fonts/NielsenSans-Bold.woff2') format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Nielsen Sans"; src: url('../fonts/NielsenSans-Regular.woff2') format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* Colour */ --color--bg: var(--color--light); --color--text: var(--color--nielsen-black); --color--text-primary: #1f2211; --color--light: #fff; --color--illum-green: #dbff83; --color--light-green-2: #cedf83; --color--light-green: #f6ffc8; --color--warm-neutral: #e3e5d4; --color--nielsen-black: var(--color--text-primary); --color--gray-2: #4e564a; --color--gray-1: #3b412f; --color--error: #f62d00; --color--primary: #06f; --color--success: #52d36a; --color--dark: #121212; --color--pure-black: black; --color--gray-4: #95a38b; /* Fluid scale: the viewport range every clamp() below interpolates across, in rem */ --viewport-min: 20; --viewport-max: 90; /* Spacing: everything is a multiple of --spacing--gap */ --spacing--gap: clamp(.85 * 1rem, ((.85 - ((1 - .85) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) * 1rem + ((1 - .85) / (var(--viewport-max) - var(--viewport-min))) * 100vw), 1 * 1rem); --spacing--gap-36: calc(var(--spacing--gap) * 2.25); --spacing--gap-24: calc(var(--spacing--gap) * 1.5); --spacing--gap-18: calc(var(--spacing--gap) * 1.125); --spacing--gap-20: calc(var(--spacing--gap) * 1.25); --spacing--container-padding: var(--spacing--gap-40); --spacing--container-padding-t: var(--spacing--gap-12); --spacing--gap-32: calc(var(--spacing--gap) * 2); --spacing--gap-8: calc(var(--spacing--gap) * .5); --spacing--gap-48: calc(var(--spacing--gap) * 3); --spacing--gap-56: calc(var(--spacing--gap) * 3.5); --spacing--gap-12: calc(var(--spacing--gap) * .75); --spacing--gap-40: calc(var(--spacing--gap) * 2.5); --spacing--gap-4: calc(var(--spacing--gap) * .25); --spacing--gap-10: calc(var(--spacing--gap) * .625); --spacing--gap-6: calc(var(--spacing--gap) * .375); --spacing--gap-14: calc(var(--spacing--gap) * .875); --spacing--gap-64: calc(var(--spacing--gap) * 4); --spacing--gap-88: calc(var(--spacing--gap) * 5.5); --spacing--gap-2: calc(var(--spacing--gap) * .125); --spacing--gap-128: calc(var(--spacing--gap) * 8); --spacing--gap-96: calc(var(--spacing--gap) * 6); --spacing--container-padding-tight: var(--spacing--gap-20); --spacing--gap-28: calc(var(--spacing--gap) * 1.75); --spacing--gap-72: calc(var(--spacing--gap) * 4.5); --spacing--gap-80: calc(var(--spacing--gap) * 5); /* Radius */ --radius--4: var(--spacing--gap-4); --radius--full: 9999px; --radius--0: 0px; --radius--2: var(--spacing--gap-2); /* Typography */ --typography--font-family--sans: "Nielsen Sans", Arial, sans-serif; --typography--heading-d: clamp(2.625 * 1rem, ((2.625 - ((7.5 - 2.625) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) * 1rem + ((7.5 - 2.625) / (var(--viewport-max) - var(--viewport-min))) * 100vw), 7.5 * 1rem); --typography--body-m: clamp(1 * 1rem, ((1 - ((1 - 1) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) * 1rem + ((1 - 1) / (var(--viewport-max) - var(--viewport-min))) * 100vw), 1 * 1rem); --typography--headling-xl: clamp(2.5 * 1rem, ((2.5 - ((3.5 - 2.5) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) * 1rem + ((3.5 - 2.5) / (var(--viewport-max) - var(--viewport-min))) * 100vw), 3.5 * 1rem); --typography--heading-l: clamp(2 * 1rem, ((2 - ((3 - 2) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) * 1rem + ((3 - 2) / (var(--viewport-max) - var(--viewport-min))) * 100vw), 3 * 1rem); --typography--label-m: clamp(1 * 1rem, ((1 - ((1 - 1) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) * 1rem + ((1 - 1) / (var(--viewport-max) - var(--viewport-min))) * 100vw), 1 * 1rem); --typography--label-s: clamp(.875 * 1rem, ((.875 - ((.875 - .875) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) * 1rem + ((.875 - .875) / (var(--viewport-max) - var(--viewport-min))) * 100vw), .875 * 1rem); --typography--heading-m: clamp(1.5 * 1rem, ((1.5 - ((1.75 - 1.5) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) * 1rem + ((1.75 - 1.5) / (var(--viewport-max) - var(--viewport-min))) * 100vw), 1.75 * 1rem); --typography--heading-s: clamp(1.25 * 1rem, ((1.25 - ((1.5 - 1.25) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) * 1rem + ((1.5 - 1.25) / (var(--viewport-max) - var(--viewport-min))) * 100vw), 1.5 * 1rem); --typography--body-l: clamp(1 * 1rem, ((1 - ((1.125 - 1) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) * 1rem + ((1.125 - 1) / (var(--viewport-max) - var(--viewport-min))) * 100vw), 1.125 * 1rem); --typography--body-s: clamp(.875 * 1rem, ((.875 - ((.875 - .875) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) * 1rem + ((.875 - .875) / (var(--viewport-max) - var(--viewport-min))) * 100vw), .875 * 1rem); --typography--data: clamp(2 * 1rem, ((2 - ((2.5 - 2) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) * 1rem + ((2.5 - 2) / (var(--viewport-max) - var(--viewport-min))) * 100vw), 2.5 * 1rem); --typography--font-family--serif: "Nielsen Sans", Arial, sans-serif; --typography--txt-code: clamp(.5961 * 1rem, ((.5961 - ((.5961 - .5961) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) * 1rem + ((.5961 - .5961) / (var(--viewport-max) - var(--viewport-min))) * 100vw), .5961 * 1rem); --typography--txt-code-comp: clamp(.1781 * 1rem, ((.1781 - ((.1781 - .1781) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) * 1rem + ((.1781 - .1781) / (var(--viewport-max) - var(--viewport-min))) * 100vw), .1781 * 1rem); /* Focus ring. currentColor follows the text colour, so the ring is dark on the bar and light on the footer. */ --color--focus: currentColor; /* Motion and misc, from the Webflow global embed. Not used by the navigation or footer css (their motion is in js/shared.js); kept for completeness. */ --cubic-default: cubic-bezier(0.65, 0.05, 0, 1); --duration-default: 0.735s; --animation-default: var(--duration-default) var(--cubic-default); --fade-edge: 5%; /* Deleted in the Webflow Designer but still exported. Nothing in this package uses them. Kept only so this list matches the Webflow export 1:1. */ --text--h6\: 1em; --_spacing---section-padding\: calc(3.5rem + (var(--_spacing---gap\) * 2)); --color--primary\: #ff4c24; --_spacing---gap\: clamp(.875rem, calc(.875rem + .125rem * (100vw - var(--_typography---viewport-min\)) / (var(--_typography---viewport-max\) - var(--_typography---viewport-min\))), 1rem); --gap\: 1em; --typography--heading-xl\: clamp(1.75 * 1rem, ((1.75 - ((2.25 - 1.75) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) * 1rem + ((2.25 - 1.75) / (var(--viewport-max) - var(--viewport-min))) * 100vw), 2.25 * 1rem); --typography--heading-m\: clamp(1.35 * 1rem, ((1.35 - ((1.5 - 1.35) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) * 1rem + ((1.5 - 1.35) / (var(--viewport-max) - var(--viewport-min))) * 100vw), 1.5 * 1rem); --_typography---viewport-min\: 320px; --_typography---viewport-max\: 1440px; }