/* ============================================================ NOWFORCE AI — MOTION LAYER Additive on top of swiss.css. Targets existing component classes only — no markup changes required on any page. Loaded after swiss.css + swiss.js; enhanced by js/motion.js. ============================================================ */ /* —————————————————————————————————————————————— SCROLL PROGRESS BAR Injected by motion.js as the first element in . —————————————————————————————————————————————— */ .nf-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 9998; pointer-events: none; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); transform: scaleX(var(--nf-scroll, 0)); transform-origin: 0 50%; will-change: transform; } .page-case-studies .nf-progress, .page-light .nf-progress { background: linear-gradient(90deg, var(--accent), var(--ink-dark)); } /* —————————————————————————————————————————————— STICKY NAV — scrolled state —————————————————————————————————————————————— */ .nf-nav { transition: background var(--r-mid) var(--ease), box-shadow var(--r-mid) var(--ease), height var(--r-mid) var(--ease); } .nf-nav.is-scrolled { height: calc(var(--nav-h) - 10px); box-shadow: 0 16px 40px -20px rgba(0,0,0,0.55); background: rgba(10,24,56,0.96); } .page-case-studies .nf-nav.is-scrolled, .page-light .nf-nav.is-scrolled { background: rgba(245,242,236,0.97); } /* —————————————————————————————————————————————— ANIMATED UNDERLINE — body copy links —————————————————————————————————————————————— */ .nf-prose a, .nf-body a { padding-bottom: 1px; border-bottom-color: transparent; background-image: linear-gradient(var(--accent), var(--accent)); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size var(--r-mid) var(--ease); } .nf-prose a:hover, .nf-body a:hover { background-size: 100% 1px; } .nf-share-row a { padding-bottom: 1px; border-bottom-color: transparent; background-image: linear-gradient(var(--accent), var(--accent)); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size var(--r-mid) var(--ease); } .nf-share-row a:hover { background-size: 100% 1px; } /* —————————————————————————————————————————————— FAQ ACCORDION .nf-faq-panel is a JS-inserted wrapper (see motion.js); grid-rows 0fr/1fr gives a smooth height animation with no JS measuring required. —————————————————————————————————————————————— */ .nf-faq-item--interactive .nf-faq-q { cursor: pointer; position: relative; padding-right: 2rem; user-select: none; } .nf-faq-item--interactive .nf-faq-q::after { content: "+"; position: absolute; right: 0; top: 0; font-size: 1.1rem; color: var(--accent); transition: transform var(--r-mid) var(--ease); } .nf-faq-item--interactive.is-open .nf-faq-q::after { transform: rotate(45deg); } .nf-faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--r-mid) var(--ease); } .nf-faq-item--interactive.is-open .nf-faq-panel { grid-template-rows: 1fr; } .nf-faq-panel > .nf-body { overflow: hidden; min-height: 0; } /* —————————————————————————————————————————————— CONTACT INFO CELLS — subtle pointer glow —————————————————————————————————————————————— */ .nf-contact-cell { position: relative; } .nf-contact-cell::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 65%); transition: opacity var(--r-mid) var(--ease); } .nf-contact-cell:hover::before { opacity: 1; } /* —————————————————————————————————————————————— MAGNETIC BUTTONS Transform is driven by motion.js on pointermove/leave. —————————————————————————————————————————————— */ .nf-bottom__cta, .nf-form-submit { will-change: transform; transition: transform 500ms var(--ease), filter var(--r-fast) var(--ease); } .nf-bottom__cta:hover .arr, .nf-form-submit:hover .arr { transform: translateX(6px) rotate(-10deg); } /* —————————————————————————————————————————————— CARD LIFT + POINTER GLOW Pointer position tracked via --mx/--my custom props (set by motion.js on pointermove; default = center). —————————————————————————————————————————————— */ .nf-about-phase, .nf-blog-card, .nf-case-card, .nf-poster__panel-black, .nf-poster__panel-red .nf-stat-cell { position: relative; transition: transform var(--r-mid) var(--ease), box-shadow var(--r-mid) var(--ease); } .nf-about-phase::before, .nf-blog-card::before, .nf-case-card::before, .nf-poster__panel-black::before, .nf-poster__panel-red .nf-stat-cell::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 65%); transition: opacity var(--r-mid) var(--ease); } .nf-about-phase:hover, .nf-blog-card:hover, .nf-case-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(0,0,0,0.55); } .nf-poster__panel-black:hover { box-shadow: inset 0 0 0 1px var(--line-strong); } .nf-about-phase:hover::before, .nf-blog-card:hover::before, .nf-case-card:hover::before, .nf-poster__panel-black:hover::before, .nf-poster__panel-red .nf-stat-cell:hover::before { opacity: 1; } /* —————————————————————————————————————————————— CONTENT CARDS / LIST ROWS — service, industry, solution pages already share these two component classes site-wide. —————————————————————————————————————————————— */ .nf-cell-service, .nf-row-hover { position: relative; } .nf-cell-service::before, .nf-row-hover::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 65%); transition: opacity var(--r-mid) var(--ease); } .nf-cell-service:hover::before, .nf-row-hover:hover::before { opacity: 1; } .nf-cell-service { transition: background var(--r-fast) var(--ease), transform var(--r-mid) var(--ease), box-shadow var(--r-mid) var(--ease); } .nf-cell-service:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(0,0,0,0.55); } .nf-row-hover:hover { box-shadow: inset 4px 0 0 var(--accent); } /* —————————————————————————————————————————————— BADGE + PHASE STAGGER Scoped to the exact repeating groups already in markup. —————————————————————————————————————————————— */ .nf-badge-row .nf-badge { opacity: 0; transform: translateY(6px) scale(0.94); transition: opacity var(--r-mid) var(--ease), transform var(--r-mid) var(--ease), color var(--r-fast) var(--ease), border-color var(--r-fast) var(--ease); } .nf-hero-reveal.in-view .nf-badge-row .nf-badge { opacity: 1; transform: none; } .nf-badge-row .nf-badge:nth-child(1) { transition-delay: 0.05s; } .nf-badge-row .nf-badge:nth-child(2) { transition-delay: 0.11s; } .nf-badge-row .nf-badge:nth-child(3) { transition-delay: 0.17s; } .nf-badge-row .nf-badge:nth-child(4) { transition-delay: 0.23s; } .nf-badge-row .nf-badge:nth-child(5) { transition-delay: 0.29s; } .nf-badge-row .nf-badge:nth-child(6) { transition-delay: 0.35s; } .nf-badge:hover { color: var(--ink); border-color: var(--accent); } .nf-about-phases .nf-about-phase { opacity: 0; transform: translateY(14px); transition: opacity var(--r-mid) var(--ease), transform var(--r-mid) var(--ease), box-shadow var(--r-mid) var(--ease); } .nf-about-phases.in-view .nf-about-phase { opacity: 1; transform: none; } .nf-about-phases .nf-about-phase:nth-child(1) { transition-delay: 0.04s; } .nf-about-phases .nf-about-phase:nth-child(2) { transition-delay: 0.11s; } .nf-about-phases .nf-about-phase:nth-child(3) { transition-delay: 0.18s; } .nf-about-phases .nf-about-phase:nth-child(4) { transition-delay: 0.25s; } .nf-about-phases .nf-about-phase:nth-child(5) { transition-delay: 0.32s; } /* —————————————————————————————————————————————— PARALLAX — giant background letter Overrides swiss.css transform (same specificity, later in cascade). --nf-parallax-y set by motion.js on scroll. —————————————————————————————————————————————— */ .bg-letter { transform: translateY(calc(-50% + var(--nf-parallax-y, 0px))); will-change: transform; } /* —————————————————————————————————————————————— AMBIENT FLOATING ORBS Injected by motion.js into .nf-poster__center / .nf-contact-head only (both already position:relative + overflow:hidden). —————————————————————————————————————————————— */ .nf-orb-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .nf-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.4; animation: nf-orb-float 22s ease-in-out infinite; } .nf-orb--a { width: 360px; height: 360px; top: -12%; left: -6%; background: radial-gradient(circle at 30% 30%, var(--accent-soft), transparent 70%); animation-duration: 24s; } .nf-orb--b { width: 280px; height: 280px; bottom: -18%; right: 8%; background: radial-gradient(circle at 60% 40%, rgba(201,162,74,0.14), transparent 70%); animation-duration: 28s; animation-delay: -8s; } @keyframes nf-orb-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(4%, -6%) scale(1.06); } 66% { transform: translate(-3%, 5%) scale(0.95); } } /* —————————————————————————————————————————————— BAR MOTIF — original decorative accent Small stack of pulsing bars, echoing the grid/rule motif already used site-wide. Injected alongside the ambient orbs. —————————————————————————————————————————————— */ .nf-motif { position: absolute; left: 2rem; bottom: 2rem; z-index: 0; display: flex; flex-direction: column; gap: 6px; pointer-events: none; } .nf-motif__bar { height: 2px; width: var(--w, 60px); background: var(--accent); opacity: 0.16; transform-origin: 0 50%; animation: nf-motif-pulse 5s ease-in-out infinite; } .nf-motif__bar:nth-child(1) { --w: 60px; animation-delay: 0s; } .nf-motif__bar:nth-child(2) { --w: 100px; animation-delay: 0.6s; } .nf-motif__bar:nth-child(3) { --w: 40px; animation-delay: 1.2s; } .nf-motif__bar:nth-child(4) { --w: 80px; animation-delay: 1.8s; } .nf-motif__bar:nth-child(5) { --w: 30px; animation-delay: 2.4s; } @keyframes nf-motif-pulse { 0%, 100% { transform: scaleX(1); opacity: 0.14; } 50% { transform: scaleX(1.5); opacity: 0.3; } } /* —————————————————————————————————————————————— NAV-LINK CURSOR MARKER — fine pointer devices only Tiny dot, visible only while hovering a text nav/footer link. Intentionally scoped, not an ambient page effect. —————————————————————————————————————————————— */ @media (hover: hover) and (pointer: fine) { .nf-link-marker { position: fixed; top: 0; left: 0; width: 6px; height: 6px; background: var(--accent); pointer-events: none; z-index: 30; opacity: 0; transform: translate3d(var(--nf-mk-x, -50vw), var(--nf-mk-y, -50vh), 0) translate(-50%, -50%); transition: opacity 150ms var(--ease); } .nf-link-marker.is-active { opacity: 1; } } /* —————————————————————————————————————————————— PAGE TRANSITION — cross-fade Pure CSS entrance (no JS dependency, so a script error can never leave the page invisible). Fade-out on navigation is applied inline by motion.js. —————————————————————————————————————————————— */ body { animation: nf-page-in 260ms var(--ease) both; } @keyframes nf-page-in { from { opacity: 0; } to { opacity: 1; } } /* —————————————————————————————————————————————— MARQUEE — pause on hover —————————————————————————————————————————————— */ .nf-bottom__track { will-change: transform; } .nf-bottom__tick:hover .nf-bottom__track, .nf-bottom__tick:focus-within .nf-bottom__track { animation-play-state: paused; } /* —————————————————————————————————————————————— COUNTED STAT — subtle settle-in once counting completes —————————————————————————————————————————————— */ .nf-stat-num.is-counted { transition: color var(--r-fast) var(--ease); } /* —————————————————————————————————————————————— REDUCED MOTION —————————————————————————————————————————————— */ @media (prefers-reduced-motion: reduce) { .nf-progress { display: none; } .nf-nav { transition: none; } .bg-letter { transform: translateY(-50%); } .nf-orb { animation: none; display: none; } .nf-motif { display: none; } .nf-link-marker { display: none; } body { animation: none; opacity: 1; } .nf-bottom__cta, .nf-form-submit, .nf-about-phase, .nf-blog-card, .nf-case-card, .nf-cell-service, .nf-row-hover, .nf-poster__panel-black { transition: none; transform: none; } .nf-bottom__cta:hover .arr, .nf-form-submit:hover .arr { transform: none; } .nf-faq-panel { transition: none; } .nf-faq-item--interactive .nf-faq-q::after { transition: none; } .nf-badge-row .nf-badge, .nf-about-phases .nf-about-phase { transition-delay: 0s; } } /* —————————————————————————————————————————————— RESPONSIVE — disable heavier effects below tablet —————————————————————————————————————————————— */ @media (max-width: 1023px) { .nf-orb { display: none; } .nf-motif { display: none; } } @media (max-width: 767px) { .nf-about-phase:hover, .nf-blog-card:hover, .nf-case-card:hover, .nf-cell-service:hover { transform: none; } }