/* Extra motion layered on top of the scraped Framer hero. Scoped to

so nothing else is touched. --hero-orbit-angle is updated every frame by the inline rAF loop near the end of ; no @property registration needed. */ /* ---- Navbar slide-in ---- Framer ships the navbar with inline `transform: translateY(-80px)` and relies on its runtime to animate it down after hydration. Since we stripped Framer's runtime, drive the slide-in with pure CSS. Short delay since this standalone page has no preloader in front. */ div[data-framer-name="Navbar"] { animation: nexus-navbar-in 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both; } @keyframes nexus-navbar-in { from { transform: translateY(-80px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ---- Accent swap: orange → purple (from the reference image) ---- Broadened to #main so the navbar "Get Template" button also picks up the purple glow — everywhere Framer painted orange via this token. */ #main { --token-70f07e10-9208-4715-8286-5050b1d84d05: #a855f7; } /* ---- NEXUS logo in place of the Zenon wordmark ---- */ .nexus-logo { display: block; height: 30px; width: auto; object-fit: contain; } /* ---- Purple line orbiting the "available for work" pill ---- .framer-1mh15rm sits at inset:2px with a solid fill, so the pill's own background shows as a 2px ring around the edge. */ header[data-framer-name="Header"] a.framer-lBP5F.framer-14wwebl { background: conic-gradient( from var(--hero-orbit-angle, 0deg), rgba(255, 255, 255, 0.06) 0deg, rgba(255, 255, 255, 0.06) 270deg, rgba(168, 85, 247, 0.25) 310deg, rgb(200, 140, 255) 330deg, rgba(168, 85, 247, 0.25) 350deg, rgba(255, 255, 255, 0.06) 360deg ) !important; } /* Kill only the pill's top-right radial (.framer-1plsqo); leave the CTA buttons' bottom glow intact so it renders with the new accent color. */ header[data-framer-name="Header"] .framer-lBP5F .framer-1plsqo { display: none !important; } /* ---- Button hover state ---- On hover the button's own background swaps to the rotating conic-gradient (same recipe as the pill), so a purple trail orbits the 3px ring that Framer's inner .framer-118n2ng leaves exposed — and the masked diagonal arrow slides out. Applies to both hero CTAs and the navbar Get Template. */ a.framer-jMqI6.framer-14pdtib:hover, a.framer-jMqI6.framer-14pdtib:focus-visible { background: conic-gradient( from var(--hero-orbit-angle, 0deg), rgba(255, 255, 255, 0.06) 0deg, rgba(255, 255, 255, 0.06) 270deg, rgba(168, 85, 247, 0.25) 310deg, rgb(200, 140, 255) 330deg, rgba(168, 85, 247, 0.25) 350deg, rgba(255, 255, 255, 0.06) 360deg ) !important; } /* Diagonal arrow (.framer-r0AVb masked from ) slides out on hover. */ .framer-jMqI6 .framer-1evsux6 { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; } a.framer-jMqI6:hover .framer-1evsux6, a.framer-jMqI6:focus-visible .framer-1evsux6 { transform: translate(3px, -3px); } /* ---- Film-grain flicker ---- Steps across non-matching background positions so the noise pattern appears to shimmer at the grain level rather than drift. */ header[data-framer-name="Header"] .framer-mh7k3j-container > div > div, header[data-framer-name="Header"] .framer-1ipxwc8-container > div > div, header[data-framer-name="Header"] .framer-1u46kqk-container > div > div { animation: hero-grain-flicker 2.4s steps(6, jump-none) infinite; } @keyframes hero-grain-flicker { 0% { background-position: 0 0; } 16% { background-position: 37% 19%; } 32% { background-position: 61% 48%; } 48% { background-position: 11% 72%; } 64% { background-position: 83% 29%; } 80% { background-position: 52% 91%; } 100% { background-position: 24% 63%; } } /* ---- Mobile (<= 810px) hero polish ---- Stack the two CTAs vertically; on a 390px viewport the desktop row "SEE PRICING / HOW IT WORKS" runs off the right edge. Force them to wrap into a column and stretch each button to full width. The .ssr-variant wrappers between the Buttons row and each anchor have display:contents (set by our generic SSR-variant rules), so a `> *` selector skips past them. Stretch the named container divs and the anchors directly. */ @media (max-width: 810px) { [data-framer-name="Buttons"].framer-19ta982 { flex-direction: column !important; align-items: stretch !important; width: calc(100% - 24px) !important; max-width: 320px !important; gap: 10px !important; margin-left: auto !important; margin-right: auto !important; } [data-framer-name="Buttons"].framer-19ta982 > *, [data-framer-name="Buttons"].framer-19ta982 .framer-v0rbku-container, [data-framer-name="Buttons"].framer-19ta982 .framer-1pj1tvf-container, [data-framer-name="Buttons"].framer-19ta982 [class*="-container"] { width: 100% !important; max-width: 100% !important; flex: none !important; } [data-framer-name="Buttons"].framer-19ta982 a.framer-jMqI6 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; justify-content: center !important; box-sizing: border-box !important; padding-left: 18px !important; padding-right: 18px !important; } [data-framer-name="Buttons"].framer-19ta982 a.framer-jMqI6 [data-framer-name="Text Wrapper"] { width: auto !important; max-width: 100% !important; } /* Hero heading — keep the Heading wrapper from pushing past viewport. */ header[data-framer-name="Header"] [data-framer-name="Heading"] { width: 100% !important; max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box !important; } header[data-framer-name="Header"] [data-framer-name="Heading H1"] { width: 100% !important; max-width: 100% !important; } }