The effect works by creating multiple copies of the header (one for each design/section), which are then wrapped in two clipping masks (.midnightHeader and then

The effect works by creating multiple copies of the header (one for each design/section), which are then wrapped in two clipping masks (.midnightHeader and then .midnightInner inside that). When you stop between two sections (let's say we need a blue header on the top one and a white one on the bottom one), we grab .midnightHeader.blue and place it exactly above the border. We then place .midnightHeader.white exactly below the border. That nets you two headers, a blue one on top and a white one below the border, which isn't quite that we want. To fix it, we then grab the .midnightInner inside those and move the blue one towards the bottom (so it gets chopped in half right at the border, showing only the top part), and do the opposite with the one of the bottom (moving it upwards so it also gets chopped in half, but showing only the bottom part). By doing this, the design looks continuous and all events work as they should, so the effect doesn't cause any usability issues. We did a subtle implementation of Midnight at https://xapo.com/ https://xapo.com/ (it's particularly noticeable in the vault/security part of the landing page). If you check it out with the Chrome Dev Tools it's easier to see how the masks work together, since it's a more realistic use case.