/* GLIMOTION Hero — Webflow Head Embed ─────────────────────────────────── Paste into: Site Settings → Custom Code → Head */ /* ── Derived tokens (motion JS + computed panel sizes) ── */ :root { /* Motion script reads these exact names via cssNumber() */ --ref-ui-side: var(--_hero---ref-ui-side); --ref-ui-top: var(--_hero---ref-ui-top); --ref-ui-bottom: var(--_hero---ref-ui-bottom); --ref-video-inset: var(--_hero---ref-video-inset); --ref-video-w: var(--_hero---ref-video-w); --frame-scale: var(--_hero---frame-scale); --frame-h-margin: var(--_hero---frame-h-margin); --slot-width-ratio: var(--_hero---slot-width-ratio); --max-section: var(--_hero---max-section); /* Panel fallbacks until JS sets scaled values on .motion-chrome */ --ui-side: calc(var(--_hero---ref-ui-side) * 1px); --ui-top: calc(var(--_hero---ref-ui-top) * 1px); --ui-bottom: calc(var(--_hero---ref-ui-bottom) * 1px); /* Typography literals (not in Hero variables) */ --tracking-tight: -0.055em; --tracking-headline: -0.058em; --tracking-nav: -0.02em; --leading-hero: 0.92; --leading-body: 1.55; } /* ── Global ── */ * { box-sizing: border-box; } html { background: var(--_hero---surface); overflow-x: clip; } body { margin: 0; font-family: var(--_hero---font-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--_hero---ink); background: var(--_hero---surface); overflow-x: clip; } a { color: inherit; text-decoration: none; } body.has-fixed-nav main { padding-top: var(--_hero---nav-h); } /* ── Nav ── */ .hero-nav { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--_hero---nav-h); background: color-mix(in srgb, var(--_hero---surface) 90%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--_hero---border-subtle); } .nav-inner { width: 100%; max-width: var(--_hero---max-section); height: 100%; margin: 0 auto; padding: 0 var(--_hero---pad); display: flex; align-items: center; justify-content: space-between; gap: var(--_hero---space-8); } .brand { font-size: var(--_hero---text-brand); font-weight: 700; letter-spacing: var(--tracking-nav); } .nav-links { display: flex; align-items: center; gap: var(--_hero---space-1); border: 1px solid var(--_hero---border-soft); border-radius: 999px; padding: var(--_hero---space-1); background: var(--_hero---nav-pill-bg); } .nav-links a { font-size: var(--_hero---text-nav); font-weight: 600; color: var(--_hero---nav-link); padding: 0.55rem 0.8rem; border-radius: 999px; white-space: nowrap; } .nav-links a:last-child { background: var(--_hero---ink); color: var(--_hero---surface); } /* ── Hero intro ── */ .hero-intro { width: 100%; max-width: var(--_hero---max-section); margin: 0 auto; background: var(--_hero---surface); } .hero-copy { width: 100%; padding: var(--_hero---hero-y-top) var(--_hero---pad) var(--_hero---hero-y-bottom); display: grid; grid-template-columns: minmax(17rem, 0.76fr) minmax(24rem, 1.65fr); align-items: end; gap: clamp(var(--_hero---space-8), 4vw, var(--_hero---space-24)); } .hero-left { max-width: 25rem; padding-bottom: 0.6rem; min-width: 0; } .hero-right { min-width: 0; } .hero-left p { margin: 0 0 var(--_hero---space-8); color: var(--_hero---muted); font-size: var(--_hero---text-body); line-height: var(--leading-body); letter-spacing: -0.015em; } .hero-cta { display: inline-flex; align-items: center; gap: var(--_hero---space-3); font-size: var(--_hero---text-cta); font-weight: 700; letter-spacing: var(--tracking-nav); } .hero-cta span:first-child { width: var(--_hero---space-8); height: var(--_hero---space-8); border-radius: 999px; display: grid; place-items: center; background: var(--_hero---ink); color: var(--_hero---surface); font-size: var(--_hero---text-cta); } h1 { margin: 0; max-width: 72rem; font-size: var(--_hero---text-hero); line-height: var(--leading-hero); letter-spacing: var(--tracking-tight); font-weight: 800; text-wrap: balance; } /* ── Motion scene ── */ .motion-scene { position: relative; width: 100%; height: calc(100svh - var(--_hero---nav-h)); background: var(--_hero---surface); overflow: hidden; } .motion-stage { position: absolute; inset: 0; pointer-events: none; } .motion-chrome { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; will-change: transform, opacity, width, height; z-index: 5; } .chrome-frame { position: relative; width: 100%; height: 100%; background: var(--_hero---ui-canvas); } .chrome-panel { position: absolute; background-color: var(--_hero---ui-bg); pointer-events: none; } .chrome-top { left: 0; right: 0; top: 0; height: var(--ui-top); border-top-left-radius: var(--_hero---chrome-radius); border-top-right-radius: var(--_hero---chrome-radius); display: flex; align-items: center; justify-content: space-between; overflow: hidden; z-index: 2; } .chrome-top-inner { position: relative; height: 100%; display: block; flex: 0 0 auto; } .chrome-top-img { display: block; height: 100%; width: auto; object-fit: cover; pointer-events: none; user-select: none; } .chrome-top-border { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--_hero---ui-line); pointer-events: none; } .chrome-bottom { left: 0; right: 0; bottom: 0; height: var(--ui-bottom); border-bottom-left-radius: var(--_hero---chrome-radius); border-bottom-right-radius: var(--_hero---chrome-radius); border-top: 1px solid var(--_hero---ui-line); z-index: 2; } .chrome-left { top: var(--ui-top); bottom: var(--ui-bottom); left: 0; width: var(--ui-side); border-right: 1px solid var(--_hero---ui-line); z-index: 1; } .chrome-right { top: var(--ui-top); bottom: var(--ui-bottom); right: 0; width: var(--ui-side); border-left: 1px solid var(--_hero---ui-line); z-index: 1; } .motion-video { position: absolute; left: 0; top: 0; overflow: hidden; pointer-events: none; will-change: transform, width, height; z-index: 6; border-radius: var(--_hero---slot-radius); } .motion-video video { width: 100%; height: 100%; display: block; object-fit: cover; } .motion-text { position: absolute; inset: 0; display: flex; align-items: center; padding: var(--_hero---hero-y-top) var(--_hero---pad); pointer-events: none; z-index: 3; will-change: transform; } .motion-text_inner { width: 100%; max-width: var(--_hero---max-section); margin: 0 auto; } .motion-text h2 { margin: 0; max-width: none; font-size: var(--_hero---text-headline); line-height: var(--leading-hero); letter-spacing: var(--tracking-headline); font-weight: 700; overflow-wrap: break-word; } .frame-slot { display: inline-block; width: calc(var(--_hero---slot-width-ratio) * 1em); aspect-ratio: 16 / 9; height: auto; margin: 0 0.08em; vertical-align: middle; position: relative; top: -0.18em; background: transparent; overflow: hidden; } /* ── After section ── */ .section-after { min-height: 90vh; padding: var(--_hero---space-32) var(--_hero---pad); background: var(--_hero---inverse-bg); color: var(--_hero---surface); } .section-after-inner { max-width: var(--_hero---max-section); margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.4fr; gap: var(--_hero---space-24); align-items: start; } .section-after h2 { margin: 0; font-size: var(--_hero---text-section); line-height: 0.9; letter-spacing: -0.06em; } .section-after p { margin: 0; max-width: 38rem; color: var(--_hero---inverse-text-muted); font-size: 1.1rem; line-height: 1.7; } footer { padding: 2.5rem var(--_hero---pad); background: var(--_hero---inverse-bg); color: var(--_hero---inverse-text-dim); border-top: 1px solid var(--_hero---inverse-border); } .footer-inner { max-width: var(--_hero---max-section); margin: 0 auto; display: flex; justify-content: space-between; gap: var(--_hero---space-8); font-size: var(--_hero---text-footer); } /* ── Responsive ── */ @media (max-width: 1180px) { .hero-copy { grid-template-columns: 1fr; align-content: end; align-items: end; } .hero-left { order: 2; max-width: 34rem; } .hero-right { order: 1; } h1 { max-width: 66rem; } } @media (max-width: 900px) { :root { --leading-hero: 0.96; } .nav-links a:not(:last-child) { display: none; } .hero-copy { grid-template-columns: minmax(0, 1fr); } .hero-left { max-width: 100%; padding-bottom: 0; } .hero-left p { margin-bottom: var(--_hero---space-6); } .section-after-inner { grid-template-columns: 1fr; gap: var(--_hero---space-8); } } @media (max-width: 480px) { .nav-inner { gap: var(--_hero---space-4); } .brand { font-size: 0.9rem; } .nav-links { display: none; } .hero-copy { gap: var(--_hero---space-6); } h1 { max-width: 21rem; text-wrap: auto; overflow-wrap: break-word; } .hero-left p { max-width: 20rem; } .frame-slot { display: block; width: min(78vw, 18rem); margin: 0.18em 0; top: 0; } } @media (prefers-reduced-motion: reduce) { .motion-chrome, .motion-video, .motion-text { will-change: auto; } }

We partner with forward-thinking companies to deliver high-end branding and cinematic experiences that drive real growth.

→Start your project

We Build Brands for the People who want to make a Difference

Wir gestalten Lösungen für Menschen, Marken & digitale Produkte.

Built for brands with motion at the center.

GLIMOTION partners with forward-thinking teams to shape identities, films, and digital experiences with a sharp cinematic edge.