/* FitoNova site -- hand-written, no build step, no external requests. The demo band: the six-phone fan, its copy and its controls. Owner's ruling, 2026-08-10: the fan is driven by BUTTONS, not by the scroll. The 360vh runway and the sticky stage went with it, and so did the trap they carried -- nothing here is sticky. One of the ordered sheets in public/css/; the load order in every page's IS the cascade, so a rule moved between files is a rule moved in the cascade. Owner's ruling 2026-08-10: no source file over 500 lines. */ /* ----------------------------------------------------------- demo band */ /* Static by default: with JS off or motion suppressed the six phones sit in a captioned 3x2 grid, every copy item is on the page and the controls are absent. The arc is opt-in, under .js and no-preference motion. The band clips in EVERY state, and that is the new invariant. Until the 2026-08-10 button ruling the arc rode a 360vh runway under a sticky stage, and a sticky child does not stick inside a clipping ancestor -- so the band had to hand its clip back to the stage exactly where the arc was built. Nothing is sticky here any more, so the clip stays on: it holds in the two vines in every state, plus (under the arc) the outer phones, which hang off a centre origin and reach past the viewport by design. Do not put a width on it, and do not reintroduce `position: sticky` below. */ .demo { position: relative; overflow: hidden; background: var(--band); color: #eef6fa; padding: 96px 0 104px; } .demo-stage { position: relative; display: flex; flex-direction: column; } .demo-head { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .demo-head h2 { margin-top: 12px; font-size: clamp(34px, 4.2vw, 58px); line-height: 1; } .demo-head p { max-width: 300px; font: 400 15px/1.6 "Barlow", sans-serif; color: rgba(238, 246, 250, 0.8); } .fan-area { position: relative; flex: 1; min-height: 0; margin-top: 40px; } .fan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; justify-items: center; transform: scale(var(--ffit, 1)); } /* --fo is the arc's fade and is read only by the arc: a static grid that honoured it would sit at 6% opacity with five of six phones invisible. */ .fan-phone { --pwn: 216; position: relative; margin: 0; width: calc(var(--pwn) * 1px); } .fan-phone .phone-frame { padding: 9px; border-radius: 38px; background: linear-gradient(160deg, #333b41, #0e1418 44%, #262e34); box-shadow: 0 30px 60px -24px rgba(3, 20, 29, 0.7); } .fan-phone .phone-screen { --as: calc((var(--pwn) - 18) / 360); height: calc((var(--pwn) - 18) * 800px / 360); border-radius: 30px; } .fan-phone .phone-notch { top: 9px; width: 76px; height: 21px; border-radius: 12px; } .fan-phone .phone-sheen { border-radius: 30px; } .fan-cap { display: block; margin-top: 14px; font: 600 22px/1.1 "Barlow Condensed", sans-serif; color: #eef6fa; text-align: center; } .fan-copy { position: relative; z-index: 3; margin-top: 48px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; } .fan-copy-item { max-width: 640px; } .fan-copy-head { display: flex; align-items: center; justify-content: center; gap: 12px; font: 600 12px/1 "Barlow", sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(238, 246, 250, 0.78); } .fan-num { font: 600 30px/1 "Barlow Condensed", sans-serif; letter-spacing: 0; color: #fff; } .fan-title { margin-top: 10px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.05; color: #fff; } .fan-body { margin: 10px auto 0; max-width: 56ch; font: 400 16px/1.6 "Barlow", sans-serif; color: rgba(238, 246, 250, 0.76); } /* The controls only mean anything once the arc is built, so they are absent from the static page rather than dead buttons on it: the captioned grid already shows all six screens at once. Both halves -- the two arrows and the six dots -- are hidden here and shown by the motion-gated block. */ .fan-nav { display: none; align-items: center; justify-content: center; gap: 12px; } .fan-dots { display: none; align-items: center; justify-content: center; gap: 10px; } /* The arrows are the fan's primary control (the dots are the shortcut): real