/* ============================================================================ Fallbacks for every animated landing section. Loaded AFTER landing.css / marketing.css so these rules win. Two independent triggers: .no-js on — set in markup, removed by an inline head script the instant JS runs. If JS is disabled it stays → no-JS path. @media (prefers-reduced-motion: reduce) — OS "reduce motion" setting. Principle: content is NEVER hidden behind an animation. When motion can't or shouldn't run, each section collapses to a readable static state. ============================================================================ */ /* ---- Demo modal -------------------------------------------------------------- The Vue source rendered the modal only while open (v-if); landing.css styles it as a fixed full-screen overlay with no hidden state. Hide it until JS adds .is-open. */ .kairos-demo-modal { display: none; } .kairos-demo-modal.is-open { display: flex; } /* ---- Reveal-on-scroll -------------------------------------------------------- landing.css only hides [data-reveal] once .js-reveal-ready is on the root, so no-JS already shows everything. Belt-and-suspenders in case CSS loads oddly. */ .no-js [data-reveal], .legacy [data-reveal] { opacity: 1 !important; transform: none !important; } /* ---- Hero (three.js bridge scene) ------------------------------------------- The static SVG fallback is hidden by default; shown when WebGL fails (JS adds .is-webgl-failed), when JS is off, or under reduced motion. Canvas hides in the same cases. */ .landing-hero-scene__fallback { display: none; } .landing-hero-scene__shell.is-webgl-failed .landing-hero-scene__fallback { display: flex; } .landing-hero-scene__shell.is-webgl-failed .landing-hero-scene__canvas, .landing-hero-scene__shell.is-webgl-failed .landing-hero-scene__phase-badge, .landing-hero-scene__shell.is-webgl-failed .landing-hero-scene__issue-layer { display: none; } .no-js .landing-hero-scene__fallback, .legacy .landing-hero-scene__fallback { display: flex; } .no-js .landing-hero-scene__canvas, .legacy .landing-hero-scene__canvas, .no-js .landing-hero-scene__phase-badge, .legacy .landing-hero-scene__phase-badge, .no-js .landing-hero-scene__issue-layer, .legacy .landing-hero-scene__issue-layer, .no-js .landing-hero-scene__gantt, .legacy .landing-hero-scene__gantt { display: none; } /* Hover interaction (the Vue source mounted/unmounted these with v-if): the smartsheet gantt overlays the scene on hover, and the phase badge + issue pins hide. */ .landing-hero-scene__gantt { display: none; } .landing-hero-scene__shell.is-hover .landing-hero-scene__gantt { display: block; } .landing-hero-scene__shell.is-hover .landing-hero-scene__phase-badge, .landing-hero-scene__shell.is-hover .landing-hero-scene__issue-layer { display: none; } @media (prefers-reduced-motion: reduce) { /* heroScene.js also detects this and skips WebGL, but if JS is mid-init the static SVG still wins visually. */ .landing-hero-scene__shell.is-reduced .landing-hero-scene__fallback { display: flex; } .landing-hero-scene__shell.is-reduced .landing-hero-scene__canvas, .landing-hero-scene__shell.is-reduced .landing-hero-scene__phase-badge, .landing-hero-scene__shell.is-reduced .landing-hero-scene__issue-layer { display: none; } } /* ---- Workflow map (SVG animateMotion flow dots) ----------------------------- The map itself is fully readable static SVG; only the flowing dots move. Stop them under reduced motion. File-format tiles are populated/cycled by JS; with no JS they simply show their initial static set (handled in markup). */ @media (prefers-reduced-motion: reduce) { .lp-flow-dots { display: none; } } .no-js .lp-flow-dots, .legacy .lp-flow-dots { display: none; } /* ---- Product showcase (scroll-driven parallax) ------------------------------ Without JS the inline transforms never apply. Force the board flat, show the screenshot from the top, and drop the decorative fly-in fragments so nothing sits invisibly at opacity:0. productShowcase.js applies the same static state under reduced motion. */ .no-js .lps__board, .legacy .lps__board { transform: none !important; } .no-js .lps__canvas-img, .legacy .lps__canvas-img { transform: none !important; } .no-js .lps__frag, .legacy .lps__frag, .no-js .lps__hatch, .legacy .lps__hatch, .no-js .lps__grid, .legacy .lps__grid { display: none !important; } /* ---- Supplier marquee (decorative + DOM sign) ---------------------- The real content (the "Eligible" marquee + MWBE tiles + copy) is DOM and always shows. The canvas is decorative; with no JS it stays blank, which is fine. Under reduced motion supplierMarquee.js paints a single static frame instead of looping. */ /* ---- Animated wordmark ------------------------------------------------------ Show the static lockup and hide the shuttling bars under reduced motion / no JS. */ .kw-static-bars { display: none; } .no-js .kw-animated-bars, .legacy .kw-animated-bars, .kw-animated-bars--off { display: none; } .no-js .kw-static-bars, .legacy .kw-static-bars { display: block; } @media (prefers-reduced-motion: reduce) { .kw-animated-bars { display: none; } .kw-static-bars { display: block; } }