ID: logistic-heavy-industry-hero Category: Logistics / Freight / Industrial Transport Hero Type: hero Create a single-file HTML+CSS+vanilla-JS hero section with the following exact specifications: ## Tech Stack * Deliverable filename: `logistic-hero.html`. * Plain HTML + CSS + vanilla JavaScript. No frameworks, no build step. * Fonts: Google Fonts `DM Sans` (weights 500/700/800) and `Inter` (weights 500/700). Load via: ```html ``` * Global resets: `*{margin:0;padding:0;box-sizing:border-box;}`. `html,body{height:100%;width:100%;background:#000;font-family:'Inter',sans-serif;overflow:hidden;}`. `img,video{display:block;}`. `a{text-decoration:none;}`. ## Canvas & Scaling TRUE FULLSCREEN layout — no fixed-size design canvas, no letterboxing, no JS scale/transform of any kind. Every element is `position:fixed` and anchored directly to the real viewport edges with fixed pixel margins (same pattern as `audi-sport-hero.html` / `la-table-eternelle-hero.html`): * `.stage{position:fixed;inset:0;width:100vw;height:100vh;overflow:hidden;background:#000;}` — fullscreen root. * `--edge:50px` — single CSS variable used for every top/left/right margin from the viewport edge (header, hero title block via its own centering, bottom-left cluster, bottom-right cluster all reference it, directly or via a shared centered width). * Do NOT add a `transform:scale(...)` canvas wrapper anywhere. Fullscreen behavior comes entirely from `position:fixed` elements anchored to viewport edges (`top`, `left`, `right`, `bottom`) plus one `left:50%` + `translateX(-50%)` centered block for the hero title, never from scaling a fixed-size canvas. ## Design Tokens ```css :root{ --edge:50px; --dark:#141411; --green:#193505; --gray:#4c4b4b; } ``` ## Elements 1. **Background video** — `.bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}`. `

Move Heavy IndustryForward Globally

Move Heavy Industry
Forward Globally

Logistics Delivery