/* Aquila desktop — runtime layout for the pinned scrollytelling section. * * WHAT IS IN THIS FILE, AND WHY * * Only rules that MUST NOT apply inside the Webflow Designer, plus two rules for * the SVG stage, which Webflow cannot style because it lives inside an Embed. * * Everything else — column widths, padding, spacing, typography, colour — lives * in Webflow classes and is editable in the Style panel. If you find yourself * wanting to add a design rule here, put it in Webflow instead. * * `.js-anim` is added to by aquila.js when the animation engine starts. * The Designer never runs page custom code, so in the canvas none of these apply * and the section renders as the plain two-column layout built in Webflow. */ /* The stage SVG lives inside an Embed, so Webflow can't reach it. */ #stage { width:100%; display:block; } #stage text { font-family:'IBM Plex Mono',monospace; } /* ---- Live page only ---- */ .js-anim #stage { height:100vh; } .js-anim #pin { position:relative; } .js-anim #pinner { display:block; position:sticky; top:0; height:100vh; margin-bottom:-100vh; z-index:1; overflow:hidden; } .js-anim #stagewrap { position:absolute; inset:0; z-index:0; } .js-anim #copy { position:absolute; left:68px; top:0; bottom:0; width:430px; z-index:2; pointer-events:none; } .js-anim #pin .sec { height:100vh; } .js-anim .panel { position:absolute; left:0; right:0; top:44%; transform:translateY(-46%); opacity:0; transition:opacity .55s ease, transform .55s ease; } .js-anim .panel.on { opacity:1; transform:translateY(-54%); } /* Placeholder text blocks built in Webflow, visible only in the Designer. */ .js-anim .designer-note { display:none; }