/* Inter (self-hosted, OFL). woff2 first (best rendering + smallest), woff as a fallback for very old browsers. font-display: swap so text paints immediately in the fallback and swaps to Inter when ready (no invisible-text flash). Replaces the previous .otf Sequel Sans, which rendered unevenly on Windows at fractional scaling. */ @font-face { font-family: 'Inter'; src: url('../fonts/inter/inter-300.woff2') format('woff2'), url('../fonts/inter/inter-300.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/inter-400.woff2') format('woff2'), url('../fonts/inter/inter-400.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/inter-500.woff2') format('woff2'), url('../fonts/inter/inter-500.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/inter-600.woff2') format('woff2'), url('../fonts/inter/inter-600.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/inter-700.woff2') format('woff2'), url('../fonts/inter/inter-700.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/inter-800.woff2') format('woff2'), url('../fonts/inter/inter-800.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/inter-900.woff2') format('woff2'), url('../fonts/inter/inter-900.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --orange: #ff4612; --orange-light: #FF6B3D; --orange-dark: #CC3710; --black: #000000; --dark: #111111; --dark-gray: #1A1A1A; --light: #F5F5F0; --white: #FFFFFF; --gray: #888888; --light-gray: #E8E8E3; --hero-bg: #000000; } html { overflow-x: hidden; } body { font-family: 'Inter', Arial, sans-serif; color: var(--black); /* `clip` (not `hidden`) avoids turning into a scroll container, which would break `position: sticky` for descendants while still clipping any horizontal overflow from marquees and wide decorative elements. */ overflow-x: clip; background: var(--light); transition: background-color 0.6s ease; } /* Links inherit the surrounding text colour and never show the default browser blue/underline. Components (nav, footer, legal, cookie banner) set their own colour/hover on top of this. */ a { color: inherit; text-decoration: none; } /* Custom cursor square — base styles live here (loaded by every page) so internal pages that don't include hero-legacy.css still position it `fixed`. Without this it falls back to a static block; the cursor JS then sets width/height inline on hover, pushing the header down (the "jump"). */ .cursor-square { position: fixed; width: 20px; height: 20px; background: var(--orange); pointer-events: none; z-index: 100010; opacity: 0; transition: opacity 0.3s ease; } .cursor-square.visible { opacity: 1; }