/* no-motion.css — the page for anyone whose OS asks for reduced motion. * * Nothing here loads unless js/app.js puts .no-motion on , which it does * only when prefers-reduced-motion matches. The whole design is scroll-driven: * a 1000vh runway, three pinned sections, and slides revealed by clip-path. * With the animations off none of that would resolve, so the layout is undone * back into an ordinary document. In particular the dark "About" panel is what * the portraits and the services sit on — flattened, those two sections need * their own dark background or the light text lands on the light page. */ body.no-motion, body.no-motion .app { height: auto; } body.no-motion #canvas3d, body.no-motion .nav-item .progress { display: none; } body.no-motion .hero, body.no-motion .portraits, body.no-motion .services, body.no-motion .carousel, body.no-motion .archive, body.no-motion .footer { height: auto; } body.no-motion .hero .wrapper { min-height: 100vh; } /* The dark panel joins the flow instead of covering the viewport. */ body.no-motion .about-header { position: relative; width: 100%; height: 50vh; margin-top: 4rem; clip-path: none; } body.no-motion .about-header h2 { transform: none; opacity: 1; } /* These two used to be read against the dark panel behind them. */ body.no-motion .portraits, body.no-motion .services { background-color: var(--bg-dark); } body.no-motion .portraits .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 4em 2em; } body.no-motion .portrait.p-1, body.no-motion .portrait.p-2, body.no-motion .portrait.p-3 { position: relative; width: 100%; transform: none; aspect-ratio: 4 / 5; } body.no-motion .services .wrapper { padding: 4em 2em; } /* Five slides stacked on top of each other become five slides in a row. */ body.no-motion .project { position: relative; height: 100vh; clip-path: none; display: block; } /* Everything the animations were going to fade in has to start visible. */ body.no-motion .line, body.no-motion .char, body.no-motion .service .index, body.no-motion .archive-shots .img, body.no-motion .archive-year p, body.no-motion .footer .outro h2 { opacity: 1 !important; transform: none !important; } body.no-motion .archive { padding-bottom: 6em; } @media (max-width: 900px) { body.no-motion .portraits .wrapper { grid-template-columns: 1fr; } } /* ---------------------------------------------------------- project page */ /* The image column is moved by GSAP inside a pinned, clipped frame; with the animation off only the first image would ever be visible. Unclip it and let the five images stack down the page. The drawer stops being a fixed panel that has to be pulled open and simply leads the page. */ body.no-motion .project-images { position: static; height: auto; padding: 0.5rem; } body.no-motion .project-images-inner { height: auto; overflow: visible; } body.no-motion .drawer { position: relative; width: 100%; height: auto; transform: none; display: block; } body.no-motion .drawer-toggler { display: none; } body.no-motion .drawer-wrapper { height: auto; border-radius: 0; padding: 6rem 2rem 2rem; } body.no-motion .outro-copy { position: relative; bottom: auto; left: auto; padding: 2em; } body.no-motion .outro-copy p, body.no-motion .outro-copy h2, body.no-motion .outro-copy a { color: var(--text); }